with one click
oma-frontend
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.
Menu
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 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.../../rules/frontend.mdresources/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.
Backend specialist for APIs, databases, authentication with clean architecture (Repository/Service/Router pattern). Use for API, endpoint, REST, database, server, migration, and auth work.
Mobile specialist for Flutter, React Native, and Swift native iOS development. Use for mobile app, Flutter, Dart, React Native, Swift, SwiftUI, iOS, Android, Riverpod, swift-openapi-generator, and widget work.
Academic writing specialist for publication-grade English prose. Drafts, revises, and audits essays, reports, analysis sections, executive summaries, conclusions, and literature reviews while enforcing sentence-structure variation, high-frequency academic verbs, calibrated hedging, and anti-AI stylistic compliance. USE for academic writing, essay polish, paragraph rewrite, prose revision against any rubric tier (HD/D/C, A/B/C, top-band/mid-band, etc.), anti-AI audit, reverse outlining, claim-evidence mapping, and rubric enforcement on assignments.
Design-first ideation that explores user intent, constraints, and approaches before any planning or implementation. Use for brainstorming, ideation, exploring concepts, and evaluating approaches.
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.
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.