From f88b611d61c5d6a68f4e791c3e7f07d3b0420b16 Mon Sep 17 00:00:00 2001 From: Aras <72440556+itsmeares@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:40:27 +0000 Subject: [PATCH] feat: add senior-frontend and shadcn skills (#233) * feat: add senior-frontend and shadcn skills with proper indexing * chore: update star history chart --------- Co-authored-by: github-actions[bot] Co-authored-by: sck_0 --- data/aliases.json | 42 +- data/bundles.json | 19 +- skills/senior-frontend/SKILL.md | 491 ++++++++ .../references/frontend_best_practices.md | 806 +++++++++++++ .../references/nextjs_optimization_guide.md | 724 ++++++++++++ .../references/react_patterns.md | 746 ++++++++++++ .../scripts/bundle_analyzer.py | 407 +++++++ .../scripts/component_generator.py | 329 ++++++ .../scripts/frontend_scaffolder.py | 1005 +++++++++++++++++ skills/shadcn/SKILL.md | 250 ++++ skills/shadcn/agents/openai.yml | 5 + skills/shadcn/assets/shadcn-small.png | Bin 0 -> 1049 bytes skills/shadcn/assets/shadcn.png | Bin 0 -> 3852 bytes skills/shadcn/cli.md | 255 +++++ skills/shadcn/customization.md | 202 ++++ skills/shadcn/evals/evals.json | 47 + skills/shadcn/mcp.md | 94 ++ skills/shadcn/rules/base-vs-radix.md | 306 +++++ skills/shadcn/rules/composition.md | 195 ++++ skills/shadcn/rules/forms.md | 192 ++++ skills/shadcn/rules/icons.md | 101 ++ skills/shadcn/rules/styling.md | 162 +++ skills_index.json | 20 + 23 files changed, 6368 insertions(+), 30 deletions(-) create mode 100644 skills/senior-frontend/SKILL.md create mode 100644 skills/senior-frontend/references/frontend_best_practices.md create mode 100644 skills/senior-frontend/references/nextjs_optimization_guide.md create mode 100644 skills/senior-frontend/references/react_patterns.md create mode 100644 skills/senior-frontend/scripts/bundle_analyzer.py create mode 100644 skills/senior-frontend/scripts/component_generator.py create mode 100644 skills/senior-frontend/scripts/frontend_scaffolder.py create mode 100644 skills/shadcn/SKILL.md create mode 100644 skills/shadcn/agents/openai.yml create mode 100644 skills/shadcn/assets/shadcn-small.png create mode 100644 skills/shadcn/assets/shadcn.png create mode 100644 skills/shadcn/cli.md create mode 100644 skills/shadcn/customization.md create mode 100644 skills/shadcn/evals/evals.json create mode 100644 skills/shadcn/mcp.md create mode 100644 skills/shadcn/rules/base-vs-radix.md create mode 100644 skills/shadcn/rules/composition.md create mode 100644 skills/shadcn/rules/forms.md create mode 100644 skills/shadcn/rules/icons.md create mode 100644 skills/shadcn/rules/styling.md diff --git a/data/aliases.json b/data/aliases.json index 2024bb6f..f643a970 100644 --- a/data/aliases.json +++ b/data/aliases.json @@ -8,7 +8,7 @@ "android-jetpack-expert": "android-jetpack-compose-expert", "api-testing-mock": "api-testing-observability-api-mock", "apify-brand-monitoring": "apify-brand-reputation-monitoring", - "templates": "app-builder/templates", + "templates": "app-builder\\templates", "application-performance-optimization": "application-performance-performance-optimization", "ask-questions-underspecified": "ask-questions-if-underspecified", "azure-ai-dotnet": "azure-ai-agents-persistent-dotnet", @@ -69,25 +69,25 @@ "frontend-mobile-scaffold": "frontend-mobile-development-component-scaffold", "frontend-mobile-scan": "frontend-mobile-security-xss-scan", "full-stack-feature": "full-stack-orchestration-full-stack-feature", - "2d-games": "game-development/2d-games", - "3d-games": "game-development/3d-games", - "game-art": "game-development/game-art", - "game-audio": "game-development/game-audio", - "game-design": "game-development/game-design", - "mobile-games": "game-development/mobile-games", - "multiplayer": "game-development/multiplayer", - "pc-games": "game-development/pc-games", - "vr-ar": "game-development/vr-ar", - "web-games": "game-development/web-games", + "2d-games": "game-development\\2d-games", + "3d-games": "game-development\\3d-games", + "game-art": "game-development\\game-art", + "game-audio": "game-development\\game-audio", + "game-design": "game-development\\game-design", + "mobile-games": "game-development\\mobile-games", + "multiplayer": "game-development\\multiplayer", + "pc-games": "game-development\\pc-games", + "vr-ar": "game-development\\vr-ar", + "web-games": "game-development\\web-games", "git-pr-workflow": "git-pr-workflows-git-workflow", "hugging-face-publisher": "hugging-face-paper-publisher", "incident-response": "incident-response-incident-response", "javascript-typescript-scaffold": "javascript-typescript-typescript-scaffold", - "base": "libreoffice/base", - "calc": "libreoffice/calc", - "draw": "libreoffice/draw", - "impress": "libreoffice/impress", - "writer": "libreoffice/writer", + "base": "libreoffice\\base", + "calc": "libreoffice\\calc", + "draw": "libreoffice\\draw", + "impress": "libreoffice\\impress", + "writer": "libreoffice\\writer", "llm-application-assistant": "llm-application-dev-ai-assistant", "llm-application-agent": "llm-application-dev-langchain-agent", "llm-application-optimize": "llm-application-dev-prompt-optimize", @@ -106,11 +106,11 @@ "security-scanning-dependencies": "security-scanning-security-dependencies", "security-scanning-hardening": "security-scanning-security-hardening", "security-scanning-sast": "security-scanning-security-sast", - "aws-compliance-checker": "security/aws-compliance-checker", - "aws-iam-best-practices": "security/aws-iam-best-practices", - "security/aws-iam-practices": "security/aws-iam-best-practices", - "aws-secrets-rotation": "security/aws-secrets-rotation", - "aws-security-audit": "security/aws-security-audit", + "aws-compliance-checker": "security\\aws-compliance-checker", + "aws-iam-best-practices": "security\\aws-iam-best-practices", + "security\\aws-iam-practices": "security\\aws-iam-best-practices", + "aws-secrets-rotation": "security\\aws-secrets-rotation", + "aws-security-audit": "security\\aws-security-audit", "seo-forensic-response": "seo-forensic-incident-response", "startup-business-case": "startup-business-analyst-business-case", "startup-business-projections": "startup-business-analyst-financial-projections", diff --git a/data/bundles.json b/data/bundles.json index 175b116e..61899ad7 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -183,7 +183,7 @@ "frontend-security-coder", "frontend-slides", "frontend-ui-dark-ts", - "game-development/mobile-games", + "game-development\\mobile-games", "gemini-api-dev", "gemini-api-integration", "go-concurrency-patterns", @@ -268,8 +268,9 @@ "rust-security-auditor", "scikit-learn", "security-audit", - "security/aws-secrets-rotation", + "security\\aws-secrets-rotation", "senior-architect", + "senior-frontend", "senior-fullstack", "shopify-apps", "shopify-development", @@ -414,10 +415,10 @@ "security-scanning-security-hardening", "security-scanning-security-sast", "security-skill-creator", - "security/aws-compliance-checker", - "security/aws-iam-best-practices", - "security/aws-secrets-rotation", - "security/aws-security-audit", + "security\\aws-compliance-checker", + "security\\aws-iam-best-practices", + "security\\aws-secrets-rotation", + "security\\aws-security-audit", "semgrep-rule-creator", "service-mesh-expert", "skill-scanner", @@ -570,8 +571,8 @@ "ios-developer", "kpi-dashboard-design", "legal-advisor", - "libreoffice/base", - "libreoffice/calc", + "libreoffice\\base", + "libreoffice\\calc", "loki-mode", "mailchimp-automation", "ml-pipeline-workflow", @@ -669,7 +670,7 @@ "expo-cicd-workflows", "expo-deployment", "flutter-expert", - "game-development/game-art", + "game-development\\game-art", "git-pr-workflows-git-workflow", "gitlab-ci-patterns", "gitops-workflow", diff --git a/skills/senior-frontend/SKILL.md b/skills/senior-frontend/SKILL.md new file mode 100644 index 00000000..e4dff890 --- /dev/null +++ b/skills/senior-frontend/SKILL.md @@ -0,0 +1,491 @@ +--- +name: senior-frontend +description: Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality. +risk: safe +source: https://github.com/alirezarezvani/claude-skills +date_added: "2026-03-07" +--- + +# Senior Frontend + +Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. + +## When to Use + +- Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS. +- Use when generating new components or custom hooks. +- Use when analyzing and optimizing bundle sizes for frontend applications. +- Use to implement or review advanced React patterns like Compound Components or Render Props. +- Use to ensure accessibility compliance and implement robust testing strategies. + +## Table of Contents + +- [Project Scaffolding](#project-scaffolding) +- [Component Generation](#component-generation) +- [Bundle Analysis](#bundle-analysis) +- [React Patterns](#react-patterns) +- [Next.js Optimization](#nextjs-optimization) +- [Accessibility and Testing](#accessibility-and-testing) + +--- + +## Project Scaffolding + +Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. + +### Workflow: Create New Frontend Project + +1. Run the scaffolder with your project name and template: + + ```bash + python scripts/frontend_scaffolder.py my-app --template nextjs + ``` + +2. Add optional features (auth, api, forms, testing, storybook): + + ```bash + python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api + ``` + +3. Navigate to the project and install dependencies: + + ```bash + cd my-app && npm install + ``` + +4. Start the development server: + ```bash + npm run dev + ``` + +### Scaffolder Options + +| Option | Description | +| -------------------- | ------------------------------------------------- | +| `--template nextjs` | Next.js 14+ with App Router and Server Components | +| `--template react` | React + Vite with TypeScript | +| `--features auth` | Add NextAuth.js authentication | +| `--features api` | Add React Query + API client | +| `--features forms` | Add React Hook Form + Zod validation | +| `--features testing` | Add Vitest + Testing Library | +| `--dry-run` | Preview files without creating them | + +### Generated Structure (Next.js) + +``` +my-app/ +├── app/ +│ ├── layout.tsx # Root layout with fonts +│ ├── page.tsx # Home page +│ ├── globals.css # Tailwind + CSS variables +│ └── api/health/route.ts +├── components/ +│ ├── ui/ # Button, Input, Card +│ └── layout/ # Header, Footer, Sidebar +├── hooks/ # useDebounce, useLocalStorage +├── lib/ # utils (cn), constants +├── types/ # TypeScript interfaces +├── tailwind.config.ts +├── next.config.js +└── package.json +``` + +--- + +## Component Generation + +Generate React components with TypeScript, tests, and Storybook stories. + +### Workflow: Create a New Component + +1. Generate a client component: + + ```bash + python scripts/component_generator.py Button --dir src/components/ui + ``` + +2. Generate a server component: + + ```bash + python scripts/component_generator.py ProductCard --type server + ``` + +3. Generate with test and story files: + + ```bash + python scripts/component_generator.py UserProfile --with-test --with-story + ``` + +4. Generate a custom hook: + ```bash + python scripts/component_generator.py FormValidation --type hook + ``` + +### Generator Options + +| Option | Description | +| --------------- | -------------------------------------------- | +| `--type client` | Client component with 'use client' (default) | +| `--type server` | Async server component | +| `--type hook` | Custom React hook | +| `--with-test` | Include test file | +| `--with-story` | Include Storybook story | +| `--flat` | Create in output dir without subdirectory | +| `--dry-run` | Preview without creating files | + +### Generated Component Example + +```tsx +"use client"; + +import { useState } from "react"; +import { cn } from "@/lib/utils"; + +interface ButtonProps { + className?: string; + children?: React.ReactNode; +} + +export function Button({ className, children }: ButtonProps) { + return
{children}
; +} +``` + +--- + +## Bundle Analysis + +Analyze package.json and project structure for bundle optimization opportunities. + +### Workflow: Optimize Bundle Size + +1. Run the analyzer on your project: + + ```bash + python scripts/bundle_analyzer.py /path/to/project + ``` + +2. Review the health score and issues: + + ``` + Bundle Health Score: 75/100 (C) + + HEAVY DEPENDENCIES: + moment (290KB) + Alternative: date-fns (12KB) or dayjs (2KB) + + lodash (71KB) + Alternative: lodash-es with tree-shaking + ``` + +3. Apply the recommended fixes by replacing heavy dependencies. + +4. Re-run with verbose mode to check import patterns: + ```bash + python scripts/bundle_analyzer.py . --verbose + ``` + +### Bundle Score Interpretation + +| Score | Grade | Action | +| ------ | ----- | ------------------------------ | +| 90-100 | A | Bundle is well-optimized | +| 80-89 | B | Minor optimizations available | +| 70-79 | C | Replace heavy dependencies | +| 60-69 | D | Multiple issues need attention | +| 0-59 | F | Critical bundle size problems | + +### Heavy Dependencies Detected + +The analyzer identifies these common heavy packages: + +| Package | Size | Alternative | +| ------------- | ----- | ------------------------------ | +| moment | 290KB | date-fns (12KB) or dayjs (2KB) | +| lodash | 71KB | lodash-es with tree-shaking | +| axios | 14KB | Native fetch or ky (3KB) | +| jquery | 87KB | Native DOM APIs | +| @mui/material | Large | shadcn/ui or Radix UI | + +--- + +## React Patterns + +Reference: `references/react_patterns.md` + +### Compound Components + +Share state between related components: + +```tsx +const Tabs = ({ children }) => { + const [active, setActive] = useState(0); + return ( + + {children} + + ); +}; + +Tabs.List = TabList; +Tabs.Panel = TabPanel; + +// Usage + + + One + Two + + Content 1 + Content 2 +; +``` + +### Custom Hooks + +Extract reusable logic: + +```tsx +function useDebounce(value: T, delay = 500): T { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const timer = setTimeout(() => setDebouncedValue(value), delay); + return () => clearTimeout(timer); + }, [value, delay]); + + return debouncedValue; +} + +// Usage +const debouncedSearch = useDebounce(searchTerm, 300); +``` + +### Render Props + +Share rendering logic: + +```tsx +function DataFetcher({ url, render }) { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch(url) + .then((r) => r.json()) + .then(setData) + .finally(() => setLoading(false)); + }, [url]); + + return render({ data, loading }); +} + +// Usage + + loading ? : + } +/>; +``` + +--- + +## Next.js Optimization + +Reference: `references/nextjs_optimization_guide.md` + +### Server vs Client Components + +Use Server Components by default. Add 'use client' only when you need: + +- Event handlers (onClick, onChange) +- State (useState, useReducer) +- Effects (useEffect) +- Browser APIs + +```tsx +// Server Component (default) - no 'use client' +async function ProductPage({ params }) { + const product = await getProduct(params.id); // Server-side fetch + + return ( +
+

