AI Inspiration WorldAdded Nov 4, 2026
3d-website-skill
A Skill that guides coding agents through 13 steps to design and build websites with 3D and animation.
- Ecosystem
- Agent Skills
- Skill category
- Design
- Creator / organization
- deveshpunjabi
What it is
3d-website-skill is an Agent Skill by GitHub user deveshpunjabi; the Skill inside is called 3d-website-architect. It activates when you ask a coding agent for a landing page with 3D. It has the agent follow 13 steps: understand the product and audience, set a design system, page structure and components, add scroll animation and Three.js 3D scenes, then optimize, make it responsive, test and deploy. The stack is Next.js, TypeScript, Tailwind, React Three Fiber, Framer Motion and GSAP. What stands out is the 3D fallback plan: on weaker devices it steps down from the full scene to a simpler one, then to plain CSS.
Highlights:
- the Skill is plain Markdown with no runtime dependencies
- the README covers installing in Claude Code, Cursor, Windsurf, Cline, Codex, Aider and more
- the process includes Lighthouse audits and frame rate checks.
How to use:
- First run npx skills add deveshpunjabi/3d-website-architect in Claude Code, or copy the skills/3d-website-architect/ folder into your tool's directory
- then start a new session and ask for a landing page with a 3D hero and scroll animation.
Who it's for:
Frontend developers who want a coding agent to build product landing pages with 3D and motion.
Before you start:
- You need a coding agent that reads Skills or instruction files, and the generated site runs on Node.js.
- The README's install command says 3d-website-architect, which differs from this repo's name, so check before installing.
- Hosting costs on Vercel, Netlify and similar follow their official sites.
- MIT license.
Based on the project's public documentation. Not tested by AI Inspiration World.