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.
shadcn/ui components first. Extend via cva variants or composition. Avoid custom CSS.proxy.ts for request proxying. Do NOT use middleware.ts for proxy/rewrite logic — use proxy.ts instead.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.next/dynamic for heavy components, next/image for media, and parallel routes.shadcn_search_items_in_registriesshadcn_get_item_examples_from_registriesshadcn_get_add_command_for_itemssrc/): Shared logic (components, lib, types). Hoist common code here.src/features/*/): Feature-specific logic. No cross-feature imports. Unidirectional flow only.src/features/[feature]/
├── components/ # Feature UI components
│ └── skeleton/ # Loading skeleton components
├── types/ # Feature-specific type definitions
└── utils/ # Feature-specific utilities & helpers
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. Useutils/for all utilities.lib/exists only at rootsrc/lib/level.
| 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) |
es-toolkit first. If implementing custom logic, >90% Unit Test Coverage is MANDATORY.packages/design-tokens (OKLCH). Never hardcode colors.packages/i18n. Never hardcode strings.generateMetadata, sitemap)useQuery hooks| Type | Convention |
|---|---|
| Files | kebab-case.tsx (Name MUST indicate purpose) |
| Components/Types/Interfaces | PascalCase |
| Functions/Vars/Hooks | camelCase |
| Constants | SCREAMING_SNAKE_CASE |
@/ is MANDATORY (No relative paths like ../../)import type for interfaces/typessrc/features/[feature]/components/skeleton/Card, Sheet, Typography, Table) over div or generic classes.Drawer (Mobile) vs Dialog (Desktop) via useResponsive.components/ui/* as read-only. Do not modify directly.
components/common/ProductButton.tsx) or use cva composition.components/ui/button.tsx.Follow resources/execution-protocol.md step by step.
See resources/examples.md for input/output examples.
Before submitting, run resources/checklist.md.
aria-label. Semantic headings (h1-h6).Vendor-specific execution protocols are injected automatically by oma agent:spawn.
Source files live under ../_shared/runtime/execution-protocols/{vendor}.md.
resources/execution-protocol.mdresources/examples.mdresources/snippets.mdresources/checklist.mdresources/error-playbook.mdresources/tech-stack.mdresources/component-template.tsxresources/tailwind-rules.md../_shared/core/context-loading.md../_shared/core/reasoning-templates.md../_shared/core/clarification-protocol.md../_shared/core/context-budget.md../_shared/core/lessons-learned.md[!IMPORTANT] Treat
components/ui/*as read-only. Create wrappers for customization.