{product.name}

+ {/* Client component */} +
+ ); +} + +// Client Component +("use client"); +function AddToCartButton({ productId }) { + const [adding, setAdding] = useState(false); + return ; +} +``` + +### Image Optimization + +```tsx +import Image from 'next/image'; + +// Above the fold - load immediately +Hero + +// Responsive image with fill +
+ Product +
+``` + +### Data Fetching Patterns + +```tsx +// Parallel fetching +async function Dashboard() { + const [user, stats] = await Promise.all([getUser(), getStats()]); + return
...
; +} + +// Streaming with Suspense +async function ProductPage({ params }) { + return ( +
+ + }> + + +
+ ); +} +``` + +--- + +## Accessibility and Testing + +Reference: `references/frontend_best_practices.md` + +### Accessibility Checklist + +1. **Semantic HTML**: Use proper elements (` + +// Skip link for keyboard users + + Skip to main content + +``` + +### Testing Strategy + +```tsx +// Component test with React Testing Library +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +test("button triggers action on click", async () => { + const onClick = vi.fn(); + render(); + + await userEvent.click(screen.getByRole("button")); + expect(onClick).toHaveBeenCalledTimes(1); +}); + +// Test accessibility +test("dialog is accessible", async () => { + render(); + + expect(screen.getByRole("dialog")).toBeInTheDocument(); + expect(screen.getByRole("dialog")).toHaveAttribute("aria-labelledby"); +}); +``` + +--- + +## Quick Reference + +### Common Next.js Config + +```js +// next.config.js +const nextConfig = { + images: { + remotePatterns: [{ hostname: "cdn.example.com" }], + formats: ["image/avif", "image/webp"], + }, + experimental: { + optimizePackageImports: ["lucide-react", "@heroicons/react"], + }, +}; +``` + +### Tailwind CSS Utilities + +```tsx +// Conditional classes with cn() +import { cn } from "@/lib/utils"; + + +
...
+ +
...
+
...
+ +
...
+``` + +### Keyboard Navigation + +```tsx +// Ensure all interactive elements are keyboard accessible +function Modal({ isOpen, onClose, children }: ModalProps) { + const modalRef = useRef(null); + + useEffect(() => { + if (isOpen) { + // Focus first focusable element + const focusable = modalRef.current?.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' + ); + (focusable?.[0] as HTMLElement)?.focus(); + + // Trap focus within modal + const handleTab = (e: KeyboardEvent) => { + if (e.key === 'Tab' && focusable) { + const first = focusable[0] as HTMLElement; + const last = focusable[focusable.length - 1] as HTMLElement; + + if (e.shiftKey && document.activeElement === first) { + e.preventDefault(); + last.focus(); + } else if (!e.shiftKey && document.activeElement === last) { + e.preventDefault(); + first.focus(); + } + } + + if (e.key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('keydown', handleTab); + return () => document.removeEventListener('keydown', handleTab); + } + }, [isOpen, onClose]); + + if (!isOpen) return null; + + return ( +
+ {children} +
+ ); +} +``` + +### ARIA Attributes + +```tsx +// Live regions for dynamic content +
+ {status &&

{status}

} +
+ +// Loading states + + +// Form labels + + +{errors.email && ( + +)} + +// Navigation + + +// Toggle buttons + + +// Expandable sections + + +``` + +### Color Contrast + +```tsx +// Ensure 4.5:1 contrast ratio for text (WCAG AA) +// Use tools like @axe-core/react for testing + +// tailwind.config.js - Define accessible colors +module.exports = { + theme: { + colors: { + // Primary with proper contrast + primary: { + DEFAULT: '#2563eb', // Blue 600 + foreground: '#ffffff', + }, + // Error state + error: { + DEFAULT: '#dc2626', // Red 600 + foreground: '#ffffff', + }, + // Text colors with proper contrast + foreground: '#0f172a', // Slate 900 + muted: '#64748b', // Slate 500 - minimum 4.5:1 on white + }, + }, +}; + +// Never rely on color alone + + +``` + +### Screen Reader Only Content + +```tsx +// Visually hidden but accessible to screen readers +const srOnly = 'absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0'; + +// Skip link for keyboard users + + Skip to main content + + +// Icon buttons need labels + + +// Or use visually hidden text + +``` + +--- + +## Testing Strategies + +### Component Testing with Testing Library + +```tsx +// Button.test.tsx +import { render, screen, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { Button } from './Button'; + +describe('Button', () => { + it('renders with correct text', () => { + render(); + expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument(); + }); + + it('calls onClick when clicked', async () => { + const user = userEvent.setup(); + const handleClick = jest.fn(); + + render(); + await user.click(screen.getByRole('button')); + + expect(handleClick).toHaveBeenCalledTimes(1); + }); + + it('is disabled when loading', () => { + render(); + expect(screen.getByRole('button')).toBeDisabled(); + expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true'); + }); + + it('shows loading text when loading', () => { + render(); + expect(screen.getByText('Submitting...')).toBeInTheDocument(); + }); +}); +``` + +### Hook Testing + +```tsx +// useCounter.test.ts +import { renderHook, act } from '@testing-library/react'; +import { useCounter } from './useCounter'; + +describe('useCounter', () => { + it('initializes with default value', () => { + const { result } = renderHook(() => useCounter()); + expect(result.current.count).toBe(0); + }); + + it('initializes with custom value', () => { + const { result } = renderHook(() => useCounter(10)); + expect(result.current.count).toBe(10); + }); + + it('increments count', () => { + const { result } = renderHook(() => useCounter()); + + act(() => { + result.current.increment(); + }); + + expect(result.current.count).toBe(1); + }); + + it('resets to initial value', () => { + const { result } = renderHook(() => useCounter(5)); + + act(() => { + result.current.increment(); + result.current.increment(); + result.current.reset(); + }); + + expect(result.current.count).toBe(5); + }); +}); +``` + +### Integration Testing + +```tsx +// LoginForm.test.tsx +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { LoginForm } from './LoginForm'; +import { AuthProvider } from '@/contexts/AuthContext'; + +const mockLogin = jest.fn(); + +jest.mock('@/lib/auth', () => ({ + login: (...args: unknown[]) => mockLogin(...args), +})); + +describe('LoginForm', () => { + beforeEach(() => { + mockLogin.mockReset(); + }); + + it('submits form with valid credentials', async () => { + const user = userEvent.setup(); + mockLogin.mockResolvedValueOnce({ user: { id: '1', name: 'Test' } }); + + render( + + + + ); + + await user.type(screen.getByLabelText(/email/i), 'test@example.com'); + await user.type(screen.getByLabelText(/password/i), 'password123'); + await user.click(screen.getByRole('button', { name: /sign in/i })); + + await waitFor(() => { + expect(mockLogin).toHaveBeenCalledWith('test@example.com', 'password123'); + }); + }); + + it('shows validation errors for empty fields', async () => { + const user = userEvent.setup(); + + render( + + + + ); + + await user.click(screen.getByRole('button', { name: /sign in/i })); + + expect(await screen.findByText(/email is required/i)).toBeInTheDocument(); + expect(await screen.findByText(/password is required/i)).toBeInTheDocument(); + expect(mockLogin).not.toHaveBeenCalled(); + }); +}); +``` + +### E2E Testing with Playwright + +```typescript +// e2e/checkout.spec.ts +import { test, expect } from '@playwright/test'; + +test.describe('Checkout flow', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + await page.click('[data-testid="product-1"] button'); + await page.click('[data-testid="cart-button"]'); + }); + + test('completes checkout with valid payment', async ({ page }) => { + await page.click('text=Proceed to Checkout'); + + // Fill shipping info + await page.fill('[name="email"]', 'test@example.com'); + await page.fill('[name="address"]', '123 Test St'); + await page.fill('[name="city"]', 'Test City'); + await page.selectOption('[name="state"]', 'CA'); + await page.fill('[name="zip"]', '90210'); + + await page.click('text=Continue to Payment'); + await page.click('text=Place Order'); + + // Verify success + await expect(page).toHaveURL(/\/order\/confirmation/); + await expect(page.locator('h1')).toHaveText('Order Confirmed!'); + }); +}); +``` + +--- + +## TypeScript Patterns + +### Component Props + +```tsx +// Use interface for component props +interface ButtonProps { + variant?: 'primary' | 'secondary' | 'ghost'; + size?: 'sm' | 'md' | 'lg'; + isLoading?: boolean; + children: React.ReactNode; + onClick?: () => void; +} + +// Extend HTML attributes +interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: 'primary' | 'secondary'; + isLoading?: boolean; +} + +function Button({ variant = 'primary', isLoading, children, ...props }: ButtonProps) { + return ( + + ); +} + +// Polymorphic components +type PolymorphicProps = { + as?: E; +} & React.ComponentPropsWithoutRef; + +function Box({ + as, + children, + ...props +}: PolymorphicProps) { + const Component = as || 'div'; + return {children}; +} + +// Usage +Content +Article content +``` + +### Discriminated Unions + +```tsx +// State machines with exhaustive type checking +type AsyncState = + | { status: 'idle' } + | { status: 'loading' } + | { status: 'success'; data: T } + | { status: 'error'; error: Error }; + +function DataDisplay({ state, render }: { + state: AsyncState; + render: (data: T) => React.ReactNode; +}) { + switch (state.status) { + case 'idle': + return null; + case 'loading': + return ; + case 'success': + return <>{render(state.data)}; + case 'error': + return ; + // TypeScript ensures all cases are handled + } +} +``` + +### Generic Components + +```tsx +// Generic list component +interface ListProps { + items: T[]; + renderItem: (item: T, index: number) => React.ReactNode; + keyExtractor: (item: T) => string; + emptyMessage?: string; +} + +function List({ items, renderItem, keyExtractor, emptyMessage }: ListProps) { + if (items.length === 0) { + return

