0chan-smc-frontend-dev-guidelines_skill

Overview

This skill provides concise frontend development guidelines for Next.js 15 with React 19, TypeScript, Shadcn/ui and Tailwind CSS. It focuses on modern patterns: Server vs Client Components, App Router conventions, file organization, performance, and TypeScript best practices. Use it to standardize component and page creation, data fetching, routing, and styling in a Next.js app.

How this skill works

The guide prescribes default Server Components for data fetching and smaller bundles, and Client Components only for interactivity (with a 'use client' directive). It defines file and route layouts under app/, import aliases (e.g. @/components, @/lib), and common imports. It also describes Server Actions for mutations, Shadcn/ui usage, Tailwind styling via a cn() utility, and TypeScript rules for strict typing.

When to use it

• When creating new components or pages to follow a consistent pattern
• When implementing data fetching or Server Actions in the App Router
• When setting up routing, nested routes, or dynamic routes under app/
• When styling with Tailwind and customizing Shadcn/ui components
• When optimizing performance (images, fonts, streaming, lazy loading)

Best practices

• Default to Server Components; add 'use client' only for hooks or browser APIs
• Use TypeScript strict mode, avoid any, and declare explicit prop types
• Organize code by feature: app/features/{feature}/ with components and actions
• Import shared UI from @/components/ui and utilities from @/lib using aliases
• Use next/image and next/font, lazy-load client logic and memoize in client components

Example use cases

• Create a posts list page: app/posts/page.tsx fetches data server-side and renders a PostList Server Component
• Build an interactive form: a Client Component PostForm uses react-hook-form and calls a Server Action in app/actions/
• Add a dynamic route: app/posts/[id]/page.tsx fetches a single post and calls notFound() if missing
• Add route-level UX: include loading.tsx and error.tsx in a route folder for Suspense and error boundaries
• Style reusable buttons with cn() and extend Shadcn/ui components via className