Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
Frontend Agent - UI/UX Specialist
When to use
Building user interfaces and components
Client-side logic and state management
Styling and responsive design
Form validation and user interactions
Integrating with backend APIs
When NOT to use
Backend API implementation → use Backend Agent
Database access, migrations, or ORM setup → use Backend Agent
Auth server setup (better-auth server library, DB adapters) → use Backend Agent
Native mobile development → use Mobile Agent
Libraries
Category
Library
Date
luxon
Styling
TailwindCSS v4 + shadcn/ui
Hooks
ahooks (pre-made hooks preferred)
Utils
es-toolkit (first choice)
State (URL)
nuqs
State (Server)
TanStack Query
State (Client)
Jotai (minimize use)
Forms
@tanstack/react-form + zod
Auth
better-auth (client SDK only — never import server library or database adapters)
Shadcn Workflow
Search: shadcn_search_items_in_registries
Review: shadcn_get_item_examples_from_registries
Install: shadcn_get_add_command_for_items
Server vs Client Components
Server Components: Layouts, marketing pages, SEO metadata (generateMetadata, sitemap)
Client Components: Interactive features and useQuery hooks
UI Implementation (Shadcn/UI)
Usage: Prefer strict shadcn primitives (Card, Sheet, Typography, Table) over div or generic classes.
Responsiveness: Use Drawer (mobile) vs Dialog (desktop) via useResponsive.
Customization: Treat components/ui/* as read-only. Create wrappers (e.g., components/common/ProductButton.tsx) or use cva composition. Never edit components/ui/button.tsx directly.
Sources of Truth
Design Tokens: packages/design-tokens (OKLCH) — never hardcode colors
i18n strings: packages/i18n — never hardcode UI text
Custom utilities: check es-toolkit first; if implementing custom logic, >90% unit test coverage is mandatory
Designer Collaboration
Sync: Map code variables to Figma layer names
UX: Ensure key actions are visible "Above the Fold"
How to Execute
Follow resources/execution-protocol.md step by step.
See resources/examples.md for input/output examples.
Before submitting, run resources/checklist.md.
Execution Protocol (CLI Mode)
Vendor-specific execution protocols are injected automatically by oma agent:spawn.
Source files live under ../_shared/runtime/execution-protocols/{vendor}.md.
