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
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
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.
