Agent skill · software engineering · aiskillstore
frontend-dev-guidelines
Frontend development guidelines for Next.js + React 19 + shadcn/ui applications. Modern patterns including App Router, Server Components, Client Components, Server Actions, shadcn/ui with Tailwind CSS, React Hook Form, lazy loading, Suspense boundaries, Supabase client integration, performance optimization, and TypeScript best practices. Use when creating pages, components, forms, styling, data fetching, or working with Next.js/React code.
Why this skill is useful
Provides specific patterns and practices for Next.js and React 19 development that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
📋 OPINIONATED SCAFFOLD: Modern Next.js + React 19 + shadcn/ui stack Default Stack: - Framework: Next.js 14+ (App Router) - UI Library: React 19 - Components: shadcn/ui (Radix primitives) - Styling: Tailwind CSS - Forms: React Hook Form + Zod validation - State: React Context + TanStack Query for server state - Data Fetching: Server Components, Server Actions, TanStack Query - Language: TypeScript - Deployment: Vercel To customize: Run /customize-scaffold frontend or use the scaffold-customizer agent to adapt for Vue, Angular, Svelte, vanilla React, or other frameworks/UI libraries. Frontend Development Guidelines Purpose Modern frontend development with Next.js 14+ App Router, React 19, Server Components, and shadcn/ui. Focus on performance, type safety, and excellent UX with Supabase integration. When to Use This Skill Creating pages with App Router Building Server/Client Components Implementing Server Actions Adding shadcn/ui components Styling with Tailwind CSS Data fetching with Supabase Forms with React Hook Form + Zod Performance optimization TypeScript patterns --- Quick Start New Page Checklist [ ] Create app/[route]/page.tsx [ ] Use Server Component by default (no 'use client') [ ] Fetch data directly in component [ ] Add loading.tsx for loading state [ ] Add error.tsx for error handling [ ] Export metadata for SEO [ ] Use Tailwind for styling New Component Checklist [ ] Server Component or Client Component? [ ] Add 'use client' ONLY if using hooks/events [ ] Use shadcn/ui components [ ] Style with Tailwind classes [ ] TypeScript types for props [ ] Use cn() for conditional classes --- Core Principles 1. Server Components by Default 2. Client Components When Needed 3. Server Actions for Mutations 4. Use shadcn/ui Components 5. Tailwind CSS for Styling 6. Forms with React Hook Form 7. Supabase Integration --- Directory Structure --- Example Resource Files 📝 Note: This is a scaffold skill with instructional examples. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-dev-guidelines--94e4f2