React Frontend

Meta-skill consolidating React and Next.js frontend expertise. Each sub-skill below is a full standalone skill with its own instructions, scripts, and references. Match the user's intent to the most specific sub-skill, then read its SKILL.md and follow its instructions completely.

Sub-Skills

frontend-design

• Description: Create distinctive, production-grade frontend interfaces with high design quality — websites, dashboards, components, landing pages
• Path: .subSkills/frontend-design/SKILL.md

next-best-practices

• Description: Next.js best practices — file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization
• Path: .subSkills/next-best-practices/SKILL.md

nextjs-app-router-patterns

• Description: Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching
• Path: .subSkills/nextjs-app-router-patterns/SKILL.md

vercel-react-best-practices

• Description: React and Next.js performance optimization guidelines from Vercel Engineering for optimal rendering and bundle size
• Path: .subSkills/vercel-react-best-practices/SKILL.md

react-state-management

• Description: Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for global and server state
• Path: .subSkills/react-state-management/SKILL.md

shadcn

• Description: Manage shadcn/ui components and projects — adding, searching, fixing, debugging, styling, and composing UI
• Path: .subSkills/shadcn/SKILL.md

Routing Instructions

1. Read the user's request carefully.
2. Match their intent against the sub-skill descriptions above.
3. Read the matched sub-skill's SKILL.md at the given path and follow its instructions completely.
4. If the intent clearly spans multiple sub-skills, start with the primary match and note the others for follow-up.
5. If no specific sub-skill matches but the request is clearly in this domain, use the default sub-skill.
6. Default sub-skill: frontend-design

Disambiguation

• "build a page" / "create a component" / "design UI" / "dashboard" -> frontend-design
• "Next.js conventions" / "file structure" / "RSC boundary" / "metadata" -> next-best-practices
• "App Router" / "Server Components" / "streaming" / "parallel routes" / "SSR" / "SSG" -> nextjs-app-router-patterns
• "performance" / "bundle size" / "Core Web Vitals" / "optimize React" -> vercel-react-best-practices
• "state management" / "Redux" / "Zustand" / "Jotai" / "React Query" / "global state" -> react-state-management
• "shadcn" / "component library" / "ui components" / "components.json" -> shadcn