Agent skill · software engineering · aiskillstore
frontend-component
Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs).
Why this skill is useful
Provides specific patterns and examples for Next.js component structure that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Frontend Component Skill Purpose: Guidance for creating Next.js components following server/client patterns and existing component structures. Overview Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs). Server vs Client Components Server Components (Default) When to Use: Pages and layouts Static content Data fetching from API (when possible) SEO-optimized content Pattern: Example: frontend/app/layout.tsx, frontend/app/page.tsx Client Components (When Needed) When to Use: Interactive elements (buttons, forms, inputs) Event handlers (onClick, onChange, etc.) React hooks (useState, useEffect, useRouter, etc.) Browser APIs (localStorage, window, document, etc.) Real-time updates Drag and drop functionality Pattern: Example: frontend/components/ProtectedRoute.tsx, frontend/app/signup/page.tsx Component Structure Template Specific Component Patterns 1. ProtectedRoute Pattern From: frontend/components/ProtectedRoute.tsx Pattern: Check authentication on mount Show loading spinner during check Store intended destination in sessionStorage Redirect to /signin if not authenticated Only render children if authorized 2. LoadingSpinner Pattern From: frontend/components/LoadingSpinner.tsx Pattern: Multiple sizes (small, medium, large) Multiple colors (blue, gray, white) Accessibility labels (role="status", aria-label, aria-live) Screen reader text with sr-only class 3. Form Handling Pattern From: frontend/app/signup/page.tsx Pattern: Separate state for form data, errors, loading, API errors Validation function that returns boolean Clear errors on input change Loading state during submission Try-catch for error handling Redirect on success 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-component