frontend-dev-guidelines

What problem does it solve?

Developers often spend valuable time researching best practices, writing boilerplate code, and debugging inconsistent patterns in modern frontend development. This skill standardizes Next.js 15+ and React 19 development, ensuring consistent, performant, and type-safe code that adheres to the latest patterns.

Core Features & Use Cases

• Standardized Next.js 15+ Development: Provides clear guidelines for App Router, Server Components, Client Components, Server Actions, and efficient data fetching with Supabase.
• UI/UX Excellence: Guides on using shadcn/ui, Tailwind CSS, React Hook Form, lazy loading, and Suspense boundaries for superior user experience and reduced layout shift.
• Performance & Type Safety: Emphasizes optimization techniques and TypeScript best practices to build robust, maintainable, and high-performing applications.
• Use Case: When building a new dashboard feature, use this skill to generate a new page following all best practices for data fetching, component structure, and styling, saving hours of setup and review.

Quick Start

Generate a new Next.js 15 dashboard page for user management, including data fetching with Supabase, a form using React Hook Form, and styled with shadcn/ui and Tailwind CSS.