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
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
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
Core Rules
Component Reuse: Use shadcn/ui components first. Extend via cva variants or composition. Avoid custom CSS.
Design Fidelity: Code must map 1:1 to Design Tokens. Resolve discrepancies before implementation.
Rendering Strategy: Default to Server Components for performance. Use Client Components only for interactivity and API integration.
Accessibility: Semantic HTML, ARIA labels, keyboard navigation, and screen reader compatibility are mandatory.
Tool First: Check for existing solutions and tools before coding.
Proxy over Middleware: Next.js 16+ uses proxy.ts for request proxying. Do NOT use middleware.ts for proxy/rewrite logic — use proxy.ts instead.
No Prop Drilling: Avoid passing props beyond 3 levels. Use Jotai atoms instead. Avoid React Context — prefer Jotai.
Auth Boundary: Frontend handles auth UI and token storage only. Use better-auth client SDK to call backend auth endpoints. Never import database adapters, ORMs, or better-auth server library. Auth is stateless JWT/JWE via Authorization: Bearer header — no cookies, no sessions.
1. Tooling & Performance
Metrics: Target First Contentful Paint (FCP) < 1s.
Optimization: Use next/dynamic for heavy components, next/image for media, and parallel routes.
components/: React components only. One component per file.
types/: TypeScript interfaces and type definitions.
utils/: All feature-specific logic (formatters, validators, helpers). Requires >90% test coverage for custom logic.
Note: Feature level does NOT have lib/ folder. Use utils/ for all utilities. lib/ exists only at root src/lib/ level.
3. 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)
4. Standards
Utilities: Check es-toolkit first. If implementing custom logic, >90% Unit Test Coverage is MANDATORY.
Design Tokens: Source of Truth is packages/design-tokens (OKLCH). Never hardcode colors.
i18n: Source of Truth is packages/i18n. Never hardcode strings.
5. Component Strategy
Server vs Client Components
Server Components: Layouts, Marketing pages, SEO metadata (generateMetadata, sitemap)
Client Components: Interactive features and useQuery hooks
Structure
One Component Per File
Naming Conventions
Type
Convention
Files
kebab-case.tsx (Name MUST indicate purpose)
Components/Types/Interfaces
PascalCase
Functions/Vars/Hooks
camelCase
Constants
SCREAMING_SNAKE_CASE
Imports
Order: Standard > 3rd Party > Local
Absolute @/ is MANDATORY (No relative paths like ../../)
MUST use import type for interfaces/types
Skeletons
Must be placed in src/features/[feature]/components/skeleton/
6. 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 Rule: Treat components/ui/* as read-only. Do not modify directly.
Correct: Create a wrapper (e.g., components/common/ProductButton.tsx) or use cva composition.
Incorrect: Editing components/ui/button.tsx.
7. 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.
Review Checklist
A11y: Interactive elements have aria-label. Semantic headings (h1-h6).
Mobile: Functionality verified on mobile viewports.
Performance: No CLS, fast load.
Resilience: Error Boundaries and Loading Skeletons implemented.
Tests: Logic covered by Vitest where complex.
Quality: Typecheck and Lint pass.
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.
