codexskills.dev

Frontend Craft

Interfaces that look designed, not generated. For frontends that should feel deliberate. Codex picks an aesthetic direction before writing markup, builds on tokens instead of magic numbers, uses modern CSS layout and motion with restraint, and checks accessibility and Core Web Vitals before calling the page done.

  • 10 skills
  • 1,948 lines of instructions
  • MIT

What's inside

Best for: Frontend developers and designers who code. Start with frontend-design, then ui-design-review once a page exists. Each skill loads when a request matches its description, or call one directly with its $name.

  1. Frontend Design Interfaces with a point of view, not a template Design & UX$frontend-design267 lines
  2. UI Design Review Critique backed by screenshots and measurements Design & UX$ui-design-review189 lines
  3. Design Tokens Name roles once, theme every platform from one source Design & UX$design-tokens227 lines
  4. Tailwind CSS v4 Config in CSS, upgrade without visual drift Frontend$tailwind-v4178 lines
  5. Modern CSS Layout Components that fit any slot, pages that never overflow Frontend$modern-css-layout197 lines
  6. Motion for React Exit animations that actually play Frontend$motion-animations216 lines
  7. Typography Systems A short named type scale that reads well at any width Design & UX$typography-systems171 lines
  8. WCAG 2.2 Accessibility Audit Findings mapped to criteria, with fixes Frontend$wcag-accessibility-audit176 lines
  9. Core Web Vitals Fix the LCP, INP or CLS phase that actually dominates Performance$core-web-vitals165 lines
  10. Landing Page Design Every section answers the visitor's next question Design & UX$landing-page-design162 lines
esc