ultra-frontend

A frontend design-quality skill for Claude Code. It gives Claude a complete design system to reason with: ten aesthetic archetypes with full CSS token sets, animation cookbooks for GSAP and Framer Motion, a production-ready component library, UI/UX rules, and scaffold/audit scripts, so generated frontends come out with deliberate art direction instead of default AI styling. Built by directing Claude to synthesize best practices from the sources credited below into a single reusable skill.

What's inside

ultra-frontend/
  SKILL.md                        entry point: workflow, archetype table, rules
  references/
    aesthetics.md                 10 archetypes: CSS tokens, fonts, signature effects
    gsap.md                       GSAP plugin cookbook (ScrollTrigger, SplitText, Flip, ...)
    components.md                 React/JSX + Framer Motion + Three.js patterns
    component-library.md          copy-paste React + Tailwind components
    uiux-rules.md                 layout, accessibility, and interaction rules
  scripts/
    design-system.py              generate a project design system from an archetype
    scaffold.sh                   scaffold a project wired to the chosen tokens
    audit.py                      audit an existing frontend against the rules

Installation

Claude Code discovers skills by path. The file must end up at ~/.claude/skills/ultra-frontend/SKILL.md:

git clone https://github.com/namanmehta96/ultra-frontend-skill.git
cp -R ultra-frontend-skill/ultra-frontend ~/.claude/skills/

That's it. Claude Code picks it up automatically for visual web tasks, or invoke it explicitly by asking Claude to use the ultra-frontend skill.

Built with this

namanmehta.dev, a cinematic case-study portfolio (Next.js 15, GSAP, Framer Motion, Lenis) built end-to-end with this skill driving the design system, motion language, and review passes.

Acknowledgements

The archetype and pattern collection draws inspiration from the public work of superdesign.dev, 21st.dev, the GSAP and Framer Motion documentation, and shadcn/ui conventions.

License

MIT © 2026 Naman Mehta