--- title: Top Frontend & UI Design Skills for Codex slug: top-frontend-design-skills-for-codex type: category-agent-cut category: frontend-design agent: codex canonical: https://top-agent-skills.com/top-frontend-design-skills-for-codex verified: 10 unverified: 11 updated: 2026-09-29 --- # 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. ## Verified on Codex CLI (10) ### 1. frontend-design — score 92/100 (official-anthropic) Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written. - Best for: Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated. - Not ideal for: Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens. - Publisher: Anthropic · MIT - Verified on: claude-code, claude-ai, claude-api, cursor, codex, gemini-cli, antigravity ```bash npx skills add github.com/anthropics/skills --skill frontend-design ``` Full entry: https://top-agent-skills.com/skill/frontend-design (https://top-agent-skills.com/skill/frontend-design.md) ### 2. wordpress-agent-skills — score 67/100 (verified-org) WordPress’s own answer to agents writing pre-Gutenberg code: blocks, block themes, plugins, the modern APIs. - Best for: Stopping an agent generating outdated WordPress patterns — pre-block themes, missing block deprecations that cause "Invalid block" errors, plugin code that skips the security conventions. - Not ideal for: Running or hosting a WordPress site. These teach how to build for WordPress; updates, backups and hosting are a host’s skill, not this set. - Publisher: WordPress · GPL-2.0-or-later - Verified on: claude-code, codex, cursor ```bash npx skills add WordPress/agent-skills --skill wp-plugin-development --yes ``` Full entry: https://top-agent-skills.com/skill/wordpress-agent-skills (https://top-agent-skills.com/skill/wordpress-agent-skills.md) ### 3. react-email — score 59/100 (verified-org) Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering. - Best for: Authoring transactional email templates (welcome, reset, receipt, notification) as type-safe React components that render across email clients. - Not ideal for: Plain-text-only sends or teams not using React — the value is the React Email component model. - Publisher: Resend · MIT - Verified on: claude-code, cursor, codex ```bash npx skills add resend/resend-skills ``` Full entry: https://top-agent-skills.com/skill/react-email (https://top-agent-skills.com/skill/react-email.md) ### 4. workos-widgets — score 54/100 (official-anthropic) Drop-in WorkOS widgets with backend token wiring across every major framework. - Best for: Embedding WorkOS user-management UI in an existing app without rebuilding auth screens. - Publisher: Anthropic · MIT - Verified on: claude-code, cursor, codex, antigravity Install: Built into Claude Code. Invoke with /workos-widgets. Full entry: https://top-agent-skills.com/skill/workos-widgets (https://top-agent-skills.com/skill/workos-widgets.md) ### 5. web-artifacts-builder — score 52/100 (official-anthropic) Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run. - Best for: Demos, prototypes, and one-off interactive artifacts. - Publisher: Anthropic · MIT - Verified on: claude-code, claude-ai, claude-api, cursor, codex ```bash npx skills add github.com/anthropics/skills --skill web-artifacts-builder ``` Full entry: https://top-agent-skills.com/skill/web-artifacts-builder (https://top-agent-skills.com/skill/web-artifacts-builder.md) ### 6. accessibility-review — score 52/100 (official-anthropic) Pre-handoff a11y audit that catches what design QA misses. Full entry: https://top-agent-skills.com/skill/accessibility-review (https://top-agent-skills.com/skill/accessibility-review.md) ### 7. shopify-storefront — score 51/100 (verified-org) Shopify Storefront API: cart, checkout, metafields, customer accounts, Hydrogen patterns. Full entry: https://top-agent-skills.com/skill/shopify-storefront (https://top-agent-skills.com/skill/shopify-storefront.md) ### 8. vercel-web-design-guidelines — score 49/100 (verified-org) 100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code. Full entry: https://top-agent-skills.com/skill/vercel-web-design-guidelines (https://top-agent-skills.com/skill/vercel-web-design-guidelines.md) ### 9. vercel-react-best-practices — score 49/100 (verified-org) 57 React/Next.js performance rules, applied as a structural review on your code. Full entry: https://top-agent-skills.com/skill/vercel-react-best-practices (https://top-agent-skills.com/skill/vercel-react-best-practices.md) ### 10. next-js-app-router — score 49/100 (verified-org) Next.js App Router by the book. Server components, streaming, parallel routes. Full entry: https://top-agent-skills.com/skill/next-js-app-router (https://top-agent-skills.com/skill/next-js-app-router.md) ## In Frontend & UI Design but NOT verified on Codex CLI (11) These may well work — the SKILL.md format is shared. They are listed as unverified because this site lists an agent only where the install was run or the publisher documents a path for it. - brand-guidelines — Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill. (https://top-agent-skills.com/skill/brand-guidelines) - theme-factory — Single seed prompt → cohesive token system. Tokens that look intentional, not generated. (https://top-agent-skills.com/skill/theme-factory) - composition-patterns — Boolean prop hell → compound components. Cleaner React component APIs by construction. (https://top-agent-skills.com/skill/composition-patterns) - expo-skills — Expo workflows: navigation, EAS, OTA, native modules. (https://top-agent-skills.com/skill/expo-skills) - web-asset-generator — Favicons, app icons, social cards — generated at all the right sizes. (https://top-agent-skills.com/skill/web-asset-generator) - shadcn-context — shadcn/ui context: components, patterns, and the right composition by default. (https://top-agent-skills.com/skill/shadcn-context) - publishing-astro-websites — Astro from scaffold to live site — content collections, search, i18n, multi-host deploy. (https://top-agent-skills.com/skill/publishing-astro-websites) - design-critique — Senior-designer feedback on demand. Hierarchy, usability, consistency, motion. (https://top-agent-skills.com/skill/design-critique) - design-handoff — Turn a final design into a spec engineers can implement directly. (https://top-agent-skills.com/skill/design-handoff) - design-system — Design-system hygiene at speed. Audit, document, extend. (https://top-agent-skills.com/skill/design-system) - ux-copy — Microcopy that respects the user. Errors, empty states, CTAs, onboarding. (https://top-agent-skills.com/skill/ux-copy) ## Common question **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. --- _Top Agent Skills. Machine-readable twin of https://top-agent-skills.com/top-frontend-design-skills-for-codex._