Agent skill · software engineering · daffy0208
Frontend Builder
Build modern React/Next.js frontends. Use when creating web applications, choosing frontend stack, structuring components, or implementing UI/UX designs. Covers React, Next.js, Tailwind CSS, and component patterns.
Why this skill is useful
Provides specific patterns and best practices for building React/Next.js applications that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Frontend Builder Build maintainable, performant React and Next.js frontends. Core Principles 1. Component Composition Break UI into small, reusable, single-purpose components 2. State Proximity Keep state as close to where it's used as possible 3. Performance by Default Optimize rendering, code splitting, and asset loading 4. Developer Experience Clear naming, consistent patterns, helpful errors Framework Selection React (Vite) vs. Next.js Use React + Vite when: Client-side only application No SEO requirements Simple deployment (static hosting) Faster initial setup Use Next.js when: SEO important (marketing sites, blogs, e-commerce) Server-side rendering needed API routes required File-based routing preferred Image optimization critical Recommended for most projects: Next.js (App Router) --- Component Architecture Component Types 1. Page Components (Route entry points): 2. Feature Components (Business logic): 3. UI Components (Reusable, no business logic): Component Best Practices --- State Management Decision Tree Local State (useState) Context API Zustand (Recommended for Complex State) --- Data Fetching React Query (Recommended) Next.js Server Components (App Router) --- Form Handling React Hook Form (Recommended) --- Styling Tailwind CSS (Recommended) CSS Modules (Alternative) --- Performance Optimization React Optimization Next.js Optimization --- Error Handling Error Boundary Next.js Error Handling --- Folder Structure Next.js App Router --- TypeScript Best Practices --- Summary Great frontends: ✅ Use Next.js for most projects (SEO, performance, DX) ✅ Break UI into small, typed components ✅ Choose appropriate state management (useState → Context → Zustand) ✅ Use React Query for server state ✅ Style with Tailwind CSS + shadcn/ui ✅ Optimize with memoization and code splitting ✅ Handle errors gracefully with Error Boundaries ✅ Follow consistent folder structure --- Related Resources Related Skills: api-designer - For designing backend APIs to consume ux-designer …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/frontend-builder