app-router
Next.js App Router - Server components, layouts, routing patterns
Next.js App Router - Server components, layouts, routing patterns
Zod schema validation and React Hook Form integration for TypeScript frontends. This skill should be used when creating forms, defining API schemas, validating form data, implementing type-safe validation, using ZodResolver with React Hook Form, or migrating legacy forms to the Zod + React Hook Form pattern.
When handling form submissions, data mutations, or any action that modifies server-side data. **Version Context**: Next.js 16.0+ uses `useActionState` (replaces deprecated `useFormState`).
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
app/components の単体テストを作成・実行・修正する。React Testing Library + happy-dom を使用。
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Manage WebGL contexts and 3D scenes declaratively using React reconciliation.
Use when implementing features, handling errors, adding validation, creating forms, writing database migrations. Enforces fail-fast (NO retry logic, circuit breakers), single entry point (unified data provider, Zod at API boundary), form defaults from schema (zodSchema.partial().parse), TypeScript (interface vs type), React Admin patterns. NEW (2024-12): Zod security (z.strictObject, string .max() limits, z.coerce for forms, z.enum allowlist), form performance (onSubmit/onBlur mode, useWatch not watch). BLOCKS anti-patterns, SUGGESTS best practices.
This skill should be used when creating new routes, configuring navigation layouts, implementing deep linking, or organizing the app/ directory structure in Expo Router projects. It provides best practices for file-based routing patterns.
Provides guidelines for using shared UI components and styling. This skill should be used when implementing UI features using Shadcn/Radix components and the shared @eridu/ui package.
Apply when diagnosing slow renders, optimizing list rendering, or preventing unnecessary re-renders in React applications.
Implement or review frontend features in this repo using Next.js App Router, React Server Components by default, Tailwind, and TypeScript. Use when changing UI, components, routes, or frontend architecture under web.
Master Redux Toolkit for production state management including slices, async thunks, RTK Query, and error handling
Modern React patterns, hooks, Server/Client components, performance
CSS fundamentals - selectors, specificity, box model, positioning, units
This skill should be used when reviewing shadcn/ui component usage to ensure accessibility, consistency, and proper patterns. Applies when auditing UI code, checking component patterns, reviewing layout structure, identifying component extraction opportunities, or ensuring design system compliance. Trigger terms include audit UI, review components, check shadcn, accessibility audit, component review, UI patterns, design system compliance, layout review, refactor components, extract component.
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
Provides guidelines for using shared UI components and styling. This skill should be used when implementing UI features using Shadcn/Radix components and the shared @eridu/ui package.
App Router, React Server Components, Server Actions (2025 best practices)
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.