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.
| 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_search_items_in_registriesshadcn_get_item_examples_from_registriesshadcn_get_add_command_for_itemsgenerateMetadata, sitemap)useQuery hooksCard, Sheet, Typography, Table) over div or generic classes.Drawer (mobile) vs Dialog (desktop) via useResponsive.components/ui/* as read-only. Create wrappers (e.g., components/common/ProductButton.tsx) or use cva composition. Never edit components/ui/button.tsx directly.packages/design-tokens (OKLCH) — never hardcode colorspackages/i18n — never hardcode UI textes-toolkit first; if implementing custom logic, >90% unit test coverage is mandatoryresources/execution-protocol.md step by step.resources/examples.md for input/output examples.resources/checklist.md.Vendor-specific execution protocols are injected automatically by oma agent:spawn.
Source files live under ../_shared/runtime/execution-protocols/{vendor}.md.
resources/tech-stack.mdresources/execution-protocol.mdresources/examples.mdresources/snippets.mdresources/checklist.mdresources/error-playbook.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.