// 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.
| name | oma-frontend |
| description | 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. |
Build, modify, and verify React/Next.js/TypeScript user interfaces that follow project architecture, design-system constraints, accessibility expectations, and existing frontend conventions.
shadcn/uipackages/design-tokens, packages/i18n, and shared utilitiesresources/execution-protocol.md, resources/checklist.md, examples, snippets, and Tailwind rules| Action | SSL primitive | Evidence |
|---|---|---|
| Inspect existing frontend patterns | READ | Components, routes, hooks, styles |
| Select component and state approach | SELECT | Server/client and shadcn workflow |
| Implement UI code | WRITE | TSX, CSS, hooks, wrappers |
| Validate form/data contracts | VALIDATE | Zod/forms/API schemas |
| Call shadcn or verification tools | CALL_TOOL | Registry, lint, typecheck, tests |
| Compare responsive states | COMPARE | Desktop/mobile behavior |
| Report result | NOTIFY | Final summary |
ahooks, es-toolkit, nuqs, TanStack Query, Jotai, TanStack React Form, zodrg --files
rg "components/ui|shadcn|use client|generateMetadata|useQuery|i18n|design-tokens" .
Then run the project's frontend verification commands, typically lint, typecheck, tests, and browser/responsive checks when the UI changes.
| Scope | Resource target |
|---|---|
CODEBASE | Frontend routes, components, styles, hooks, tests |
LOCAL_FS | Design tokens, i18n files, resource references |
PROCESS | Build, lint, typecheck, test, browser commands |
NETWORK | Backend APIs or registry tools when required |
components/ui/* directly.shadcn/ui primitives and wrappers for UI work; treat components/ui/* as read-only.proxy.ts is mandatory; middleware.ts is BANNED: this project is Next.js 16+. middleware.ts is NOT "deprecated"; it is forbidden, touch it and you die. The canonical request-proxy / auth-gate file is proxy.ts (root or src/) exporting a proxy function. NEVER create, recommend, suggest, or "restore" middleware.ts. NEVER flag proxy.ts as dead code, unused, or not-wired. Any such finding is a fatal self-error: retract it immediately and write proxy.ts.| Category | Library |
|---|---|
| Framework | next@16+ (App Router) + react@19+; next < 16 is BANNED |
| 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) |
| Animation | motion; import from motion/react. framer-motion (legacy package name) is BANNED. |
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 mandatoryProject stack conventions live in dedicated files. Read these before coding; they are not optional appendix material.
| File | Owns |
|---|---|
resources/tech-stack.md | Framework versions, Next.js 16 proxy.ts conventions, Serena shortcuts |
resources/tailwind-rules.md | Design tokens, focus states, Tailwind v4 @theme syntax |
resources/snippets.md | React 19 hook patterns, TanStack Query/Form, a11y card |
To extend: add resources/<name>.md and append a row above.
resources/execution-protocol.md step by step.resources/checklist.md.
Vendor-specific execution protocols are injected automatically by oma agent:spawn.
Source files live under ../_shared/runtime/execution-protocols/{vendor}.md.../../rules/frontend.mdresources/execution-protocol.mdresources/checklist.mdresources/error-playbook.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.
Backend specialist for APIs, databases, authentication with clean architecture (Repository/Service/Router pattern). Use for API, endpoint, REST, database, server, migration, and auth work.
Database specialist for SQL, NoSQL, and vector database modeling, schema design, normalization, indexing, transactions, integrity, concurrency control, backup, capacity planning, data standards, anti-pattern review, and compliance-aware database design. Use for database, schema, ERD, table design, document model, vector index design, RAG retrieval architecture, migration, query tuning, glossary, capacity estimation, backup strategy, database anti-pattern remediation work, and ISO 27001, ISO 27002, or ISO 22301-aware database recommendations.
Bug diagnosis and fixing specialist - analyzes errors, identifies root causes, provides fixes, and writes regression tests. Use for bug, debug, error, crash, traceback, exception, and regression work.
Drive Vercel's `deepsec` agent-powered vulnerability scanner end-to-end: installing the `.deepsec/` workspace, bootstrapping `INFO.md`, running cost-aware `scan` / `process` / `triage` / `revalidate` / `export` passes, gating PRs with `process --diff`, writing custom matchers, and triaging findings. Use whenever the user mentions deepsec, asks an agent to scan a repo for vulnerabilities, runs into `pnpm deepsec` / `bunx deepsec` commands, wants a CI-based PR security review, sees a `.deepsec/` directory, or asks about `INFO.md` / matchers / `process --diff` / `revalidate`, even when the tool name is not spoken. Deepsec scans are expensive (a single full scan can cost hundreds to tens of thousands of dollars) so the skill exists in part to keep the user from getting surprised.
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance. Covers typography, color systems, motion design (motion/react, GSAP, Three.js), responsive-first layouts, and accessibility (WCAG 2.2).
Verify documentation references against the current codebase and propose updates for diff-affected docs. Use to check if docs still match reality (broken file paths, CLI commands, config keys, env vars, scripts) and to surface docs that may need updating after code changes.