{emptyMessage || 'No items'}

; + } + + return ( +
    + {items.map((item, index) => ( +
  • {renderItem(item, index)}
    • + ))} +
+ ); +} + +// Usage + user.id} + renderItem={(user) => } +/> +``` + +### Type Guards + +```tsx +// User-defined type guards +interface User { + id: string; + name: string; + email: string; +} + +interface Admin extends User { + role: 'admin'; + permissions: string[]; +} + +function isAdmin(user: User): user is Admin { + return 'role' in user && user.role === 'admin'; +} + +function UserBadge({ user }: { user: User }) { + if (isAdmin(user)) { + // TypeScript knows user is Admin here + return Admin ({user.permissions.length} perms); + } + + return User; +} + +// API response type guards +interface ApiSuccess { + success: true; + data: T; +} + +interface ApiError { + success: false; + error: string; +} + +type ApiResponse = ApiSuccess | ApiError; + +function isApiSuccess(response: ApiResponse): response is ApiSuccess { + return response.success === true; +} +``` + +--- + +## Tailwind CSS + +### Component Variants with CVA + +```tsx +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/utils'; + +const buttonVariants = cva( + // Base styles + 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + { + variants: { + variant: { + primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500', + secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500', + ghost: 'hover:bg-gray-100 hover:text-gray-900', + destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500', + }, + size: { + sm: 'h-8 px-3 text-sm', + md: 'h-10 px-4 text-sm', + lg: 'h-12 px-6 text-base', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'primary', + size: 'md', + }, + } +); + +interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps {} + +function Button({ className, variant, size, ...props }: ButtonProps) { + return ( + + +``` + +### Responsive Design + +```tsx +// Mobile-first responsive design +
+ {products.map(product => )} +
+ +// Container with responsive padding +
+ Content +
+ +// Hide/show based on breakpoint + + +``` + +### Animation Utilities + +```tsx +// Skeleton loading +
+
+
+
+ +// Transitions + + +// Custom animations in tailwind.config.js +module.exports = { + theme: { + extend: { + animation: { + 'fade-in': 'fadeIn 0.3s ease-out', + 'slide-up': 'slideUp 0.3s ease-out', + 'spin-slow': 'spin 3s linear infinite', + }, + keyframes: { + fadeIn: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + slideUp: { + '0%': { transform: 'translateY(10px)', opacity: '0' }, + '100%': { transform: 'translateY(0)', opacity: '1' }, + }, + }, + }, + }, +}; + +// Usage +
Fading in
+``` + +--- + +## Project Structure + +### Feature-Based Structure + +``` +src/ +├── app/ # Next.js App Router +│ ├── (auth)/ # Auth route group +│ │ ├── login/ +│ │ └── register/ +│ ├── dashboard/ +│ │ ├── page.tsx +│ │ └── layout.tsx +│ └── layout.tsx +├── components/ +│ ├── ui/ # Shared UI components +│ │ ├── Button.tsx +│ │ ├── Input.tsx +│ │ └── index.ts +│ └── features/ # Feature-specific components +│ ├── auth/ +│ │ ├── LoginForm.tsx +│ │ └── RegisterForm.tsx +│ └── dashboard/ +│ ├── StatsCard.tsx +│ └── RecentActivity.tsx +├── hooks/ # Custom React hooks +│ ├── useAuth.ts +│ ├── useDebounce.ts +│ └── useLocalStorage.ts +├── lib/ # Utilities and configs +│ ├── utils.ts +│ ├── api.ts +│ └── constants.ts +├── types/ # TypeScript types +│ ├── user.ts +│ └── api.ts +└── styles/ + └── globals.css +``` + +### Barrel Exports + +```tsx +// components/ui/index.ts +export { Button } from './Button'; +export { Input } from './Input'; +export { Card, CardHeader, CardContent, CardFooter } from './Card'; +export { Dialog, DialogTrigger, DialogContent } from './Dialog'; + +// Usage +import { Button, Input, Card } from '@/components/ui'; +``` + +--- + +## Security + +### XSS Prevention + +React escapes content by default, which prevents most XSS attacks. When you need to render HTML content: + +1. **Avoid rendering raw HTML** when possible +2. **Sanitize with DOMPurify** for trusted content sources +3. **Use allow-lists** for permitted tags and attributes + +```tsx +// React escapes by default - this is safe +
{userInput}
+ +// When you must render HTML, sanitize first +import DOMPurify from 'dompurify'; + +function SafeHTML({ html }: { html: string }) { + const sanitized = DOMPurify.sanitize(html, { + ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p'], + ALLOWED_ATTR: ['href'], + }); + + return
; +} +``` + +### Input Validation + +```tsx +import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; + +const schema = z.object({ + email: z.string().email('Invalid email address'), + password: z.string() + .min(8, 'Password must be at least 8 characters') + .regex(/[A-Z]/, 'Password must contain uppercase letter') + .regex(/[0-9]/, 'Password must contain number'), + confirmPassword: z.string(), +}).refine((data) => data.password === data.confirmPassword, { + message: 'Passwords do not match', + path: ['confirmPassword'], +}); + +type FormData = z.infer; + +function RegisterForm() { + const { register, handleSubmit, formState: { errors } } = useForm({ + resolver: zodResolver(schema), + }); + + return ( +
+ + + + +
+ ); +} +``` + +### Secure API Calls + +```tsx +// Use environment variables for API endpoints +const API_URL = process.env.NEXT_PUBLIC_API_URL; + +// Never include secrets in client code - use server-side API routes +// app/api/data/route.ts +export async function GET() { + const response = await fetch('https://api.example.com/data', { + headers: { + 'Authorization': `Bearer ${process.env.API_SECRET}`, // Server-side only + }, + }); + + return Response.json(await response.json()); +} +``` diff --git a/skills/senior-frontend/references/nextjs_optimization_guide.md b/skills/senior-frontend/references/nextjs_optimization_guide.md new file mode 100644 index 00000000..d1157a36 --- /dev/null +++ b/skills/senior-frontend/references/nextjs_optimization_guide.md @@ -0,0 +1,724 @@ +# Next.js Optimization Guide + +Performance optimization techniques for Next.js 14+ applications. + +--- + +## Table of Contents + +- [Rendering Strategies](#rendering-strategies) +- [Image Optimization](#image-optimization) +- [Code Splitting](#code-splitting) +- [Data Fetching](#data-fetching) +- [Caching Strategies](#caching-strategies) +- [Bundle Optimization](#bundle-optimization) +- [Core Web Vitals](#core-web-vitals) + +--- + +## Rendering Strategies + +### Server Components (Default) + +Server Components render on the server and send HTML to the client. Use for data-heavy, non-interactive content. + +```tsx +// app/products/page.tsx - Server Component (default) +async function ProductsPage() { + // This runs on the server - no client bundle impact + const products = await db.products.findMany(); + + return ( +
+ {products.map(product => ( + + ))} +
+ ); +} +``` + +### Client Components + +Use `'use client'` only when you need: +- Event handlers (onClick, onChange) +- State (useState, useReducer) +- Effects (useEffect) +- Browser APIs (window, document) + +```tsx +'use client'; + +import { useState } from 'react'; + +function AddToCartButton({ productId }: { productId: string }) { + const [isAdding, setIsAdding] = useState(false); + + async function handleClick() { + setIsAdding(true); + await addToCart(productId); + setIsAdding(false); + } + + return ( + + ); +} +``` + +### Mixing Server and Client Components + +```tsx +// app/products/[id]/page.tsx - Server Component +async function ProductPage({ params }: { params: { id: string } }) { + const product = await getProduct(params.id); + + return ( +
+ {/* Server-rendered content */} +

