skills.rest
javiruu
javiruuCOMMUNITY
Explore all skills by this author →
GitHub

oma-frontend

Implements React and Next.js TypeScript interfaces following shadcn/ui and design-system conventions.

Updated Mar 26, 2026
Search Tags:#typescript#accessibility#frontend#react#next.js#tailwind#shadcn
One-click install
npx skills add https://github.com/javiruu/viru-air --skill oma-frontend-javiruu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: oma-frontend
Source: https://github.com/javiruu/viru-air/tree/main/.agents/skills/oma-frontend
Command: npx skills add https://github.com/javiruu/viru-air --skill oma-frontend-javiruu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI in a modern Next.js codebase requires juggling server/client component boundaries, design tokens, i18n, accessibility rules, and framework-specific conventions like Next.js 16's proxy.ts. This Skill encodes all of those rules so frontend work follows project architecture consistently instead of reinventing patterns per task. ## Core Features & Use Cases - Structured UI workflow: A five-phase execution protocol (prepare, analyze, plan, implement, verify) with a self-verification checklist covering TypeScript strictness, Tailwind tokens, WCAG 2.2 AA accessibility, and responsive breakpoints. - Stack-specific guardrails: Enforces shadcn/ui primitives (Base UI engine), treats components/ui/* as read-only, mandates proxy.ts over the banned middleware.ts, and codifies state choices (TanStack Query, nuqs, Jotai/Zustand). - Error recovery playbook: Provides step-by-step recovery for TypeScript errors, hydration mismatches, build failures, API integration issues, and styling bugs. - Use Case: Ask it to build a responsive login form; it produces a TanStack Form + Zod client component with accessible markup, token-based styling, loading/error/empty states, and a Vitest test. ## Quick Start Ask the agent to build a responsive, accessible component or page in your Next.js 16 project, for example: create a login form with validation and tests following the project's shadcn and Tailwind conventions.

Frequently Asked Questions about oma-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a form with TanStack Form and Zod in Next.js?▼

Create a client component using useForm from @tanstack/react-form with zodValidator and a zod schema for field validation. Wire form.Field render props to labeled inputs with aria-invalid states, and gate submission on form state via form.Subscribe.

When should I use Server Components vs Client Components in Next.js?▼

Use Server Components for layouts, static pages, and SEO metadata like generateMetadata and sitemap. Use Client Components for interactive features, hooks, and useQuery data fetching; mark the boundary explicitly with 'use client'.

Jotai vs Zustand: which client state library should I pick?▼

Pick Jotai for atomic, fine-grained derived state that maps onto React's render graph, and Zustand for a single cohesive global store needing non-React access. Minimize client state overall: server state belongs in TanStack Query and URL state in nuqs.

Can I customize shadcn/ui components directly in components/ui?▼

No, treat components/ui/* as read-only. Create wrapper components such as components/common/ProductButton.tsx or use cva composition for variants, and never edit files like components/ui/button.tsx directly.

Why does Next.js 16 use proxy.ts instead of middleware.ts?▼

Next.js 16 renamed middleware.ts to proxy.ts as the canonical request-proxy and auth-gate file, exporting a proxy function. Config flags also changed, for example skipMiddlewareUrlNormalize became skipProxyUrlNormalize.

How do I fix hydration mismatch errors in Next.js?▼

Hydration mismatches come from server/client render differences like Date.now(), Math.random(), or browser-only APIs in render. Move client-only code into useEffect with state, or wrap third-party components with dynamic import and ssr: false.

Related Skills

Explore More Software Engineering Skills→
oVservantoVservant

ui-designer-agent

Generate DESIGN.md specifications and design tokens from wireframes.

Community
Intermediate
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced
ironkid90ironkid90

supabase

Manage Supabase database migrations, authentication, and real-time updates.

Community
Intermediate
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate