Official
Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
ReactTailwindDesign
Frontend & UI × Codex
Top Frontend & UI Design Skills for Codex
For UI work in Codex CLI, frontend-design and Vercel's web-design-guidelines are the two that change output most — the first commits to a visual direction, the second supplies the React and Next.js conventions. accessibility-review is the one teams skip and then retrofit expensively; it is read-only and takes a minute to install.
9 of 20 verified on Codex · updated May 20, 2026
Top 5 on Codex
- 1.frontend-design—Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
- 2.react-email—Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
Drop-in WorkOS widgets with backend token wiring across every major framework.
- 4.web-artifacts-builder—Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Pre-handoff a11y audit that catches what design QA misses.
Verified
Frontend & UI skills that work on Codex
Ranked by composite score. Every entry was tested on Codex — not inferred from the SKILL.md format.
Verified
Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
React EmailTemplatesTransactional
Official
Drop-in WorkOS widgets with backend token wiring across every major framework.
WorkOSWidgetsAuth
Official
Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Reactshadcn/uiArtifacts
Official
Pre-handoff a11y audit that catches what design QA misses.
AccessibilityWCAGAudit
Verified
Shopify Storefront API: cart, checkout, metafields, customer accounts, Hydrogen patterns.
ShopifyCommerceHydrogen
Code
Medium4 min
Verified
100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code.
A11yUXAudit
Verified
57 React/Next.js performance rules, applied as a structural review on your code.
ReactNext.jsPerformance
Verified
Next.js App Router by the book. Server components, streaming, parallel routes.
Next.jsReactApp Router
Install
Commands for Codex
Copy-paste installs for the top picks. Full per-agent commands are on each skill page.
frontend-design
codex skills add github.com/anthropics/skills/skills/frontend-designreact-email
codex skills add resend/resend-skills/skills/react-emailworkos-widgets
Not bundled with Codex; community port may exist.
web-artifacts-builder
codex skills add github.com/anthropics/skills/skills/web-artifacts-builderaccessibility-review
Copy the accessibility-review folder into ~/.codex/skills/
shopify-storefront
See the skill page for setup.
vercel-web-design-guidelines
codex skills add vercel-labs/agent-skills/skills/vercel-web-design-guidelinesvercel-react-best-practices
codex skills add vercel-labs/agent-skills/skills/vercel-react-best-practicesNot verified here
11 frontend & ui skills we have not confirmed on Codex
Listed rather than hidden. Absence here usually means untested, not broken — check each skill page for the agents it is verified on.
- shadcn-context
- theme-factory
- design-critique
- design-handoff
- design-system
- ux-copy
- brand-guidelines
- composition-patterns
- expo-skills
- publishing-astro-websites
- web-asset-generator
A combination only gets a page here when at least 6 skills are verified on the agent — otherwise the page would be a stub pretending to be a ranking.
FAQ
Common questions
Can Codex generate a full page from these skills without a design file?
Yes, and that is the point of frontend-design specifically — it substitutes a committed set of design decisions for the absent design file. If you do have a design system, install the Vercel and shadcn skills instead and let your tokens lead, because frontend-design will push a direction of its own.
How many frontend & ui skills work with Codex?
9 of the 20 skills catalogued in Frontend & UI Design are verified working on Codex. The remaining 11 are either untested on this agent or depend on capabilities it does not provide — they are listed below rather than hidden.
How do I install a frontend & ui skill on Codex?
Each skill page carries the exact Codex command. Codex reads SKILL.md natively, so a skill folder works unchanged.
Related
Other cuts of this data
- All Frontend & UI Design skills →
Every entry in the category, across all agents, ranked by composite score.
- All skills for Codex →
Every skill verified on Codex CLI, across all categories.
- Top Code Quality & Review Skills for Codex →
The 10 code review agent Skills with verified Codex compatibility, ranked by composite score, with the install command for Codex and what is not verified there yet.
- Top AI/ML & Agent Tooling Skills for Codex →
The 7 ai agent tooling agent Skills with verified Codex compatibility, ranked by composite score, with the install command for Codex and what is not verified there yet.