{product.name}

+

{product.description}

+ + {/* Client component for interactivity */} + + + {/* Server component for reviews */} + +
+ ); +} +``` + +### Static vs Dynamic Rendering + +```tsx +// Force static generation at build time +export const dynamic = 'force-static'; + +// Force dynamic rendering at request time +export const dynamic = 'force-dynamic'; + +// Revalidate every 60 seconds (ISR) +export const revalidate = 60; + +// Revalidate on-demand +import { revalidatePath, revalidateTag } from 'next/cache'; + +async function updateProduct(id: string, data: ProductData) { + await db.products.update({ where: { id }, data }); + + // Revalidate specific path + revalidatePath(`/products/${id}`); + + // Or revalidate by tag + revalidateTag('products'); +} +``` + +--- + +## Image Optimization + +### Next.js Image Component + +```tsx +import Image from 'next/image'; + +// Basic optimized image +Hero image + +// Responsive image +Product + +// With placeholder blur +import productImage from '@/public/product.jpg'; + +Product +``` + +### Remote Images Configuration + +```js +// next.config.js +module.exports = { + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'cdn.example.com', + pathname: '/images/**', + }, + { + protocol: 'https', + hostname: '*.cloudinary.com', + }, + ], + // Image formats (webp is default) + formats: ['image/avif', 'image/webp'], + // Device sizes for srcset + deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], + // Image sizes for srcset + imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], + }, +}; +``` + +### Lazy Loading Patterns + +```tsx +// Images below the fold - lazy load (default) +Gallery photo + +// Above the fold - load immediately +Hero +``` + +--- + +## Code Splitting + +### Dynamic Imports + +```tsx +import dynamic from 'next/dynamic'; + +// Basic dynamic import +const HeavyChart = dynamic(() => import('@/components/HeavyChart'), { + loading: () => , +}); + +// Disable SSR for client-only components +const MapComponent = dynamic(() => import('@/components/Map'), { + ssr: false, + loading: () =>
, +}); + +// Named exports +const Modal = dynamic(() => + import('@/components/ui').then(mod => mod.Modal) +); + +// With suspense +const DashboardCharts = dynamic(() => import('@/components/DashboardCharts'), { + loading: () => } />, +}); +``` + +### Route-Based Splitting + +```tsx +// app/dashboard/analytics/page.tsx +// This page only loads when /dashboard/analytics is visited +import { Suspense } from 'react'; +import AnalyticsCharts from './AnalyticsCharts'; + +export default function AnalyticsPage() { + return ( + }> + + + ); +} +``` + +### Parallel Routes for Code Splitting + +``` +app/ +├── dashboard/ +│ ├── @analytics/ +│ │ └── page.tsx # Loaded in parallel +│ ├── @metrics/ +│ │ └── page.tsx # Loaded in parallel +│ ├── layout.tsx +│ └── page.tsx +``` + +```tsx +// app/dashboard/layout.tsx +export default function DashboardLayout({ + children, + analytics, + metrics, +}: { + children: React.ReactNode; + analytics: React.ReactNode; + metrics: React.ReactNode; +}) { + return ( +
+ {children} + }>{analytics} + }>{metrics} +
+ ); +} +``` + +--- + +## Data Fetching + +### Server-Side Data Fetching + +```tsx +// Parallel data fetching +async function Dashboard() { + // Start both requests simultaneously + const [user, stats, notifications] = await Promise.all([ + getUser(), + getStats(), + getNotifications(), + ]); + + return ( +
+ + + +
+ ); +} +``` + +### Streaming with Suspense + +```tsx +import { Suspense } from 'react'; + +async function ProductPage({ params }: { params: { id: string } }) { + const product = await getProduct(params.id); + + return ( +
+ {/* Immediate content */} +

{product.name}

+

{product.description}

+ + {/* Stream reviews - don't block page */} + }> + + + + {/* Stream recommendations */} + }> + + +
+ ); +} + +// Slow data component +async function Reviews({ productId }: { productId: string }) { + const reviews = await getReviews(productId); // Slow query + return ; +} +``` + +### Request Memoization + +```tsx +// Next.js automatically dedupes identical requests +async function Layout({ children }) { + const user = await getUser(); // Request 1 + return
{children}
; +} + +async function Header() { + const user = await getUser(); // Same request - cached! + return
Hello, {user.name}
; +} + +// Both components call getUser() but only one request is made +``` + +--- + +## Caching Strategies + +### Fetch Cache Options + +```tsx +// Cache indefinitely (default for static) +fetch('https://api.example.com/data'); + +// No cache - always fresh +fetch('https://api.example.com/data', { cache: 'no-store' }); + +// Revalidate after time +fetch('https://api.example.com/data', { + next: { revalidate: 3600 } // 1 hour +}); + +// Tag-based revalidation +fetch('https://api.example.com/products', { + next: { tags: ['products'] } +}); + +// Later, revalidate by tag +import { revalidateTag } from 'next/cache'; +revalidateTag('products'); +``` + +### Route Segment Config + +```tsx +// app/products/page.tsx + +// Revalidate every hour +export const revalidate = 3600; + +// Or force dynamic +export const dynamic = 'force-dynamic'; + +// Generate static params at build +export async function generateStaticParams() { + const products = await getProducts(); + return products.map(p => ({ id: p.id })); +} +``` + +### unstable_cache for Custom Caching + +```tsx +import { unstable_cache } from 'next/cache'; + +const getCachedUser = unstable_cache( + async (userId: string) => { + const user = await db.users.findUnique({ where: { id: userId } }); + return user; + }, + ['user-cache'], + { + revalidate: 3600, // 1 hour + tags: ['users'], + } +); + +// Usage +const user = await getCachedUser(userId); +``` + +--- + +## Bundle Optimization + +### Analyze Bundle Size + +```bash +# Install analyzer +npm install @next/bundle-analyzer + +# Update next.config.js +const withBundleAnalyzer = require('@next/bundle-analyzer')({ + enabled: process.env.ANALYZE === 'true', +}); + +module.exports = withBundleAnalyzer({ + // config +}); + +# Run analysis +ANALYZE=true npm run build +``` + +### Tree Shaking Imports + +```tsx +// BAD - Imports entire library +import _ from 'lodash'; +const result = _.debounce(fn, 300); + +// GOOD - Import only what you need +import debounce from 'lodash/debounce'; +const result = debounce(fn, 300); + +// GOOD - Named imports (tree-shakeable) +import { debounce } from 'lodash-es'; +``` + +### Optimize Dependencies + +```js +// next.config.js +module.exports = { + // Transpile specific packages + transpilePackages: ['ui-library', 'shared-utils'], + + // Optimize package imports + experimental: { + optimizePackageImports: ['lucide-react', '@heroicons/react'], + }, + + // External packages for server + serverExternalPackages: ['sharp', 'bcrypt'], +}; +``` + +### Font Optimization + +```tsx +// app/layout.tsx +import { Inter, Roboto_Mono } from 'next/font/google'; + +const inter = Inter({ + subsets: ['latin'], + display: 'swap', + variable: '--font-inter', +}); + +const robotoMono = Roboto_Mono({ + subsets: ['latin'], + display: 'swap', + variable: '--font-roboto-mono', +}); + +export default function RootLayout({ children }) { + return ( + + {children} + + ); +} +``` + +--- + +## Core Web Vitals + +### Largest Contentful Paint (LCP) + +```tsx +// Optimize LCP hero image +import Image from 'next/image'; + +export default function Hero() { + return ( +
+ Hero +
+

Welcome

+
+
+ ); +} + +// Preload critical resources in layout +export default function RootLayout({ children }) { + return ( + + + + + + {children} + + ); +} +``` + +### Cumulative Layout Shift (CLS) + +```tsx +// Prevent CLS with explicit dimensions +Product + +// Or use aspect ratio +
+ Video +
+ +// Skeleton placeholders +function ProductCard({ product }: { product?: Product }) { + if (!product) { + return ( +
+
+
+
+
+ ); + } + + return ( +
+ {product.name} +

{product.name}

+

{product.price}

+
+ ); +} +``` + +### First Input Delay (FID) / Interaction to Next Paint (INP) + +```tsx +// Defer non-critical JavaScript +import Script from 'next/script'; + +export default function Layout({ children }) { + return ( + + + {children} + + {/* Load analytics after page is interactive */} + + + +''', + } + + +def scaffold_project( + name: str, + output_dir: Path, + template: str = "nextjs", + features: Optional[List[str]] = None, + dry_run: bool = False, +) -> Dict: + """Scaffold a complete frontend project.""" + features = features or [] + project_path = output_dir / name + + if project_path.exists() and not dry_run: + return {"error": f"Directory already exists: {project_path}"} + + template_config = TEMPLATES.get(template) + if not template_config: + return {"error": f"Unknown template: {template}"} + + created_files = [] + + # Create project directory + if not dry_run: + project_path.mkdir(parents=True, exist_ok=True) + + # Generate base structure + created_files.extend( + generate_structure(project_path, template_config["structure"], dry_run) + ) + + # Generate config files + created_files.extend( + generate_config_files(project_path, template, name, features, dry_run) + ) + + # Add feature files + for feature in features: + if feature in FEATURES: + for file_path, content_key in FEATURES[feature]["files"].items(): + full_path = project_path / file_path + if not dry_run: + full_path.parent.mkdir(parents=True, exist_ok=True) + content = FILE_CONTENTS.get(content_key, f"// TODO: Implement {content_key}") + full_path.write_text(content) + created_files.append(str(full_path)) + + return { + "name": name, + "template": template, + "template_name": template_config["name"], + "features": features, + "path": str(project_path), + "files_created": len(created_files), + "files": created_files, + "next_steps": [ + f"cd {name}", + "npm install", + "npm run dev", + ], + } + + +def print_result(result: Dict) -> None: + """Print scaffolding result.""" + if "error" in result: + print(f"Error: {result['error']}", file=sys.stderr) + return + + print(f"\n{'='*60}") + print(f"Project Scaffolded: {result['name']}") + print(f"{'='*60}") + print(f"Template: {result['template_name']}") + print(f"Location: {result['path']}") + print(f"Files Created: {result['files_created']}") + + if result["features"]: + print(f"Features: {', '.join(result['features'])}") + + print(f"\nNext Steps:") + for step in result["next_steps"]: + print(f" $ {step}") + + print(f"{'='*60}\n") + + +def main(): + parser = argparse.ArgumentParser( + description="Scaffold a frontend project with best practices" + ) + parser.add_argument( + "name", + help="Project name (kebab-case recommended)" + ) + parser.add_argument( + "--dir", "-d", + default=".", + help="Output directory (default: current directory)" + ) + parser.add_argument( + "--template", "-t", + choices=list(TEMPLATES.keys()), + default="nextjs", + help="Project template (default: nextjs)" + ) + parser.add_argument( + "--features", "-f", + help="Comma-separated features to add (auth,api,forms,testing,storybook)" + ) + parser.add_argument( + "--list-templates", + action="store_true", + help="List available templates" + ) + parser.add_argument( + "--list-features", + action="store_true", + help="List available features" + ) + parser.add_argument( + "--dry-run", + action="store_true", + help="Show what would be created without creating files" + ) + parser.add_argument( + "--json", + action="store_true", + help="Output in JSON format" + ) + + args = parser.parse_args() + + if args.list_templates: + print("\nAvailable Templates:") + for key, template in TEMPLATES.items(): + print(f" {key}: {template['name']}") + print(f" {template['description']}") + return + + if args.list_features: + print("\nAvailable Features:") + for key, feature in FEATURES.items(): + print(f" {key}: {feature['description']}") + deps = ", ".join(feature.get("dependencies", [])) + if deps: + print(f" Adds: {deps}") + return + + features = [] + if args.features: + features = [f.strip() for f in args.features.split(",")] + invalid = [f for f in features if f not in FEATURES] + if invalid: + print(f"Unknown features: {', '.join(invalid)}", file=sys.stderr) + print(f"Valid features: {', '.join(FEATURES.keys())}") + sys.exit(1) + + result = scaffold_project( + name=args.name, + output_dir=Path(args.dir), + template=args.template, + features=features, + dry_run=args.dry_run, + ) + + if args.json: + print(json.dumps(result, indent=2)) + else: + print_result(result) + + +if __name__ == "__main__": + main() diff --git a/skills/shadcn/SKILL.md b/skills/shadcn/SKILL.md new file mode 100644 index 00000000..6d5c2f17 --- /dev/null +++ b/skills/shadcn/SKILL.md @@ -0,0 +1,250 @@ +--- +name: shadcn +description: Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems. +user-invocable: false +risk: safe +source: https://github.com/shadcn-ui/ui/tree/main/skills/shadcn +date_added: "2026-03-07" +--- + +# shadcn/ui + +A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. + +> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +## When to Use + +- Use when adding new components from shadcn/ui or community registries. +- Use when styling, composing, or debugging existing shadcn/ui components. +- Use when initializing a new project or switching design system presets. +- Use to retrieve component documentation, examples, and API references. + +## Current Project Context + +```json +!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'` +``` + +The JSON above contains the project config and installed components. Use `npx shadcn@latest docs ` to get documentation and example URLs for any component. + +## Principles + +1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. +2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. +3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. +4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. + +## Critical Rules + +These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. + +### Styling & Tailwind → [styling.md](./rules/styling.md) + +- **`className` for layout, not styling.** Never override component colors or typography. +- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. +- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. +- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. +- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). +- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. +- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. + +### Forms & Inputs → [forms.md](./rules/forms.md) + +- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout. +- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`. +- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.** +- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state. +- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading. +- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control. + +### Component Structure → [composition.md](./rules/composition.md) + +- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`. +- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden. +- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`. +- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`. +- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`. +- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load. + +### Use Components, Not Custom Markup → [composition.md](./rules/composition.md) + +- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`. +- **Callouts use `Alert`.** Don't build custom styled divs. +- **Empty states use `Empty`.** Don't build custom empty state markup. +- **Toast via `sonner`.** Use `toast()` from `sonner`. +- **Use `Separator`** instead of `
` or `
`. +- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs. +- **Use `Badge`** instead of custom styled spans. + +### Icons → [icons.md](./rules/icons.md) + +- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon. +- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`. +- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup. + +### CLI + +- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset `. + +## Key Patterns + +These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above. + +```tsx +// Form layout: FieldGroup + Field, not div + Label. + + + Email + + + + +// Validation: data-invalid on Field, aria-invalid on the control. + + Email + + Invalid email. + + +// Icons in buttons: data-icon, no sizing classes. + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**? + - **Reinstall**: `npx shadcn@latest init --preset --force --reinstall`. Overwrites all components. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +``` + +**Named presets:** `base-nova`, `radix-nova` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/skills/shadcn/agents/openai.yml b/skills/shadcn/agents/openai.yml new file mode 100644 index 00000000..ab636da8 --- /dev/null +++ b/skills/shadcn/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/skills/shadcn/assets/shadcn-small.png b/skills/shadcn/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVkr05M1pgl1mAh%j*h z6I`{x0%imor0saV%ts)_S>O>_%)r1c48n{Iv*t(uO^eJ7i71Ki^|4CM&(%vz$xlkv ztH>0+>{umUo3Q%e#RDspr3imfVamB1>jfNYSkzLEl1NlCV?QiN}Sf^&XRs)CuG zfu4bq9hZWFf=y9MnpKdC8&o@xXRDM^Qc_^0uU}qXu2*iXmtT~wZ)j<0sc&GUZ)Btk zRH0j3nOBlnp_^B%3^4>|j!SBBa#3bMNoIbY0?6FNr2NtnTO}osMQ{LdXGvxn!lt}p zsJDO~)CbAv8|oS8!_5Y2wE>A*`4?rT0&NDFZ)a!&R*518wZ}#uWI2*!AU*|)0=;U- zWup%dHajlKxQFb(K%V94;uvBfm>Yb$>yU#$kCbgiC(9RwrlwA(rsW(``(6H=zq@!* zUB_~Trk_lTdxPh$yxDTsVY&L;b+6{tRm^+d+gl^OQcCIBok=%y)Vhx@dR1ceL3r{0 z9=2nMXx8DxEkhL{v?(>~8{qDBkfB!u-iDB`| z-5d%Ae82YI%n8Zg9$mRN?o-|V)V*=5b-R>a>}P2{=pcK^B(&B-W{C#Z!Q%b*ueK>n zK6ymYLRneebCKDSzcqHEHFopo-mkH{zIkt2Z0^086Tko7%N)NxoZYSDM1jSUwPpuS zSeq*wzrC2D(tq4pZ#s9QP@Cd8Q^wW3*2cL_519?*;#4`B;+ei#o;C{Kkamm3Jooa; zE$3K-+c(6ShTjelW_B*W5o zcS6z34IR5C-SIF8m(lui^IOy!-~We?b1?PSGniCYR=ZyR^%<1lJzf1=);T3K0RU@N BSy=!8 literal 0 HcmV?d00001 diff --git a/skills/shadcn/assets/shadcn.png b/skills/shadcn/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 zcmY*c2{@Ep*nY=Y1|x&SAZEs{m}!)<%wS9yONAB@M)rMZgo-eODf<#aqEe(qiK0X# zjeV<7Sz@e_J-dH=Uw_~KpZ7ZNbD!tj&;6X|T<3bv^oi2VQ{31CN!jQ|snzFQu@Q;0Du?| zfb$Q>hHZD6F}v@?{A7+^3dW)SVQ8`OjvI|a z{6nF7;ZWA*ClCgH0WJs)HH;bth37*c5IOtVpZ7;)e9lMRL5Xd-wU$;iu|t*(dB|ufCq)@;pdCk(RDoU7f8jS zP&Fw%scw{13LdO|DW$q z9v$>f^8d4#e=GgR%Ptkqr-S~xZFoMo{SXfTK;ub7{gc641VugDjPn7=AJBO!*mUKucc{7ey~li!vybaIkF z8OboYVX%y|2%P`k*m&i}s=eW8)0q&YJ<-thLrc)HZ?6uc7Fd!$(lWSvH;?Y^+|N2q z(lz!>Ip|<{_a4CnLN%GIxW|*Sl|;4c3?=Q>z5fWEEtp(&BzeAccRS{zf9!64+SAA{ zhe+CT7U8Ox1UUnilJqweOM{d}_w6-|yz}dA=-R7yHrxs|(MLR_`U=AC%0V#PpIuxs z`__xodV3Bl2ayP^m8isMu4iD<`=4UURtHBPsaLp81r-f3$(4vZbRPd}*>wTo@@?zp zjl1KkifF5p%-V<}MTk3`()wm7qcMd8<14WE>Y_YwjB;{Zt!@vJbH&pu!Ye!p{1kAj zlRg2pkl)WBbyj>3e<$)@mP?WW}W-c;_(UQ(}=MJLED9F^U*P1KWxu z1h@&s1?M0%ax_P5Qb>kkPKEH=OKGZn z&-@5MD^|kk?Hzkfz8h$8#{$$OjAyr!+uGtp>ns1^oS7Nlv6k$^tzTdIb%jUtI8F3t zL;LuqJ7-@4UI|Q)HN=Ap;dAmuZY4c&XphavC{kl z)mMY6L)S-94;V|YT3TA7U^;uvS0W!$W`JIb@kNAm0@IKVWJ@R_jgX6wlUd5V%pHIn;=Z~px z-B_MFLx+ldzTQUp5C zkXaznhH18TytzOgD%$iMnLiAtjvnHLkM;?P*3ZFb#cbY&ZF*|R;4V4$85DZMQ#T@| zxuMMPg?cl|hNJ$2S&%fLErMQSzCnzc_QGh3x@I8V&Omf&=_n+EaC}tft^`)^W5-=1 z0bbJ#wK8+=zNaz-V{U?NtJp&%IDd9-xIut--L}@gU{E>B&ym$vT2@wEZq- zzDqmDf)Cr-aZ-5KIYF!Elcq_X%?qXsg}Yhp=^bebcZ-Ucd$p+US;P}(@VrR4_fy6!qx?X)%SIi+LRsDR` zQ8+xRd{In4WLlVjoy5ElKt%?Ykr)cH*G}0^tE=$(#0W?l)_9MV89|sem>Y}t&?fGt zo3o0sdsG9?JhC1-KM}e*&zeb*H$7JoD&0z#=2sH725JmGV`WoVb86exi5p^Lm{B5BlZRd6(bKH`QmJ*u8#(j6IH1 zFf;Li5iqsV=V^irlzzwVJ$xXwz?I8y`i+t-g0?n77Ie}-fBp1{)&Dm1Yk^Fb=7rI4 zAD)SQRv9=Xr%G{qI!)}>rf;lzG))%89I~zF)R~&_Ur)%0>4+7bxbBknHT`^+jNFe%p=t<=q}3W1Y-u+ zi-cN{V#+HsEEB8UQsUt1uE991MvN%&V?(0Mcb~82H!ori&rLm~Xyf>i#u_t=rzHA3 zu?NRljnv7YU;T&V#(OVE$+=^@kaXvs%C3f78E(k$IyZ`)N$NYtLMfphBkV|oSI}7N zEpFrKnA*jL!k5P(%)+Sl^e>hI@Y}jqmvb~@RD`9$!9Jpu-Wf2Cq?hfV{ghuo&AG>9 zcvC>&o43J*WfyXuRWV)Y0~9;i68pPyv&~-%Ysp}xCY)|oF5?x{w~aS zfx&5VFU)gcnMk*q%=jkB9w_qQ)x=v#1Q^_3`uyEfKiD4y$vaOR4n4IpvQmyNXK%#R zU|XV~4Bq=Kr7Zp3#hdF5_MgA#yL-jJ4E5*j2?mhMq17{mD#6f?!#-b>@HA&~uECub zF2reQA9f>OHLzqeZhi$%7fW!n^Y3_Y{C0vfQs0?a(Pcz7Opuz;(9n>$6)c9L`((v~ z@R1+M2kRN}mDuKCk=od(UwR?y%hUbEv$dC0BD&Ir;03Mf&|A#ZFtn&*mnkH8>2w0+imbwLLU77q!A=W ztt$OR$b#$dkIAwM*ZWG{5*zUPkBN$42Kxe)AYe9DV+?(A^_|IoJLzRGKlbpb%n=PVmB`nxX< z)_}Tpg&IoX;4<0!ksDY9f>*dl`c}zSl!(+ujG#<&yu3AEKR)zVKTaK88*+ma)}3)G zx460(7TNMTz(t&DUv)`7lj(r=`!?>~Q}XW3w-sipV!{Trr8`zsvu9NEK9)zO0>v3D zOs=r|`OyjAS{Ea@UIRrr2Y7A?5+5}R4RpF)ee5^F-dhvP6MKyO`kNB4jGC{-$x}`x zXmpAxVV=WR{>!zDxoq7#DN+_BWG_PRr?$Sa(XT@zUL`HuM{I4bZSuo97aF&7tL@4P zO59)SaLA2ZMU3dO5>=P)GiqcIBUy4A2h_IC-7+IROG<+Qqczgo-JyHw-!h2%h8#$y zr;y4>z2J1R4+`7o>#OWA2iiS1m8)q6A}u3d7VBk **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template