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] <github-actions[bot]@users.noreply.github.com> Co-authored-by: sck_0 <samujackson1337@gmail.com>
This commit is contained in:
Aras
GitHub
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
491
skills/senior-frontend/SKILL.md
Normal file
491
skills/senior-frontend/SKILL.md
Normal file
@@ -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 <div className={cn("", className)}>{children}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 (
|
||||
<TabsContext.Provider value={{ active, setActive }}>
|
||||
{children}
|
||||
</TabsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
Tabs.List = TabList;
|
||||
Tabs.Panel = TabPanel;
|
||||
|
||||
// Usage
|
||||
<Tabs>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab>One</Tabs.Tab>
|
||||
<Tabs.Tab>Two</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel>Content 1</Tabs.Panel>
|
||||
<Tabs.Panel>Content 2</Tabs.Panel>
|
||||
</Tabs>;
|
||||
```
|
||||
|
||||
### Custom Hooks
|
||||
|
||||
Extract reusable logic:
|
||||
|
||||
```tsx
|
||||
function useDebounce<T>(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
|
||||
<DataFetcher
|
||||
url="/api/users"
|
||||
render={({ data, loading }) =>
|
||||
loading ? <Spinner /> : <UserList users={data} />
|
||||
}
|
||||
/>;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 (
|
||||
<div>
|
||||
<h1>{product.name}</h1>
|
||||
<AddToCartButton productId={product.id} /> {/* Client component */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Client Component
|
||||
("use client");
|
||||
function AddToCartButton({ productId }) {
|
||||
const [adding, setAdding] = useState(false);
|
||||
return <button onClick={() => addToCart(productId)}>Add</button>;
|
||||
}
|
||||
```
|
||||
|
||||
### Image Optimization
|
||||
|
||||
```tsx
|
||||
import Image from 'next/image';
|
||||
|
||||
// Above the fold - load immediately
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="Hero"
|
||||
width={1200}
|
||||
height={600}
|
||||
priority
|
||||
/>
|
||||
|
||||
// Responsive image with fill
|
||||
<div className="relative aspect-video">
|
||||
<Image
|
||||
src="/product.jpg"
|
||||
alt="Product"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Data Fetching Patterns
|
||||
|
||||
```tsx
|
||||
// Parallel fetching
|
||||
async function Dashboard() {
|
||||
const [user, stats] = await Promise.all([getUser(), getStats()]);
|
||||
return <div>...</div>;
|
||||
}
|
||||
|
||||
// Streaming with Suspense
|
||||
async function ProductPage({ params }) {
|
||||
return (
|
||||
<div>
|
||||
<ProductDetails id={params.id} />
|
||||
<Suspense fallback={<ReviewsSkeleton />}>
|
||||
<Reviews productId={params.id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility and Testing
|
||||
|
||||
Reference: `references/frontend_best_practices.md`
|
||||
|
||||
### Accessibility Checklist
|
||||
|
||||
1. **Semantic HTML**: Use proper elements (`<button>`, `<nav>`, `<main>`)
|
||||
2. **Keyboard Navigation**: All interactive elements focusable
|
||||
3. **ARIA Labels**: Provide labels for icons and complex widgets
|
||||
4. **Color Contrast**: Minimum 4.5:1 for normal text
|
||||
5. **Focus Indicators**: Visible focus states
|
||||
|
||||
```tsx
|
||||
// Accessible button
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close dialog"
|
||||
onClick={onClose}
|
||||
className="focus-visible:ring-2 focus-visible:ring-blue-500"
|
||||
>
|
||||
<XIcon aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
// Skip link for keyboard users
|
||||
<a href="#main-content" className="sr-only focus:not-sr-only">
|
||||
Skip to main content
|
||||
</a>
|
||||
```
|
||||
|
||||
### 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(<Button onClick={onClick}>Click me</Button>);
|
||||
|
||||
await userEvent.click(screen.getByRole("button"));
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
// Test accessibility
|
||||
test("dialog is accessible", async () => {
|
||||
render(<Dialog open={true} title="Confirm" />);
|
||||
|
||||
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";
|
||||
|
||||
<button
|
||||
className={cn(
|
||||
"px-4 py-2 rounded",
|
||||
variant === "primary" && "bg-blue-500 text-white",
|
||||
disabled && "opacity-50 cursor-not-allowed",
|
||||
)}
|
||||
/>;
|
||||
```
|
||||
|
||||
### TypeScript Patterns
|
||||
|
||||
```tsx
|
||||
// Props with children
|
||||
interface CardProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
// Generic component
|
||||
interface ListProps<T> {
|
||||
items: T[];
|
||||
renderItem: (item: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
function List<T>({ items, renderItem }: ListProps<T>) {
|
||||
return <ul>{items.map(renderItem)}</ul>;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- React Patterns: `references/react_patterns.md`
|
||||
- Next.js Optimization: `references/nextjs_optimization_guide.md`
|
||||
- Best Practices: `references/frontend_best_practices.md`
|
||||
806
skills/senior-frontend/references/frontend_best_practices.md
Normal file
806
skills/senior-frontend/references/frontend_best_practices.md
Normal file
@@ -0,0 +1,806 @@
|
||||
# Frontend Best Practices
|
||||
|
||||
Modern frontend development standards for accessibility, testing, TypeScript, and Tailwind CSS.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Accessibility (a11y)](#accessibility-a11y)
|
||||
- [Testing Strategies](#testing-strategies)
|
||||
- [TypeScript Patterns](#typescript-patterns)
|
||||
- [Tailwind CSS](#tailwind-css)
|
||||
- [Project Structure](#project-structure)
|
||||
- [Security](#security)
|
||||
|
||||
---
|
||||
|
||||
## Accessibility (a11y)
|
||||
|
||||
### Semantic HTML
|
||||
|
||||
```tsx
|
||||
// BAD - Divs for everything
|
||||
<div onClick={handleClick}>Click me</div>
|
||||
<div class="header">...</div>
|
||||
<div class="nav">...</div>
|
||||
|
||||
// GOOD - Semantic elements
|
||||
<button onClick={handleClick}>Click me</button>
|
||||
<header>...</header>
|
||||
<nav>...</nav>
|
||||
<main>...</main>
|
||||
<article>...</article>
|
||||
<aside>...</aside>
|
||||
<footer>...</footer>
|
||||
```
|
||||
|
||||
### Keyboard Navigation
|
||||
|
||||
```tsx
|
||||
// Ensure all interactive elements are keyboard accessible
|
||||
function Modal({ isOpen, onClose, children }: ModalProps) {
|
||||
const modalRef = useRef<HTMLDivElement>(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 (
|
||||
<div
|
||||
ref={modalRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### ARIA Attributes
|
||||
|
||||
```tsx
|
||||
// Live regions for dynamic content
|
||||
<div aria-live="polite" aria-atomic="true">
|
||||
{status && <p>{status}</p>}
|
||||
</div>
|
||||
|
||||
// Loading states
|
||||
<button disabled={isLoading} aria-busy={isLoading}>
|
||||
{isLoading ? 'Loading...' : 'Submit'}
|
||||
</button>
|
||||
|
||||
// Form labels
|
||||
<label htmlFor="email">Email address</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
aria-required="true"
|
||||
aria-invalid={!!errors.email}
|
||||
aria-describedby={errors.email ? 'email-error' : undefined}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p id="email-error" role="alert">
|
||||
{errors.email}
|
||||
</p>
|
||||
)}
|
||||
|
||||
// Navigation
|
||||
<nav aria-label="Main navigation">
|
||||
<ul>
|
||||
<li><a href="/" aria-current={isHome ? 'page' : undefined}>Home</a></li>
|
||||
<li><a href="/about" aria-current={isAbout ? 'page' : undefined}>About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
// Toggle buttons
|
||||
<button
|
||||
aria-pressed={isEnabled}
|
||||
onClick={() => setIsEnabled(!isEnabled)}
|
||||
>
|
||||
{isEnabled ? 'Enabled' : 'Disabled'}
|
||||
</button>
|
||||
|
||||
// Expandable sections
|
||||
<button
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="content-panel"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
Show details
|
||||
</button>
|
||||
<div id="content-panel" hidden={!isOpen}>
|
||||
Content here
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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
|
||||
<span className="text-red-600">
|
||||
<ErrorIcon aria-hidden="true" />
|
||||
<span>Error: Invalid input</span>
|
||||
</span>
|
||||
```
|
||||
|
||||
### 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
|
||||
<a href="#main-content" className={srOnly + ' focus:not-sr-only focus:absolute focus:top-0'}>
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
// Icon buttons need labels
|
||||
<button aria-label="Close menu">
|
||||
<XIcon aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
// Or use visually hidden text
|
||||
<button>
|
||||
<XIcon aria-hidden="true" />
|
||||
<span className={srOnly}>Close menu</span>
|
||||
</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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(<Button>Click me</Button>);
|
||||
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClick when clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleClick = jest.fn();
|
||||
|
||||
render(<Button onClick={handleClick}>Click me</Button>);
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('is disabled when loading', () => {
|
||||
render(<Button isLoading>Submit</Button>);
|
||||
expect(screen.getByRole('button')).toBeDisabled();
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');
|
||||
});
|
||||
|
||||
it('shows loading text when loading', () => {
|
||||
render(<Button isLoading loadingText="Submitting...">Submit</Button>);
|
||||
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(
|
||||
<AuthProvider>
|
||||
<LoginForm />
|
||||
</AuthProvider>
|
||||
);
|
||||
|
||||
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(
|
||||
<AuthProvider>
|
||||
<LoginForm />
|
||||
</AuthProvider>
|
||||
);
|
||||
|
||||
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<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary';
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
function Button({ variant = 'primary', isLoading, children, ...props }: ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
disabled={props.disabled || isLoading}
|
||||
className={cn(variants[variant], props.className)}
|
||||
>
|
||||
{isLoading ? <Spinner /> : children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Polymorphic components
|
||||
type PolymorphicProps<E extends React.ElementType> = {
|
||||
as?: E;
|
||||
} & React.ComponentPropsWithoutRef<E>;
|
||||
|
||||
function Box<E extends React.ElementType = 'div'>({
|
||||
as,
|
||||
children,
|
||||
...props
|
||||
}: PolymorphicProps<E>) {
|
||||
const Component = as || 'div';
|
||||
return <Component {...props}>{children}</Component>;
|
||||
}
|
||||
|
||||
// Usage
|
||||
<Box as="section" id="hero">Content</Box>
|
||||
<Box as="article">Article content</Box>
|
||||
```
|
||||
|
||||
### Discriminated Unions
|
||||
|
||||
```tsx
|
||||
// State machines with exhaustive type checking
|
||||
type AsyncState<T> =
|
||||
| { status: 'idle' }
|
||||
| { status: 'loading' }
|
||||
| { status: 'success'; data: T }
|
||||
| { status: 'error'; error: Error };
|
||||
|
||||
function DataDisplay<T>({ state, render }: {
|
||||
state: AsyncState<T>;
|
||||
render: (data: T) => React.ReactNode;
|
||||
}) {
|
||||
switch (state.status) {
|
||||
case 'idle':
|
||||
return null;
|
||||
case 'loading':
|
||||
return <Spinner />;
|
||||
case 'success':
|
||||
return <>{render(state.data)}</>;
|
||||
case 'error':
|
||||
return <ErrorMessage error={state.error} />;
|
||||
// TypeScript ensures all cases are handled
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Generic Components
|
||||
|
||||
```tsx
|
||||
// Generic list component
|
||||
interface ListProps<T> {
|
||||
items: T[];
|
||||
renderItem: (item: T, index: number) => React.ReactNode;
|
||||
keyExtractor: (item: T) => string;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
function List<T>({ items, renderItem, keyExtractor, emptyMessage }: ListProps<T>) {
|
||||
if (items.length === 0) {
|
||||
return <p className="text-muted">{emptyMessage || 'No items'}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{items.map((item, index) => (
|
||||
<li key={keyExtractor(item)}>{renderItem(item, index)}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage
|
||||
<List
|
||||
items={users}
|
||||
keyExtractor={(user) => user.id}
|
||||
renderItem={(user) => <UserCard user={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 <Badge variant="admin">Admin ({user.permissions.length} perms)</Badge>;
|
||||
}
|
||||
|
||||
return <Badge>User</Badge>;
|
||||
}
|
||||
|
||||
// API response type guards
|
||||
interface ApiSuccess<T> {
|
||||
success: true;
|
||||
data: T;
|
||||
}
|
||||
|
||||
interface ApiError {
|
||||
success: false;
|
||||
error: string;
|
||||
}
|
||||
|
||||
type ApiResponse<T> = ApiSuccess<T> | ApiError;
|
||||
|
||||
function isApiSuccess<T>(response: ApiResponse<T>): response is ApiSuccess<T> {
|
||||
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<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {}
|
||||
|
||||
function Button({ className, variant, size, ...props }: ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
className={cn(buttonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage
|
||||
<Button variant="primary" size="lg">Large Primary</Button>
|
||||
<Button variant="ghost" size="icon"><MenuIcon /></Button>
|
||||
```
|
||||
|
||||
### Responsive Design
|
||||
|
||||
```tsx
|
||||
// Mobile-first responsive design
|
||||
<div className="
|
||||
grid
|
||||
grid-cols-1 {/* Mobile: 1 column */}
|
||||
sm:grid-cols-2 {/* 640px+: 2 columns */}
|
||||
lg:grid-cols-3 {/* 1024px+: 3 columns */}
|
||||
xl:grid-cols-4 {/* 1280px+: 4 columns */}
|
||||
gap-4
|
||||
sm:gap-6
|
||||
lg:gap-8
|
||||
">
|
||||
{products.map(product => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
|
||||
// Container with responsive padding
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
Content
|
||||
</div>
|
||||
|
||||
// Hide/show based on breakpoint
|
||||
<nav className="hidden md:flex">Desktop nav</nav>
|
||||
<button className="md:hidden">Mobile menu</button>
|
||||
```
|
||||
|
||||
### Animation Utilities
|
||||
|
||||
```tsx
|
||||
// Skeleton loading
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4" />
|
||||
<div className="h-4 bg-gray-200 rounded w-1/2" />
|
||||
</div>
|
||||
|
||||
// Transitions
|
||||
<button className="
|
||||
transition-all
|
||||
duration-200
|
||||
ease-in-out
|
||||
hover:scale-105
|
||||
active:scale-95
|
||||
">
|
||||
Hover me
|
||||
</button>
|
||||
|
||||
// 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
|
||||
<div className="animate-fade-in">Fading in</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
<div>{userInput}</div>
|
||||
|
||||
// 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 <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
|
||||
}
|
||||
```
|
||||
|
||||
### 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<typeof schema>;
|
||||
|
||||
function RegisterForm() {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Input {...register('email')} error={errors.email?.message} />
|
||||
<Input type="password" {...register('password')} error={errors.password?.message} />
|
||||
<Input type="password" {...register('confirmPassword')} error={errors.confirmPassword?.message} />
|
||||
<Button type="submit">Register</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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());
|
||||
}
|
||||
```
|
||||
724
skills/senior-frontend/references/nextjs_optimization_guide.md
Normal file
724
skills/senior-frontend/references/nextjs_optimization_guide.md
Normal file
@@ -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 (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{products.map(product => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<button onClick={handleClick} disabled={isAdding}>
|
||||
{isAdding ? 'Adding...' : 'Add to Cart'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<div>
|
||||
{/* Server-rendered content */}
|
||||
<h1>{product.name}</h1>
|
||||
<p>{product.description}</p>
|
||||
|
||||
{/* Client component for interactivity */}
|
||||
<AddToCartButton productId={product.id} />
|
||||
|
||||
{/* Server component for reviews */}
|
||||
<ProductReviews productId={product.id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="Hero image"
|
||||
width={1200}
|
||||
height={600}
|
||||
priority // Load immediately for LCP
|
||||
/>
|
||||
|
||||
// Responsive image
|
||||
<Image
|
||||
src="/product.jpg"
|
||||
alt="Product"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
|
||||
// With placeholder blur
|
||||
import productImage from '@/public/product.jpg';
|
||||
|
||||
<Image
|
||||
src={productImage}
|
||||
alt="Product"
|
||||
placeholder="blur" // Uses imported image data
|
||||
/>
|
||||
```
|
||||
|
||||
### 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)
|
||||
<Image
|
||||
src="/gallery/photo1.jpg"
|
||||
alt="Gallery photo"
|
||||
width={400}
|
||||
height={300}
|
||||
loading="lazy" // Default behavior
|
||||
/>
|
||||
|
||||
// Above the fold - load immediately
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="Hero"
|
||||
width={1200}
|
||||
height={600}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Code Splitting
|
||||
|
||||
### Dynamic Imports
|
||||
|
||||
```tsx
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
// Basic dynamic import
|
||||
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
|
||||
loading: () => <ChartSkeleton />,
|
||||
});
|
||||
|
||||
// Disable SSR for client-only components
|
||||
const MapComponent = dynamic(() => import('@/components/Map'), {
|
||||
ssr: false,
|
||||
loading: () => <div className="h-[400px] bg-gray-100" />,
|
||||
});
|
||||
|
||||
// Named exports
|
||||
const Modal = dynamic(() =>
|
||||
import('@/components/ui').then(mod => mod.Modal)
|
||||
);
|
||||
|
||||
// With suspense
|
||||
const DashboardCharts = dynamic(() => import('@/components/DashboardCharts'), {
|
||||
loading: () => <Suspense fallback={<ChartsSkeleton />} />,
|
||||
});
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<Suspense fallback={<AnalyticsSkeleton />}>
|
||||
<AnalyticsCharts />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{children}
|
||||
<Suspense fallback={<AnalyticsSkeleton />}>{analytics}</Suspense>
|
||||
<Suspense fallback={<MetricsSkeleton />}>{metrics}</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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 (
|
||||
<div>
|
||||
<UserHeader user={user} />
|
||||
<StatsPanel stats={stats} />
|
||||
<NotificationList notifications={notifications} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Streaming with Suspense
|
||||
|
||||
```tsx
|
||||
import { Suspense } from 'react';
|
||||
|
||||
async function ProductPage({ params }: { params: { id: string } }) {
|
||||
const product = await getProduct(params.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Immediate content */}
|
||||
<h1>{product.name}</h1>
|
||||
<p>{product.description}</p>
|
||||
|
||||
{/* Stream reviews - don't block page */}
|
||||
<Suspense fallback={<ReviewsSkeleton />}>
|
||||
<Reviews productId={params.id} />
|
||||
</Suspense>
|
||||
|
||||
{/* Stream recommendations */}
|
||||
<Suspense fallback={<RecommendationsSkeleton />}>
|
||||
<Recommendations productId={params.id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Slow data component
|
||||
async function Reviews({ productId }: { productId: string }) {
|
||||
const reviews = await getReviews(productId); // Slow query
|
||||
return <ReviewList reviews={reviews} />;
|
||||
}
|
||||
```
|
||||
|
||||
### Request Memoization
|
||||
|
||||
```tsx
|
||||
// Next.js automatically dedupes identical requests
|
||||
async function Layout({ children }) {
|
||||
const user = await getUser(); // Request 1
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
|
||||
async function Header() {
|
||||
const user = await getUser(); // Same request - cached!
|
||||
return <div>Hello, {user.name}</div>;
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
|
||||
<body className="font-sans">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Core Web Vitals
|
||||
|
||||
### Largest Contentful Paint (LCP)
|
||||
|
||||
```tsx
|
||||
// Optimize LCP hero image
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative h-[600px]">
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="Hero"
|
||||
fill
|
||||
priority // Preload for LCP
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
<h1>Welcome</h1>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Preload critical resources in layout
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preload" href="/hero.jpg" as="image" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Cumulative Layout Shift (CLS)
|
||||
|
||||
```tsx
|
||||
// Prevent CLS with explicit dimensions
|
||||
<Image
|
||||
src="/product.jpg"
|
||||
alt="Product"
|
||||
width={400}
|
||||
height={300}
|
||||
/>
|
||||
|
||||
// Or use aspect ratio
|
||||
<div className="aspect-video relative">
|
||||
<Image src="/video-thumb.jpg" alt="Video" fill />
|
||||
</div>
|
||||
|
||||
// Skeleton placeholders
|
||||
function ProductCard({ product }: { product?: Product }) {
|
||||
if (!product) {
|
||||
return (
|
||||
<div className="animate-pulse">
|
||||
<div className="h-48 bg-gray-200 rounded" />
|
||||
<div className="h-4 bg-gray-200 rounded mt-2 w-3/4" />
|
||||
<div className="h-4 bg-gray-200 rounded mt-1 w-1/2" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Image src={product.image} alt={product.name} width={300} height={200} />
|
||||
<h3>{product.name}</h3>
|
||||
<p>{product.price}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 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 (
|
||||
<html>
|
||||
<body>
|
||||
{children}
|
||||
|
||||
{/* Load analytics after page is interactive */}
|
||||
<Script
|
||||
src="https://analytics.example.com/script.js"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
|
||||
{/* Load chat widget when idle */}
|
||||
<Script
|
||||
src="https://chat.example.com/widget.js"
|
||||
strategy="lazyOnload"
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
// Use web workers for heavy computation
|
||||
// app/components/DataProcessor.tsx
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
function DataProcessor({ data }: { data: number[] }) {
|
||||
const [result, setResult] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const worker = new Worker(new URL('../workers/processor.js', import.meta.url));
|
||||
|
||||
worker.postMessage(data);
|
||||
worker.onmessage = (e) => setResult(e.data);
|
||||
|
||||
return () => worker.terminate();
|
||||
}, [data]);
|
||||
|
||||
return <div>Result: {result}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### Measuring Performance
|
||||
|
||||
```tsx
|
||||
// app/components/PerformanceMonitor.tsx
|
||||
'use client';
|
||||
|
||||
import { useReportWebVitals } from 'next/web-vitals';
|
||||
|
||||
export function PerformanceMonitor() {
|
||||
useReportWebVitals((metric) => {
|
||||
switch (metric.name) {
|
||||
case 'LCP':
|
||||
console.log('LCP:', metric.value);
|
||||
break;
|
||||
case 'FID':
|
||||
console.log('FID:', metric.value);
|
||||
break;
|
||||
case 'CLS':
|
||||
console.log('CLS:', metric.value);
|
||||
break;
|
||||
case 'TTFB':
|
||||
console.log('TTFB:', metric.value);
|
||||
break;
|
||||
}
|
||||
|
||||
// Send to analytics
|
||||
analytics.track('web-vital', {
|
||||
name: metric.name,
|
||||
value: metric.value,
|
||||
id: metric.id,
|
||||
});
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Performance Checklist
|
||||
|
||||
| Area | Optimization | Impact |
|
||||
|------|-------------|--------|
|
||||
| Images | Use next/image with priority for LCP | High |
|
||||
| Fonts | Use next/font with display: swap | Medium |
|
||||
| Code | Dynamic imports for heavy components | High |
|
||||
| Data | Parallel fetching with Promise.all | High |
|
||||
| Render | Server Components by default | High |
|
||||
| Cache | Configure revalidate appropriately | Medium |
|
||||
| Bundle | Tree-shake imports, analyze size | Medium |
|
||||
|
||||
### Config Template
|
||||
|
||||
```js
|
||||
// next.config.js
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
remotePatterns: [{ hostname: 'cdn.example.com' }],
|
||||
formats: ['image/avif', 'image/webp'],
|
||||
},
|
||||
experimental: {
|
||||
optimizePackageImports: ['lucide-react'],
|
||||
},
|
||||
headers: async () => [
|
||||
{
|
||||
source: '/(.*)',
|
||||
headers: [
|
||||
{ key: 'X-Content-Type-Options', value: 'nosniff' },
|
||||
{ key: 'X-Frame-Options', value: 'DENY' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
```
|
||||
746
skills/senior-frontend/references/react_patterns.md
Normal file
746
skills/senior-frontend/references/react_patterns.md
Normal file
@@ -0,0 +1,746 @@
|
||||
# React Patterns
|
||||
|
||||
Production-ready patterns for building scalable React applications with TypeScript.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Component Composition](#component-composition)
|
||||
- [Custom Hooks](#custom-hooks)
|
||||
- [State Management](#state-management)
|
||||
- [Performance Patterns](#performance-patterns)
|
||||
- [Error Boundaries](#error-boundaries)
|
||||
- [Anti-Patterns](#anti-patterns)
|
||||
|
||||
---
|
||||
|
||||
## Component Composition
|
||||
|
||||
### Compound Components
|
||||
|
||||
Use compound components when building reusable UI components with multiple related parts.
|
||||
|
||||
```tsx
|
||||
// Compound component pattern for a Select
|
||||
interface SelectContextType {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const SelectContext = createContext<SelectContextType | null>(null);
|
||||
|
||||
function Select({ children, value, onChange }: {
|
||||
children: React.ReactNode;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<SelectContext.Provider value={{ value, onChange }}>
|
||||
<div className="relative">{children}</div>
|
||||
</SelectContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectTrigger({ children }: { children: React.ReactNode }) {
|
||||
const context = useContext(SelectContext);
|
||||
if (!context) throw new Error('SelectTrigger must be used within Select');
|
||||
|
||||
return (
|
||||
<button className="flex items-center gap-2 px-4 py-2 border rounded">
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectOption({ value, children }: { value: string; children: React.ReactNode }) {
|
||||
const context = useContext(SelectContext);
|
||||
if (!context) throw new Error('SelectOption must be used within Select');
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => context.onChange(value)}
|
||||
className={`px-4 py-2 cursor-pointer hover:bg-gray-100 ${
|
||||
context.value === value ? 'bg-blue-50' : ''
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Attach sub-components
|
||||
Select.Trigger = SelectTrigger;
|
||||
Select.Option = SelectOption;
|
||||
|
||||
// Usage
|
||||
<Select value={selected} onChange={setSelected}>
|
||||
<Select.Trigger>Choose option</Select.Trigger>
|
||||
<Select.Option value="a">Option A</Select.Option>
|
||||
<Select.Option value="b">Option B</Select.Option>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Render Props
|
||||
|
||||
Use render props when you need to share behavior with flexible rendering.
|
||||
|
||||
```tsx
|
||||
interface MousePosition {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
function MouseTracker({ render }: { render: (pos: MousePosition) => React.ReactNode }) {
|
||||
const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setPosition({ x: e.clientX, y: e.clientY });
|
||||
};
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||||
}, []);
|
||||
|
||||
return <>{render(position)}</>;
|
||||
}
|
||||
|
||||
// Usage
|
||||
<MouseTracker
|
||||
render={({ x, y }) => (
|
||||
<div>Mouse position: {x}, {y}</div>
|
||||
)}
|
||||
/>
|
||||
```
|
||||
|
||||
### Higher-Order Components (HOC)
|
||||
|
||||
Use HOCs for cross-cutting concerns like authentication or logging.
|
||||
|
||||
```tsx
|
||||
function withAuth<P extends object>(WrappedComponent: React.ComponentType<P>) {
|
||||
return function AuthenticatedComponent(props: P) {
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
if (!user) return <Navigate to="/login" />;
|
||||
|
||||
return <WrappedComponent {...props} />;
|
||||
};
|
||||
}
|
||||
|
||||
// Usage
|
||||
const ProtectedDashboard = withAuth(Dashboard);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Custom Hooks
|
||||
|
||||
### useAsync - Handle async operations
|
||||
|
||||
```tsx
|
||||
interface AsyncState<T> {
|
||||
data: T | null;
|
||||
error: Error | null;
|
||||
status: 'idle' | 'loading' | 'success' | 'error';
|
||||
}
|
||||
|
||||
function useAsync<T>(asyncFn: () => Promise<T>, deps: any[] = []) {
|
||||
const [state, setState] = useState<AsyncState<T>>({
|
||||
data: null,
|
||||
error: null,
|
||||
status: 'idle',
|
||||
});
|
||||
|
||||
const execute = useCallback(async () => {
|
||||
setState({ data: null, error: null, status: 'loading' });
|
||||
try {
|
||||
const data = await asyncFn();
|
||||
setState({ data, error: null, status: 'success' });
|
||||
} catch (error) {
|
||||
setState({ data: null, error: error as Error, status: 'error' });
|
||||
}
|
||||
}, deps);
|
||||
|
||||
useEffect(() => {
|
||||
execute();
|
||||
}, [execute]);
|
||||
|
||||
return { ...state, refetch: execute };
|
||||
}
|
||||
|
||||
// Usage
|
||||
function UserProfile({ userId }: { userId: string }) {
|
||||
const { data: user, status, error, refetch } = useAsync(
|
||||
() => fetchUser(userId),
|
||||
[userId]
|
||||
);
|
||||
|
||||
if (status === 'loading') return <Spinner />;
|
||||
if (status === 'error') return <Error message={error?.message} />;
|
||||
if (!user) return null;
|
||||
|
||||
return <Profile user={user} />;
|
||||
}
|
||||
```
|
||||
|
||||
### useDebounce - Debounce values
|
||||
|
||||
```tsx
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedValue(value), delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
// Usage
|
||||
function SearchInput() {
|
||||
const [query, setQuery] = useState('');
|
||||
const debouncedQuery = useDebounce(query, 300);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedQuery) {
|
||||
searchAPI(debouncedQuery);
|
||||
}
|
||||
}, [debouncedQuery]);
|
||||
|
||||
return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
|
||||
}
|
||||
```
|
||||
|
||||
### useLocalStorage - Persist state
|
||||
|
||||
```tsx
|
||||
function useLocalStorage<T>(key: string, initialValue: T) {
|
||||
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||
if (typeof window === 'undefined') return initialValue;
|
||||
try {
|
||||
const item = window.localStorage.getItem(key);
|
||||
return item ? JSON.parse(item) : initialValue;
|
||||
} catch {
|
||||
return initialValue;
|
||||
}
|
||||
});
|
||||
|
||||
const setValue = useCallback((value: T | ((val: T) => T)) => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
||||
setStoredValue(valueToStore);
|
||||
if (typeof window !== 'undefined') {
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving to localStorage:', error);
|
||||
}
|
||||
}, [key, storedValue]);
|
||||
|
||||
return [storedValue, setValue] as const;
|
||||
}
|
||||
|
||||
// Usage
|
||||
const [theme, setTheme] = useLocalStorage('theme', 'light');
|
||||
```
|
||||
|
||||
### useMediaQuery - Responsive design
|
||||
|
||||
```tsx
|
||||
function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const media = window.matchMedia(query);
|
||||
setMatches(media.matches);
|
||||
|
||||
const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
|
||||
media.addEventListener('change', listener);
|
||||
return () => media.removeEventListener('change', listener);
|
||||
}, [query]);
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
// Usage
|
||||
function ResponsiveNav() {
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
return isMobile ? <MobileNav /> : <DesktopNav />;
|
||||
}
|
||||
```
|
||||
|
||||
### usePrevious - Track previous values
|
||||
|
||||
```tsx
|
||||
function usePrevious<T>(value: T): T | undefined {
|
||||
const ref = useRef<T>();
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = value;
|
||||
}, [value]);
|
||||
|
||||
return ref.current;
|
||||
}
|
||||
|
||||
// Usage
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0);
|
||||
const prevCount = usePrevious(count);
|
||||
|
||||
return (
|
||||
<div>
|
||||
Current: {count}, Previous: {prevCount}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## State Management
|
||||
|
||||
### Context with Reducer
|
||||
|
||||
For complex state that multiple components need to access.
|
||||
|
||||
```tsx
|
||||
// types.ts
|
||||
interface CartItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
interface CartState {
|
||||
items: CartItem[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
type CartAction =
|
||||
| { type: 'ADD_ITEM'; payload: CartItem }
|
||||
| { type: 'REMOVE_ITEM'; payload: string }
|
||||
| { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
|
||||
| { type: 'CLEAR_CART' };
|
||||
|
||||
// reducer.ts
|
||||
function cartReducer(state: CartState, action: CartAction): CartState {
|
||||
switch (action.type) {
|
||||
case 'ADD_ITEM': {
|
||||
const existingItem = state.items.find(i => i.id === action.payload.id);
|
||||
if (existingItem) {
|
||||
return {
|
||||
...state,
|
||||
items: state.items.map(item =>
|
||||
item.id === action.payload.id
|
||||
? { ...item, quantity: item.quantity + 1 }
|
||||
: item
|
||||
),
|
||||
};
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
items: [...state.items, { ...action.payload, quantity: 1 }],
|
||||
};
|
||||
}
|
||||
case 'REMOVE_ITEM':
|
||||
return {
|
||||
...state,
|
||||
items: state.items.filter(i => i.id !== action.payload),
|
||||
};
|
||||
case 'UPDATE_QUANTITY':
|
||||
return {
|
||||
...state,
|
||||
items: state.items.map(item =>
|
||||
item.id === action.payload.id
|
||||
? { ...item, quantity: action.payload.quantity }
|
||||
: item
|
||||
),
|
||||
};
|
||||
case 'CLEAR_CART':
|
||||
return { items: [], total: 0 };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// context.tsx
|
||||
const CartContext = createContext<{
|
||||
state: CartState;
|
||||
dispatch: React.Dispatch<CartAction>;
|
||||
} | null>(null);
|
||||
|
||||
function CartProvider({ children }: { children: React.ReactNode }) {
|
||||
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
|
||||
|
||||
// Compute total whenever items change
|
||||
const stateWithTotal = useMemo(() => ({
|
||||
...state,
|
||||
total: state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
|
||||
}), [state.items]);
|
||||
|
||||
return (
|
||||
<CartContext.Provider value={{ state: stateWithTotal, dispatch }}>
|
||||
{children}
|
||||
</CartContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function useCart() {
|
||||
const context = useContext(CartContext);
|
||||
if (!context) throw new Error('useCart must be used within CartProvider');
|
||||
return context;
|
||||
}
|
||||
```
|
||||
|
||||
### Zustand (Lightweight Alternative)
|
||||
|
||||
```tsx
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
interface AuthStore {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const useAuthStore = create<AuthStore>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
user: null,
|
||||
token: null,
|
||||
login: async (email, password) => {
|
||||
const { user, token } = await authAPI.login(email, password);
|
||||
set({ user, token });
|
||||
},
|
||||
logout: () => set({ user: null, token: null }),
|
||||
}),
|
||||
{ name: 'auth-storage' }
|
||||
)
|
||||
);
|
||||
|
||||
// Usage
|
||||
function Profile() {
|
||||
const { user, logout } = useAuthStore();
|
||||
return user ? <div>{user.name} <button onClick={logout}>Logout</button></div> : null;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Patterns
|
||||
|
||||
### React.memo with Custom Comparison
|
||||
|
||||
```tsx
|
||||
interface ListItemProps {
|
||||
item: { id: string; name: string; count: number };
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
const ListItem = React.memo(
|
||||
function ListItem({ item, onSelect }: ListItemProps) {
|
||||
return (
|
||||
<div onClick={() => onSelect(item.id)}>
|
||||
{item.name} ({item.count})
|
||||
</div>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => {
|
||||
// Only re-render if item data changed
|
||||
return (
|
||||
prevProps.item.id === nextProps.item.id &&
|
||||
prevProps.item.name === nextProps.item.name &&
|
||||
prevProps.item.count === nextProps.item.count
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
### useMemo for Expensive Calculations
|
||||
|
||||
```tsx
|
||||
function DataTable({ data, sortColumn, filterText }: {
|
||||
data: Item[];
|
||||
sortColumn: string;
|
||||
filterText: string;
|
||||
}) {
|
||||
const processedData = useMemo(() => {
|
||||
// Filter
|
||||
let result = data.filter(item =>
|
||||
item.name.toLowerCase().includes(filterText.toLowerCase())
|
||||
);
|
||||
|
||||
// Sort
|
||||
result = [...result].sort((a, b) => {
|
||||
const aVal = a[sortColumn as keyof Item];
|
||||
const bVal = b[sortColumn as keyof Item];
|
||||
return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
|
||||
});
|
||||
|
||||
return result;
|
||||
}, [data, sortColumn, filterText]);
|
||||
|
||||
return (
|
||||
<table>
|
||||
{processedData.map(item => (
|
||||
<tr key={item.id}>{/* ... */}</tr>
|
||||
))}
|
||||
</table>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### useCallback for Stable References
|
||||
|
||||
```tsx
|
||||
function ParentComponent() {
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
|
||||
// Stable reference - won't cause child re-renders
|
||||
const handleItemClick = useCallback((id: string) => {
|
||||
setItems(prev => prev.map(item =>
|
||||
item.id === id ? { ...item, selected: !item.selected } : item
|
||||
));
|
||||
}, []);
|
||||
|
||||
const handleAddItem = useCallback((newItem: Item) => {
|
||||
setItems(prev => [...prev, newItem]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ItemList items={items} onItemClick={handleItemClick} />
|
||||
<AddItemForm onAdd={handleAddItem} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Virtualization for Long Lists
|
||||
|
||||
```tsx
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
|
||||
function VirtualList({ items }: { items: Item[] }) {
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: items.length,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 50, // estimated row height
|
||||
overscan: 5,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={parentRef} className="h-[400px] overflow-auto">
|
||||
<div
|
||||
style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map(virtualRow => (
|
||||
<div
|
||||
key={virtualRow.key}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: `${virtualRow.size}px`,
|
||||
transform: `translateY(${virtualRow.start}px)`,
|
||||
}}
|
||||
>
|
||||
{items[virtualRow.index].name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error Boundaries
|
||||
|
||||
### Class-Based Error Boundary
|
||||
|
||||
```tsx
|
||||
interface ErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
fallback?: React.ReactNode;
|
||||
onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
state: ErrorBoundaryState = { hasError: false, error: null };
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
this.props.onError?.(error, errorInfo);
|
||||
// Log to error reporting service
|
||||
console.error('Error caught:', error, errorInfo);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return this.props.fallback || (
|
||||
<div className="p-4 bg-red-50 border border-red-200 rounded">
|
||||
<h2 className="text-red-800 font-bold">Something went wrong</h2>
|
||||
<p className="text-red-600">{this.state.error?.message}</p>
|
||||
<button
|
||||
onClick={() => this.setState({ hasError: false, error: null })}
|
||||
className="mt-2 px-4 py-2 bg-red-600 text-white rounded"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
<ErrorBoundary
|
||||
fallback={<ErrorFallback />}
|
||||
onError={(error) => trackError(error)}
|
||||
>
|
||||
<MyComponent />
|
||||
</ErrorBoundary>
|
||||
```
|
||||
|
||||
### Suspense with Error Boundary
|
||||
|
||||
```tsx
|
||||
function DataComponent() {
|
||||
return (
|
||||
<ErrorBoundary fallback={<ErrorMessage />}>
|
||||
<Suspense fallback={<LoadingSpinner />}>
|
||||
<AsyncDataLoader />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
### Avoid: Inline Object/Array Creation in JSX
|
||||
|
||||
```tsx
|
||||
// BAD - Creates new object every render, causes re-renders
|
||||
<Component style={{ color: 'red' }} items={[1, 2, 3]} />
|
||||
|
||||
// GOOD - Define outside or use useMemo
|
||||
const style = { color: 'red' };
|
||||
const items = [1, 2, 3];
|
||||
<Component style={style} items={items} />
|
||||
|
||||
// Or with useMemo for dynamic values
|
||||
const style = useMemo(() => ({ color: theme.primary }), [theme.primary]);
|
||||
```
|
||||
|
||||
### Avoid: Index as Key for Dynamic Lists
|
||||
|
||||
```tsx
|
||||
// BAD - Index keys break with reordering/filtering
|
||||
{items.map((item, index) => (
|
||||
<Item key={index} data={item} />
|
||||
))}
|
||||
|
||||
// GOOD - Use stable unique ID
|
||||
{items.map(item => (
|
||||
<Item key={item.id} data={item} />
|
||||
))}
|
||||
```
|
||||
|
||||
### Avoid: Prop Drilling
|
||||
|
||||
```tsx
|
||||
// BAD - Passing props through many levels
|
||||
<App user={user}>
|
||||
<Layout user={user}>
|
||||
<Sidebar user={user}>
|
||||
<UserInfo user={user} />
|
||||
</Sidebar>
|
||||
</Layout>
|
||||
</App>
|
||||
|
||||
// GOOD - Use Context
|
||||
const UserContext = createContext<User | null>(null);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<UserContext.Provider value={user}>
|
||||
<Layout>
|
||||
<Sidebar>
|
||||
<UserInfo />
|
||||
</Sidebar>
|
||||
</Layout>
|
||||
</UserContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function UserInfo() {
|
||||
const user = useContext(UserContext);
|
||||
return <div>{user?.name}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### Avoid: Mutating State Directly
|
||||
|
||||
```tsx
|
||||
// BAD - Mutates state directly
|
||||
const addItem = (item: Item) => {
|
||||
items.push(item); // WRONG
|
||||
setItems(items); // Won't trigger re-render
|
||||
};
|
||||
|
||||
// GOOD - Create new array
|
||||
const addItem = (item: Item) => {
|
||||
setItems(prev => [...prev, item]);
|
||||
};
|
||||
|
||||
// GOOD - For objects
|
||||
const updateUser = (field: string, value: string) => {
|
||||
setUser(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
```
|
||||
|
||||
### Avoid: useEffect for Derived State
|
||||
|
||||
```tsx
|
||||
// BAD - Unnecessary effect and extra render
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setTotal(items.reduce((sum, item) => sum + item.price, 0));
|
||||
}, [items]);
|
||||
|
||||
// GOOD - Compute during render
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const total = items.reduce((sum, item) => sum + item.price, 0);
|
||||
|
||||
// Or useMemo for expensive calculations
|
||||
const total = useMemo(
|
||||
() => items.reduce((sum, item) => sum + item.price, 0),
|
||||
[items]
|
||||
);
|
||||
```
|
||||
407
skills/senior-frontend/scripts/bundle_analyzer.py
Normal file
407
skills/senior-frontend/scripts/bundle_analyzer.py
Normal file
@@ -0,0 +1,407 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Frontend Bundle Analyzer
|
||||
|
||||
Analyzes package.json and project structure for bundle optimization opportunities,
|
||||
heavy dependencies, and best practice recommendations.
|
||||
|
||||
Usage:
|
||||
python bundle_analyzer.py <project_dir>
|
||||
python bundle_analyzer.py . --json
|
||||
python bundle_analyzer.py /path/to/project --verbose
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from typing import Dict, List, Optional, Any, Tuple
|
||||
|
||||
|
||||
# Known heavy packages and their lighter alternatives
|
||||
HEAVY_PACKAGES = {
|
||||
"moment": {
|
||||
"size": "290KB",
|
||||
"alternative": "date-fns (12KB) or dayjs (2KB)",
|
||||
"reason": "Large locale files bundled by default"
|
||||
},
|
||||
"lodash": {
|
||||
"size": "71KB",
|
||||
"alternative": "lodash-es with tree-shaking or individual imports (lodash/get)",
|
||||
"reason": "Full library often imported when only few functions needed"
|
||||
},
|
||||
"jquery": {
|
||||
"size": "87KB",
|
||||
"alternative": "Native DOM APIs or React/Vue patterns",
|
||||
"reason": "Rarely needed in modern frameworks"
|
||||
},
|
||||
"axios": {
|
||||
"size": "14KB",
|
||||
"alternative": "Native fetch API (0KB) or ky (3KB)",
|
||||
"reason": "Fetch API covers most use cases"
|
||||
},
|
||||
"underscore": {
|
||||
"size": "17KB",
|
||||
"alternative": "Native ES6+ methods or lodash-es",
|
||||
"reason": "Most utilities now in standard JavaScript"
|
||||
},
|
||||
"chart.js": {
|
||||
"size": "180KB",
|
||||
"alternative": "recharts (bundled with React) or lightweight-charts",
|
||||
"reason": "Consider if you need all chart types"
|
||||
},
|
||||
"three": {
|
||||
"size": "600KB",
|
||||
"alternative": "None - use dynamic import for 3D features",
|
||||
"reason": "Very large, should be lazy-loaded"
|
||||
},
|
||||
"firebase": {
|
||||
"size": "400KB+",
|
||||
"alternative": "Import specific modules (firebase/auth, firebase/firestore)",
|
||||
"reason": "Modular imports significantly reduce size"
|
||||
},
|
||||
"material-ui": {
|
||||
"size": "Large",
|
||||
"alternative": "shadcn/ui (copy-paste components) or Tailwind",
|
||||
"reason": "Heavy runtime, consider headless alternatives"
|
||||
},
|
||||
"@mui/material": {
|
||||
"size": "Large",
|
||||
"alternative": "shadcn/ui or Radix UI + Tailwind",
|
||||
"reason": "Heavy runtime, consider headless alternatives"
|
||||
},
|
||||
"antd": {
|
||||
"size": "Large",
|
||||
"alternative": "shadcn/ui or Radix UI + Tailwind",
|
||||
"reason": "Heavy runtime, consider headless alternatives"
|
||||
}
|
||||
}
|
||||
|
||||
# Recommended optimizations by package
|
||||
PACKAGE_OPTIMIZATIONS = {
|
||||
"react-icons": "Import individual icons: import { FaHome } from 'react-icons/fa'",
|
||||
"date-fns": "Use tree-shaking: import { format } from 'date-fns'",
|
||||
"@heroicons/react": "Already tree-shakeable, good choice",
|
||||
"lucide-react": "Already tree-shakeable, add to optimizePackageImports in next.config.js",
|
||||
"framer-motion": "Use dynamic import for non-critical animations",
|
||||
"recharts": "Consider lazy loading for dashboard charts",
|
||||
}
|
||||
|
||||
# Development dependencies that should not be in dependencies
|
||||
DEV_ONLY_PACKAGES = [
|
||||
"typescript", "@types/", "eslint", "prettier", "jest", "vitest",
|
||||
"@testing-library", "cypress", "playwright", "storybook", "@storybook",
|
||||
"webpack", "vite", "rollup", "esbuild", "tailwindcss", "postcss",
|
||||
"autoprefixer", "sass", "less", "husky", "lint-staged"
|
||||
]
|
||||
|
||||
|
||||
def load_package_json(project_dir: Path) -> Optional[Dict]:
|
||||
"""Load and parse package.json."""
|
||||
package_path = project_dir / "package.json"
|
||||
if not package_path.exists():
|
||||
return None
|
||||
|
||||
try:
|
||||
with open(package_path) as f:
|
||||
return json.load(f)
|
||||
except json.JSONDecodeError:
|
||||
return None
|
||||
|
||||
|
||||
def analyze_dependencies(package_json: Dict) -> Dict:
|
||||
"""Analyze dependencies for issues."""
|
||||
deps = package_json.get("dependencies", {})
|
||||
dev_deps = package_json.get("devDependencies", {})
|
||||
|
||||
issues = []
|
||||
warnings = []
|
||||
optimizations = []
|
||||
|
||||
# Check for heavy packages
|
||||
for pkg, info in HEAVY_PACKAGES.items():
|
||||
if pkg in deps:
|
||||
issues.append({
|
||||
"package": pkg,
|
||||
"type": "heavy_dependency",
|
||||
"size": info["size"],
|
||||
"alternative": info["alternative"],
|
||||
"reason": info["reason"]
|
||||
})
|
||||
|
||||
# Check for dev dependencies in production
|
||||
for pkg in deps.keys():
|
||||
for dev_pattern in DEV_ONLY_PACKAGES:
|
||||
if dev_pattern in pkg:
|
||||
warnings.append({
|
||||
"package": pkg,
|
||||
"type": "dev_in_production",
|
||||
"message": f"{pkg} should be in devDependencies, not dependencies"
|
||||
})
|
||||
|
||||
# Check for optimization opportunities
|
||||
for pkg in deps.keys():
|
||||
for opt_pkg, opt_tip in PACKAGE_OPTIMIZATIONS.items():
|
||||
if opt_pkg in pkg:
|
||||
optimizations.append({
|
||||
"package": pkg,
|
||||
"tip": opt_tip
|
||||
})
|
||||
|
||||
# Check for outdated React patterns
|
||||
if "prop-types" in deps and ("typescript" in dev_deps or "@types/react" in dev_deps):
|
||||
warnings.append({
|
||||
"package": "prop-types",
|
||||
"type": "redundant",
|
||||
"message": "prop-types is redundant when using TypeScript"
|
||||
})
|
||||
|
||||
# Check for multiple state management libraries
|
||||
state_libs = ["redux", "@reduxjs/toolkit", "mobx", "zustand", "jotai", "recoil", "valtio"]
|
||||
found_state_libs = [lib for lib in state_libs if lib in deps]
|
||||
if len(found_state_libs) > 1:
|
||||
warnings.append({
|
||||
"packages": found_state_libs,
|
||||
"type": "multiple_state_libs",
|
||||
"message": f"Multiple state management libraries found: {', '.join(found_state_libs)}"
|
||||
})
|
||||
|
||||
return {
|
||||
"total_dependencies": len(deps),
|
||||
"total_dev_dependencies": len(dev_deps),
|
||||
"issues": issues,
|
||||
"warnings": warnings,
|
||||
"optimizations": optimizations
|
||||
}
|
||||
|
||||
|
||||
def check_nextjs_config(project_dir: Path) -> Dict:
|
||||
"""Check Next.js configuration for optimizations."""
|
||||
config_paths = [
|
||||
project_dir / "next.config.js",
|
||||
project_dir / "next.config.mjs",
|
||||
project_dir / "next.config.ts"
|
||||
]
|
||||
|
||||
for config_path in config_paths:
|
||||
if config_path.exists():
|
||||
try:
|
||||
content = config_path.read_text()
|
||||
suggestions = []
|
||||
|
||||
# Check for image optimization
|
||||
if "images" not in content:
|
||||
suggestions.append("Configure images.remotePatterns for optimized image loading")
|
||||
|
||||
# Check for package optimization
|
||||
if "optimizePackageImports" not in content:
|
||||
suggestions.append("Add experimental.optimizePackageImports for lucide-react, @heroicons/react")
|
||||
|
||||
# Check for transpilePackages
|
||||
if "transpilePackages" not in content and "swc" not in content:
|
||||
suggestions.append("Consider transpilePackages for monorepo packages")
|
||||
|
||||
return {
|
||||
"found": True,
|
||||
"path": str(config_path),
|
||||
"suggestions": suggestions
|
||||
}
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
return {
|
||||
"found": False,
|
||||
"suggestions": ["Create next.config.js with image and bundle optimizations"]
|
||||
}
|
||||
|
||||
|
||||
def analyze_imports(project_dir: Path) -> Dict:
|
||||
"""Analyze import patterns in source files."""
|
||||
issues = []
|
||||
src_dirs = [project_dir / "src", project_dir / "app", project_dir / "pages"]
|
||||
|
||||
patterns_to_check = [
|
||||
(r"import\s+\*\s+as\s+\w+\s+from\s+['\"]lodash['\"]", "Avoid import * from lodash, use individual imports"),
|
||||
(r"import\s+moment\s+from\s+['\"]moment['\"]", "Consider replacing moment with date-fns or dayjs"),
|
||||
(r"import\s+\{\s*\w+(?:,\s*\w+){5,}\s*\}\s+from\s+['\"]react-icons", "Import icons from specific icon sets (react-icons/fa)"),
|
||||
]
|
||||
|
||||
files_checked = 0
|
||||
for src_dir in src_dirs:
|
||||
if not src_dir.exists():
|
||||
continue
|
||||
|
||||
for ext in ["*.ts", "*.tsx", "*.js", "*.jsx"]:
|
||||
for file_path in src_dir.glob(f"**/{ext}"):
|
||||
if "node_modules" in str(file_path):
|
||||
continue
|
||||
|
||||
files_checked += 1
|
||||
try:
|
||||
content = file_path.read_text()
|
||||
for pattern, message in patterns_to_check:
|
||||
if re.search(pattern, content):
|
||||
issues.append({
|
||||
"file": str(file_path.relative_to(project_dir)),
|
||||
"issue": message
|
||||
})
|
||||
except Exception:
|
||||
continue
|
||||
|
||||
return {
|
||||
"files_checked": files_checked,
|
||||
"issues": issues
|
||||
}
|
||||
|
||||
|
||||
def calculate_score(analysis: Dict) -> Tuple[int, str]:
|
||||
"""Calculate bundle health score."""
|
||||
score = 100
|
||||
|
||||
# Deduct for heavy dependencies
|
||||
score -= len(analysis["dependencies"]["issues"]) * 10
|
||||
|
||||
# Deduct for dev deps in production
|
||||
score -= len([w for w in analysis["dependencies"]["warnings"]
|
||||
if w.get("type") == "dev_in_production"]) * 5
|
||||
|
||||
# Deduct for import issues
|
||||
score -= len(analysis.get("imports", {}).get("issues", [])) * 3
|
||||
|
||||
# Deduct for missing Next.js optimizations
|
||||
if not analysis.get("nextjs", {}).get("found", True):
|
||||
score -= 10
|
||||
|
||||
score = max(0, min(100, score))
|
||||
|
||||
if score >= 90:
|
||||
grade = "A"
|
||||
elif score >= 80:
|
||||
grade = "B"
|
||||
elif score >= 70:
|
||||
grade = "C"
|
||||
elif score >= 60:
|
||||
grade = "D"
|
||||
else:
|
||||
grade = "F"
|
||||
|
||||
return score, grade
|
||||
|
||||
|
||||
def print_report(analysis: Dict) -> None:
|
||||
"""Print human-readable report."""
|
||||
score, grade = calculate_score(analysis)
|
||||
|
||||
print("=" * 60)
|
||||
print("FRONTEND BUNDLE ANALYSIS REPORT")
|
||||
print("=" * 60)
|
||||
print(f"\nBundle Health Score: {score}/100 ({grade})")
|
||||
|
||||
deps = analysis["dependencies"]
|
||||
print(f"\nDependencies: {deps['total_dependencies']} production, {deps['total_dev_dependencies']} dev")
|
||||
|
||||
# Heavy dependencies
|
||||
if deps["issues"]:
|
||||
print("\n--- HEAVY DEPENDENCIES ---")
|
||||
for issue in deps["issues"]:
|
||||
print(f"\n {issue['package']} ({issue['size']})")
|
||||
print(f" Reason: {issue['reason']}")
|
||||
print(f" Alternative: {issue['alternative']}")
|
||||
|
||||
# Warnings
|
||||
if deps["warnings"]:
|
||||
print("\n--- WARNINGS ---")
|
||||
for warning in deps["warnings"]:
|
||||
if "package" in warning:
|
||||
print(f" - {warning['package']}: {warning['message']}")
|
||||
else:
|
||||
print(f" - {warning['message']}")
|
||||
|
||||
# Optimizations
|
||||
if deps["optimizations"]:
|
||||
print("\n--- OPTIMIZATION TIPS ---")
|
||||
for opt in deps["optimizations"]:
|
||||
print(f" - {opt['package']}: {opt['tip']}")
|
||||
|
||||
# Next.js config
|
||||
if "nextjs" in analysis:
|
||||
nextjs = analysis["nextjs"]
|
||||
if nextjs.get("suggestions"):
|
||||
print("\n--- NEXT.JS CONFIG ---")
|
||||
for suggestion in nextjs["suggestions"]:
|
||||
print(f" - {suggestion}")
|
||||
|
||||
# Import issues
|
||||
if analysis.get("imports", {}).get("issues"):
|
||||
print("\n--- IMPORT ISSUES ---")
|
||||
for issue in analysis["imports"]["issues"][:10]: # Limit to 10
|
||||
print(f" - {issue['file']}: {issue['issue']}")
|
||||
|
||||
# Summary
|
||||
print("\n--- RECOMMENDATIONS ---")
|
||||
if score >= 90:
|
||||
print(" Bundle is well-optimized!")
|
||||
elif deps["issues"]:
|
||||
print(" 1. Replace heavy dependencies with lighter alternatives")
|
||||
if deps["warnings"]:
|
||||
print(" 2. Move dev-only packages to devDependencies")
|
||||
if deps["optimizations"]:
|
||||
print(" 3. Apply import optimizations for tree-shaking")
|
||||
|
||||
print("\n" + "=" * 60)
|
||||
|
||||
|
||||
def main():
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Analyze frontend project for bundle optimization opportunities"
|
||||
)
|
||||
parser.add_argument(
|
||||
"project_dir",
|
||||
nargs="?",
|
||||
default=".",
|
||||
help="Project directory to analyze (default: current directory)"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--json",
|
||||
action="store_true",
|
||||
help="Output in JSON format"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--verbose", "-v",
|
||||
action="store_true",
|
||||
help="Include detailed import analysis"
|
||||
)
|
||||
|
||||
args = parser.parse_args()
|
||||
project_dir = Path(args.project_dir).resolve()
|
||||
|
||||
if not project_dir.exists():
|
||||
print(f"Error: Directory not found: {project_dir}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
package_json = load_package_json(project_dir)
|
||||
if not package_json:
|
||||
print("Error: No valid package.json found", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
analysis = {
|
||||
"project": str(project_dir),
|
||||
"dependencies": analyze_dependencies(package_json),
|
||||
"nextjs": check_nextjs_config(project_dir)
|
||||
}
|
||||
|
||||
if args.verbose:
|
||||
analysis["imports"] = analyze_imports(project_dir)
|
||||
|
||||
analysis["score"], analysis["grade"] = calculate_score(analysis)
|
||||
|
||||
if args.json:
|
||||
print(json.dumps(analysis, indent=2))
|
||||
else:
|
||||
print_report(analysis)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
329
skills/senior-frontend/scripts/component_generator.py
Normal file
329
skills/senior-frontend/scripts/component_generator.py
Normal file
@@ -0,0 +1,329 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
React Component Generator
|
||||
|
||||
Generates React/Next.js component files with TypeScript, Tailwind CSS,
|
||||
and optional test files following best practices.
|
||||
|
||||
Usage:
|
||||
python component_generator.py Button --dir src/components/ui
|
||||
python component_generator.py ProductCard --type client --with-test
|
||||
python component_generator.py UserProfile --type server --with-story
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import os
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from datetime import datetime
|
||||
|
||||
|
||||
# Component templates
|
||||
TEMPLATES = {
|
||||
"client": '''\'use client\';
|
||||
|
||||
import {{ useState }} from 'react';
|
||||
import {{ cn }} from '@/lib/utils';
|
||||
|
||||
interface {name}Props {{
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}}
|
||||
|
||||
export function {name}({{ className, children }}: {name}Props) {{
|
||||
return (
|
||||
<div className={{cn('', className)}}>
|
||||
{{children}}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
''',
|
||||
|
||||
"server": '''import {{ cn }} from '@/lib/utils';
|
||||
|
||||
interface {name}Props {{
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}}
|
||||
|
||||
export async function {name}({{ className, children }}: {name}Props) {{
|
||||
return (
|
||||
<div className={{cn('', className)}}>
|
||||
{{children}}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
''',
|
||||
|
||||
"hook": '''import {{ useState, useEffect, useCallback }} from 'react';
|
||||
|
||||
interface Use{name}Options {{
|
||||
// Add options here
|
||||
}}
|
||||
|
||||
interface Use{name}Return {{
|
||||
// Add return type here
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
}}
|
||||
|
||||
export function use{name}(options: Use{name}Options = {{}}): Use{name}Return {{
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {{
|
||||
// Effect logic here
|
||||
}}, []);
|
||||
|
||||
return {{
|
||||
isLoading,
|
||||
error,
|
||||
}};
|
||||
}}
|
||||
''',
|
||||
|
||||
"test": '''import {{ render, screen }} from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {{ {name} }} from './{name}';
|
||||
|
||||
describe('{name}', () => {{
|
||||
it('renders correctly', () => {{
|
||||
render(<{name}>Test content</{name}>);
|
||||
expect(screen.getByText('Test content')).toBeInTheDocument();
|
||||
}});
|
||||
|
||||
it('applies custom className', () => {{
|
||||
render(<{name} className="custom-class">Content</{name}>);
|
||||
expect(screen.getByText('Content').parentElement).toHaveClass('custom-class');
|
||||
}});
|
||||
|
||||
// Add more tests here
|
||||
}});
|
||||
''',
|
||||
|
||||
"story": '''import type {{ Meta, StoryObj }} from '@storybook/react';
|
||||
import {{ {name} }} from './{name}';
|
||||
|
||||
const meta: Meta<typeof {name}> = {{
|
||||
title: 'Components/{name}',
|
||||
component: {name},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {{
|
||||
className: {{
|
||||
control: 'text',
|
||||
description: 'Additional CSS classes',
|
||||
}},
|
||||
}},
|
||||
}};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof {name}>;
|
||||
|
||||
export const Default: Story = {{
|
||||
args: {{
|
||||
children: 'Default content',
|
||||
}},
|
||||
}};
|
||||
|
||||
export const WithCustomClass: Story = {{
|
||||
args: {{
|
||||
className: 'bg-blue-100 p-4',
|
||||
children: 'Styled content',
|
||||
}},
|
||||
}};
|
||||
''',
|
||||
|
||||
"index": '''export {{ {name} }} from './{name}';
|
||||
export type {{ {name}Props }} from './{name}';
|
||||
''',
|
||||
}
|
||||
|
||||
|
||||
def to_pascal_case(name: str) -> str:
|
||||
"""Convert string to PascalCase."""
|
||||
# Handle kebab-case and snake_case
|
||||
words = name.replace('-', '_').split('_')
|
||||
return ''.join(word.capitalize() for word in words)
|
||||
|
||||
|
||||
def to_kebab_case(name: str) -> str:
|
||||
"""Convert PascalCase to kebab-case."""
|
||||
result = []
|
||||
for i, char in enumerate(name):
|
||||
if char.isupper() and i > 0:
|
||||
result.append('-')
|
||||
result.append(char.lower())
|
||||
return ''.join(result)
|
||||
|
||||
|
||||
def generate_component(
|
||||
name: str,
|
||||
output_dir: Path,
|
||||
component_type: str = "client",
|
||||
with_test: bool = False,
|
||||
with_story: bool = False,
|
||||
with_index: bool = True,
|
||||
flat: bool = False,
|
||||
) -> dict:
|
||||
"""Generate component files."""
|
||||
pascal_name = to_pascal_case(name)
|
||||
kebab_name = to_kebab_case(pascal_name)
|
||||
|
||||
# Determine output path
|
||||
if flat:
|
||||
component_dir = output_dir
|
||||
else:
|
||||
component_dir = output_dir / pascal_name
|
||||
|
||||
files_created = []
|
||||
|
||||
# Create directory
|
||||
component_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
# Generate main component file
|
||||
if component_type == "hook":
|
||||
main_file = component_dir / f"use{pascal_name}.ts"
|
||||
template = TEMPLATES["hook"]
|
||||
else:
|
||||
main_file = component_dir / f"{pascal_name}.tsx"
|
||||
template = TEMPLATES[component_type]
|
||||
|
||||
content = template.format(name=pascal_name)
|
||||
main_file.write_text(content)
|
||||
files_created.append(str(main_file))
|
||||
|
||||
# Generate test file
|
||||
if with_test and component_type != "hook":
|
||||
test_file = component_dir / f"{pascal_name}.test.tsx"
|
||||
test_content = TEMPLATES["test"].format(name=pascal_name)
|
||||
test_file.write_text(test_content)
|
||||
files_created.append(str(test_file))
|
||||
|
||||
# Generate story file
|
||||
if with_story and component_type != "hook":
|
||||
story_file = component_dir / f"{pascal_name}.stories.tsx"
|
||||
story_content = TEMPLATES["story"].format(name=pascal_name)
|
||||
story_file.write_text(story_content)
|
||||
files_created.append(str(story_file))
|
||||
|
||||
# Generate index file
|
||||
if with_index and not flat:
|
||||
index_file = component_dir / "index.ts"
|
||||
index_content = TEMPLATES["index"].format(name=pascal_name)
|
||||
index_file.write_text(index_content)
|
||||
files_created.append(str(index_file))
|
||||
|
||||
return {
|
||||
"name": pascal_name,
|
||||
"type": component_type,
|
||||
"directory": str(component_dir),
|
||||
"files": files_created,
|
||||
}
|
||||
|
||||
|
||||
def print_result(result: dict, verbose: bool = False) -> None:
|
||||
"""Print generation result."""
|
||||
print(f"\n{'='*50}")
|
||||
print(f"Component Generated: {result['name']}")
|
||||
print(f"{'='*50}")
|
||||
print(f"Type: {result['type']}")
|
||||
print(f"Directory: {result['directory']}")
|
||||
print(f"\nFiles created:")
|
||||
for file in result['files']:
|
||||
print(f" - {file}")
|
||||
print(f"{'='*50}\n")
|
||||
|
||||
# Print usage hint
|
||||
if result['type'] != 'hook':
|
||||
print("Usage:")
|
||||
print(f" import {{ {result['name']} }} from '@/components/{result['name']}';")
|
||||
print(f"\n <{result['name']}>Content</{result['name']}>")
|
||||
else:
|
||||
print("Usage:")
|
||||
print(f" import {{ use{result['name']} }} from '@/hooks/use{result['name']}';")
|
||||
print(f"\n const {{ isLoading, error }} = use{result['name']}();")
|
||||
|
||||
|
||||
def main():
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Generate React/Next.js components with TypeScript and Tailwind CSS"
|
||||
)
|
||||
parser.add_argument(
|
||||
"name",
|
||||
help="Component name (PascalCase or kebab-case)"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--dir", "-d",
|
||||
default="src/components",
|
||||
help="Output directory (default: src/components)"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--type", "-t",
|
||||
choices=["client", "server", "hook"],
|
||||
default="client",
|
||||
help="Component type (default: client)"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--with-test",
|
||||
action="store_true",
|
||||
help="Generate test file"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--with-story",
|
||||
action="store_true",
|
||||
help="Generate Storybook story file"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--no-index",
|
||||
action="store_true",
|
||||
help="Skip generating index.ts file"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--flat",
|
||||
action="store_true",
|
||||
help="Create files directly in output dir without subdirectory"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--dry-run",
|
||||
action="store_true",
|
||||
help="Show what would be generated without creating files"
|
||||
)
|
||||
parser.add_argument(
|
||||
"--verbose", "-v",
|
||||
action="store_true",
|
||||
help="Enable verbose output"
|
||||
)
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
output_dir = Path(args.dir)
|
||||
pascal_name = to_pascal_case(args.name)
|
||||
|
||||
if args.dry_run:
|
||||
print(f"\nDry run - would generate:")
|
||||
print(f" Component: {pascal_name}")
|
||||
print(f" Type: {args.type}")
|
||||
print(f" Directory: {output_dir / pascal_name if not args.flat else output_dir}")
|
||||
print(f" Test: {'Yes' if args.with_test else 'No'}")
|
||||
print(f" Story: {'Yes' if args.with_story else 'No'}")
|
||||
return
|
||||
|
||||
try:
|
||||
result = generate_component(
|
||||
name=args.name,
|
||||
output_dir=output_dir,
|
||||
component_type=args.type,
|
||||
with_test=args.with_test,
|
||||
with_story=args.with_story,
|
||||
with_index=not args.no_index,
|
||||
flat=args.flat,
|
||||
)
|
||||
print_result(result, args.verbose)
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error: {e}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
1005
skills/senior-frontend/scripts/frontend_scaffolder.py
Normal file
1005
skills/senior-frontend/scripts/frontend_scaffolder.py
Normal file
File diff suppressed because it is too large
Load Diff
250
skills/shadcn/SKILL.md
Normal file
250
skills/shadcn/SKILL.md
Normal file
@@ -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 <component>` 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 `<hr>` or `<div className="border-t">`.
|
||||
- **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 <code>`.
|
||||
|
||||
## 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.
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
// Validation: data-invalid on Field, aria-invalid on the control.
|
||||
<Field data-invalid>
|
||||
<FieldLabel>Email</FieldLabel>
|
||||
<Input aria-invalid />
|
||||
<FieldDescription>Invalid email.</FieldDescription>
|
||||
</Field>
|
||||
|
||||
// Icons in buttons: data-icon, no sizing classes.
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
// Spacing: gap-*, not space-y-*.
|
||||
<div className="flex flex-col gap-4"> // correct
|
||||
<div className="space-y-4"> // wrong
|
||||
|
||||
// Equal dimensions: size-*, not w-* h-*.
|
||||
<Avatar className="size-10"> // correct
|
||||
<Avatar className="w-10 h-10"> // wrong
|
||||
|
||||
// Status colors: Badge variants or semantic tokens, not raw colors.
|
||||
<Badge variant="secondary">+20.1%</Badge> // correct
|
||||
<span className="text-emerald-600">+20.1%</span> // 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 <component>` 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 <component>` 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 <code> --force --reinstall`. Overwrites all components.
|
||||
- **Merge**: `npx shadcn@latest init --preset <code> --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 <code> --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 <component> --dry-run` to see all files that would be affected.
|
||||
2. For each file, run `npx shadcn@latest add <component> --diff <file>` 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
|
||||
5
skills/shadcn/agents/openai.yml
Normal file
5
skills/shadcn/agents/openai.yml
Normal file
@@ -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"
|
||||
BIN
skills/shadcn/assets/shadcn-small.png
Normal file
BIN
skills/shadcn/assets/shadcn-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
skills/shadcn/assets/shadcn.png
Normal file
BIN
skills/shadcn/assets/shadcn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
255
skills/shadcn/cli.md
Normal file
255
skills/shadcn/cli.md
Normal file
@@ -0,0 +1,255 @@
|
||||
# shadcn CLI Reference
|
||||
|
||||
Configuration is read from `components.json`.
|
||||
|
||||
> **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 <template>` | `-t` | Template (next, start, vite, next-monorepo, react-router) | — |
|
||||
| `--preset [name]` | `-p` | Preset configuration (named, code, or URL) | — |
|
||||
| `--yes` | `-y` | Skip confirmation prompt | `true` |
|
||||
| `--defaults` | `-d` | Use defaults (`--template=next --preset=base-nova`) | `false` |
|
||||
| `--force` | `-f` | Force overwrite existing configuration | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
| `--name <name>` | `-n` | Name for new project | — |
|
||||
| `--silent` | `-s` | Mute output | `false` |
|
||||
| `--rtl` | | Enable RTL support | — |
|
||||
| `--reinstall` | | Re-install existing UI components | `false` |
|
||||
| `--monorepo` | | Scaffold a monorepo project | — |
|
||||
| `--no-monorepo` | | Skip the monorepo prompt | — |
|
||||
|
||||
`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
|
||||
|
||||
### `add` — Add components
|
||||
|
||||
> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add [components...] [options]
|
||||
```
|
||||
|
||||
Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| `--yes` | `-y` | Skip confirmation prompt | `false` |
|
||||
| `--overwrite` | `-o` | Overwrite existing files | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
| `--all` | `-a` | Add all available components | `false` |
|
||||
| `--path <path>` | `-p` | Target path for the component | — |
|
||||
| `--silent` | `-s` | Mute output | `false` |
|
||||
| `--dry-run` | | Preview all changes without writing files | `false` |
|
||||
| `--diff [path]` | | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
||||
| `--view [path]` | | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
||||
|
||||
#### Dry-Run Mode
|
||||
|
||||
Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
|
||||
|
||||
```bash
|
||||
# Preview all changes.
|
||||
npx shadcn@latest add button --dry-run
|
||||
|
||||
# Show diffs for all files (top 5).
|
||||
npx shadcn@latest add button --diff
|
||||
|
||||
# Show the diff for a specific file.
|
||||
npx shadcn@latest add button --diff button.tsx
|
||||
|
||||
# Show contents for all files (top 5).
|
||||
npx shadcn@latest add button --view
|
||||
|
||||
# Show the full content of a specific file.
|
||||
npx shadcn@latest add button --view button.tsx
|
||||
|
||||
# Works with URLs too.
|
||||
npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
|
||||
|
||||
# CSS diffs.
|
||||
npx shadcn@latest add button --diff globals.css
|
||||
```
|
||||
|
||||
**When to use dry-run:**
|
||||
|
||||
- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
|
||||
- Before overwriting existing components — use `--diff` to preview the changes first.
|
||||
- When the user wants to inspect component source code without installing — use `--view`.
|
||||
- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
|
||||
- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
|
||||
|
||||
> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
|
||||
|
||||
#### Smart Merge from Upstream
|
||||
|
||||
See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
|
||||
|
||||
### `search` — Search registries
|
||||
|
||||
```bash
|
||||
npx shadcn@latest search <registries...> [options]
|
||||
```
|
||||
|
||||
Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ------------------- | ----- | ---------------------- | ------- |
|
||||
| `--query <query>` | `-q` | Search query | — |
|
||||
| `--limit <number>` | `-l` | Max items per registry | `100` |
|
||||
| `--offset <number>` | `-o` | Items to skip | `0` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
### `view` — View item details
|
||||
|
||||
```bash
|
||||
npx shadcn@latest view <items...> [options]
|
||||
```
|
||||
|
||||
Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
|
||||
|
||||
### `docs` — Get component documentation URLs
|
||||
|
||||
```bash
|
||||
npx shadcn@latest docs <components...> [options]
|
||||
```
|
||||
|
||||
Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
|
||||
|
||||
Example output for `npx shadcn@latest docs input button`:
|
||||
|
||||
```
|
||||
base radix
|
||||
|
||||
input
|
||||
docs https://ui.shadcn.com/docs/components/radix/input
|
||||
examples https://raw.githubusercontent.com/.../examples/input-example.tsx
|
||||
|
||||
button
|
||||
docs https://ui.shadcn.com/docs/components/radix/button
|
||||
examples https://raw.githubusercontent.com/.../examples/button-example.tsx
|
||||
```
|
||||
|
||||
Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
|
||||
|
||||
### `diff` — Check for updates
|
||||
|
||||
Do not use this command. Use `npx shadcn@latest add --diff` instead.
|
||||
|
||||
### `info` — Project information
|
||||
|
||||
```bash
|
||||
npx shadcn@latest info [options]
|
||||
```
|
||||
|
||||
Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ------------- | ----- | ----------------- | ------- |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
**Project Info fields:**
|
||||
|
||||
| Field | Type | Meaning |
|
||||
| -------------------- | --------- | ------------------------------------------------------------------ |
|
||||
| `framework` | `string` | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
|
||||
| `frameworkVersion` | `string` | Framework version (e.g. `15.2.4`) |
|
||||
| `isSrcDir` | `boolean` | Whether the project uses a `src/` directory |
|
||||
| `isRSC` | `boolean` | Whether React Server Components are enabled |
|
||||
| `isTsx` | `boolean` | Whether the project uses TypeScript |
|
||||
| `tailwindVersion` | `string` | `"v3"` or `"v4"` |
|
||||
| `tailwindConfigFile` | `string` | Path to the Tailwind config file |
|
||||
| `tailwindCssFile` | `string` | Path to the global CSS file |
|
||||
| `aliasPrefix` | `string` | Import alias prefix (e.g. `@`, `~`, `@/`) |
|
||||
| `packageManager` | `string` | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`) |
|
||||
|
||||
**Components.json fields:**
|
||||
|
||||
| Field | Type | Meaning |
|
||||
| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
|
||||
| `base` | `string` | Primitive library (`radix` or `base`) — determines component APIs and available props |
|
||||
| `style` | `string` | Visual style (e.g. `nova`, `vega`) |
|
||||
| `rsc` | `boolean` | RSC flag from config |
|
||||
| `tsx` | `boolean` | TypeScript flag |
|
||||
| `tailwind.config` | `string` | Tailwind config path |
|
||||
| `tailwind.css` | `string` | Global CSS path — this is where custom CSS variables go |
|
||||
| `iconLibrary` | `string` | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
|
||||
| `aliases.components` | `string` | Component import alias (e.g. `@/components`) |
|
||||
| `aliases.utils` | `string` | Utils import alias (e.g. `@/lib/utils`) |
|
||||
| `aliases.ui` | `string` | UI component alias (e.g. `@/components/ui`) |
|
||||
| `aliases.lib` | `string` | Lib alias (e.g. `@/lib`) |
|
||||
| `aliases.hooks` | `string` | Hooks alias (e.g. `@/hooks`) |
|
||||
| `resolvedPaths` | `object` | Absolute file-system paths for each alias |
|
||||
| `registries` | `object` | Configured custom registries |
|
||||
|
||||
**Links fields:**
|
||||
|
||||
The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
|
||||
|
||||
### `build` — Build a custom registry
|
||||
|
||||
```bash
|
||||
npx shadcn@latest build [registry] [options]
|
||||
```
|
||||
|
||||
Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ----------------- | ----- | ----------------- | ------------ |
|
||||
| `--output <path>` | `-o` | Output directory | `./public/r` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
---
|
||||
|
||||
## Templates
|
||||
|
||||
| Value | Framework | Monorepo support |
|
||||
| -------------- | -------------- | ---------------- |
|
||||
| `next` | Next.js | Yes |
|
||||
| `vite` | Vite | Yes |
|
||||
| `start` | TanStack Start | Yes |
|
||||
| `react-router` | React Router | Yes |
|
||||
| `astro` | Astro | Yes |
|
||||
| `laravel` | Laravel | No |
|
||||
|
||||
All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
|
||||
|
||||
---
|
||||
|
||||
## Presets
|
||||
|
||||
Three ways to specify a preset via `--preset`:
|
||||
|
||||
1. **Named:** `--preset base-nova` or `--preset radix-nova`
|
||||
2. **Code:** `--preset a2r6bw` (base62 string, starts with lowercase `a`)
|
||||
3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
|
||||
|
||||
> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
|
||||
|
||||
## Switching Presets
|
||||
|
||||
Ask the user first: **reinstall**, **merge**, or **skip** existing components?
|
||||
|
||||
- **Re-install** → `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all component files with the new preset styles. Use when the user hasn't customized components.
|
||||
- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
|
||||
- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
|
||||
202
skills/shadcn/customization.md
Normal file
202
skills/shadcn/customization.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# Customization & Theming
|
||||
|
||||
Components reference semantic CSS variable tokens. Change the variables to change every component.
|
||||
|
||||
## Contents
|
||||
|
||||
- How it works (CSS variables → Tailwind utilities → components)
|
||||
- Color variables and OKLCH format
|
||||
- Dark mode setup
|
||||
- Changing the theme (presets, CSS variables)
|
||||
- Adding custom colors (Tailwind v3 and v4)
|
||||
- Border radius
|
||||
- Customizing components (variants, className, wrappers)
|
||||
- Checking for updates
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
|
||||
2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
|
||||
3. Components use these utilities — changing a variable changes all components that reference it.
|
||||
|
||||
---
|
||||
|
||||
## Color Variables
|
||||
|
||||
Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
|
||||
|
||||
| Variable | Purpose |
|
||||
| -------------------------------------------- | -------------------------------- |
|
||||
| `--background` / `--foreground` | Page background and default text |
|
||||
| `--card` / `--card-foreground` | Card surfaces |
|
||||
| `--primary` / `--primary-foreground` | Primary buttons and actions |
|
||||
| `--secondary` / `--secondary-foreground` | Secondary actions |
|
||||
| `--muted` / `--muted-foreground` | Muted/disabled states |
|
||||
| `--accent` / `--accent-foreground` | Hover and accent states |
|
||||
| `--destructive` / `--destructive-foreground` | Error and destructive actions |
|
||||
| `--border` | Default border color |
|
||||
| `--input` | Form input borders |
|
||||
| `--ring` | Focus ring color |
|
||||
| `--chart-1` through `--chart-5` | Chart/data visualization |
|
||||
| `--sidebar-*` | Sidebar-specific colors |
|
||||
| `--surface` / `--surface-foreground` | Secondary surface |
|
||||
|
||||
Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
|
||||
|
||||
---
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
|
||||
|
||||
```tsx
|
||||
import { ThemeProvider } from "next-themes"
|
||||
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Changing the Theme
|
||||
|
||||
```bash
|
||||
# Apply a preset code from ui.shadcn.com.
|
||||
npx shadcn@latest init --preset a2r6bw --force
|
||||
|
||||
# Switch to a named preset.
|
||||
npx shadcn@latest init --preset radix-nova --force
|
||||
npx shadcn@latest init --reinstall # update existing components to match
|
||||
|
||||
# Use a custom theme URL.
|
||||
npx shadcn@latest init --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..." --force
|
||||
```
|
||||
|
||||
Or edit CSS variables directly in `globals.css`.
|
||||
|
||||
---
|
||||
|
||||
## Adding Custom Colors
|
||||
|
||||
Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
|
||||
|
||||
```css
|
||||
/* 1. Define in the global CSS file. */
|
||||
:root {
|
||||
--warning: oklch(0.84 0.16 84);
|
||||
--warning-foreground: oklch(0.28 0.07 46);
|
||||
}
|
||||
.dark {
|
||||
--warning: oklch(0.41 0.11 46);
|
||||
--warning-foreground: oklch(0.99 0.02 95);
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
/* 2a. Register with Tailwind v4 (@theme inline). */
|
||||
@theme inline {
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
}
|
||||
```
|
||||
|
||||
When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
|
||||
|
||||
```js
|
||||
// 2b. Register with Tailwind v3 (tailwind.config.js).
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
warning: "oklch(var(--warning) / <alpha-value>)",
|
||||
"warning-foreground":
|
||||
"oklch(var(--warning-foreground) / <alpha-value>)",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// 3. Use in components.
|
||||
<div className="bg-warning text-warning-foreground">Warning</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Border Radius
|
||||
|
||||
`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
|
||||
|
||||
---
|
||||
|
||||
## Customizing Components
|
||||
|
||||
See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
|
||||
|
||||
Prefer these approaches in order:
|
||||
|
||||
### 1. Built-in variants
|
||||
|
||||
```tsx
|
||||
<Button variant="outline" size="sm">Click</Button>
|
||||
```
|
||||
|
||||
### 2. Tailwind classes via `className`
|
||||
|
||||
```tsx
|
||||
<Card className="max-w-md mx-auto">...</Card>
|
||||
```
|
||||
|
||||
### 3. Add a new variant
|
||||
|
||||
Edit the component source to add a variant via `cva`:
|
||||
|
||||
```tsx
|
||||
// components/ui/button.tsx
|
||||
warning: "bg-warning text-warning-foreground hover:bg-warning/90",
|
||||
```
|
||||
|
||||
### 4. Wrapper components
|
||||
|
||||
Compose shadcn/ui primitives into higher-level components:
|
||||
|
||||
```tsx
|
||||
export function ConfirmDialog({ title, description, onConfirm, children }) {
|
||||
return (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checking for Updates
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button --diff
|
||||
```
|
||||
|
||||
To preview exactly what would change before updating, use `--dry-run` and `--diff`:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button --dry-run # see all affected files
|
||||
npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
|
||||
```
|
||||
|
||||
See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.
|
||||
47
skills/shadcn/evals/evals.json
Normal file
47
skills/shadcn/evals/evals.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"skill_name": "shadcn",
|
||||
"evals": [
|
||||
{
|
||||
"id": 1,
|
||||
"prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as toggle options). Add validation states for required fields.",
|
||||
"expected_output": "A React component using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses FieldGroup and Field components for form layout instead of raw div with space-y",
|
||||
"Uses Switch for independent on/off notification toggles (not looping Button with manual active state)",
|
||||
"Uses data-invalid on Field and aria-invalid on the input control for validation states",
|
||||
"Uses gap-* (e.g. gap-4, gap-6) instead of space-y-* or space-x-* for spacing",
|
||||
"Uses semantic color tokens (e.g. bg-background, text-muted-foreground, text-destructive) instead of raw colors like bg-red-500",
|
||||
"No manual dark: color overrides"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using shadcn/ui with radix-nova preset and tabler icons.",
|
||||
"expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, data-icon on icon buttons, no icon sizing classes, tabler icon imports.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Includes DialogTitle for accessibility (visible or with sr-only class)",
|
||||
"Avatar component includes AvatarFallback",
|
||||
"Icons on buttons use the data-icon attribute (data-icon=\"inline-start\" or data-icon=\"inline-end\")",
|
||||
"No sizing classes on icons inside components (no size-4, w-4, h-4, etc.)",
|
||||
"Uses tabler icons (@tabler/icons-react) instead of lucide-react",
|
||||
"Uses asChild for custom triggers (radix preset)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, percentage change badge, and a loading skeleton state. Using shadcn/ui with base-nova preset and lucide icons.",
|
||||
"expected_output": "A React component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
|
||||
"Uses Skeleton component for loading placeholders instead of custom animate-pulse divs",
|
||||
"Uses Badge component for percentage change instead of custom styled spans",
|
||||
"Uses semantic color tokens instead of raw color values like bg-green-500 or text-red-600",
|
||||
"Uses gap-* instead of space-y-* or space-x-* for spacing",
|
||||
"Uses size-* when width and height are equal instead of separate w-* h-*"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
94
skills/shadcn/mcp.md
Normal file
94
skills/shadcn/mcp.md
Normal file
@@ -0,0 +1,94 @@
|
||||
# shadcn MCP Server
|
||||
|
||||
The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.
|
||||
|
||||
---
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
shadcn mcp # start the MCP server (stdio)
|
||||
shadcn mcp init # write config for your editor
|
||||
```
|
||||
|
||||
Editor config files:
|
||||
|
||||
| Editor | Config file |
|
||||
|--------|------------|
|
||||
| Claude Code | `.mcp.json` |
|
||||
| Cursor | `.cursor/mcp.json` |
|
||||
| VS Code | `.vscode/mcp.json` |
|
||||
| OpenCode | `opencode.json` |
|
||||
| Codex | `~/.codex/config.toml` (manual) |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
|
||||
> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
|
||||
|
||||
### `shadcn:get_project_registries`
|
||||
|
||||
Returns registry names from `components.json`. Errors if no `components.json` exists.
|
||||
|
||||
**Input:** none
|
||||
|
||||
### `shadcn:list_items_in_registries`
|
||||
|
||||
Lists all items from one or more registries.
|
||||
|
||||
**Input:** `registries` (string[]), `limit` (number, optional), `offset` (number, optional)
|
||||
|
||||
### `shadcn:search_items_in_registries`
|
||||
|
||||
Fuzzy search across registries.
|
||||
|
||||
**Input:** `registries` (string[]), `query` (string), `limit` (number, optional), `offset` (number, optional)
|
||||
|
||||
### `shadcn:view_items_in_registries`
|
||||
|
||||
View item details including full file contents.
|
||||
|
||||
**Input:** `items` (string[]) — e.g. `["@shadcn/button", "@shadcn/card"]`
|
||||
|
||||
### `shadcn:get_item_examples_from_registries`
|
||||
|
||||
Find usage examples and demos with source code.
|
||||
|
||||
**Input:** `registries` (string[]), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
|
||||
|
||||
### `shadcn:get_add_command_for_items`
|
||||
|
||||
Returns the CLI install command.
|
||||
|
||||
**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
|
||||
|
||||
### `shadcn:get_audit_checklist`
|
||||
|
||||
Returns a checklist for verifying components (imports, deps, lint, TypeScript).
|
||||
|
||||
**Input:** none
|
||||
|
||||
---
|
||||
|
||||
## Configuring Registries
|
||||
|
||||
Registries are set in `components.json`. The `@shadcn` registry is always built-in.
|
||||
|
||||
```json
|
||||
{
|
||||
"registries": {
|
||||
"@acme": "https://acme.com/r/{name}.json",
|
||||
"@private": {
|
||||
"url": "https://private.com/r/{name}.json",
|
||||
"headers": { "Authorization": "Bearer ${MY_TOKEN}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- Names must start with `@`.
|
||||
- URLs must contain `{name}`.
|
||||
- `${VAR}` references are resolved from environment variables.
|
||||
|
||||
Community registry index: `https://ui.shadcn.com/r/registries.json`
|
||||
306
skills/shadcn/rules/base-vs-radix.md
Normal file
306
skills/shadcn/rules/base-vs-radix.md
Normal file
@@ -0,0 +1,306 @@
|
||||
# Base vs Radix
|
||||
|
||||
API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
|
||||
|
||||
## Contents
|
||||
|
||||
- Composition: asChild vs render
|
||||
- Button / trigger as non-button element
|
||||
- Select (items prop, placeholder, positioning, multiple, object values)
|
||||
- ToggleGroup (type vs multiple)
|
||||
- Slider (scalar vs array)
|
||||
- Accordion (type and defaultValue)
|
||||
|
||||
---
|
||||
|
||||
## Composition: asChild (radix) vs render (base)
|
||||
|
||||
Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger>
|
||||
<div>
|
||||
<Button>Open</Button>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open</Button>
|
||||
</DialogTrigger>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger render={<Button />}>Open</DialogTrigger>
|
||||
```
|
||||
|
||||
This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
|
||||
|
||||
---
|
||||
|
||||
## Button / trigger as non-button element (base only)
|
||||
|
||||
When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
|
||||
|
||||
**Incorrect (base):** missing `nativeButton={false}`.
|
||||
|
||||
```tsx
|
||||
<Button render={<a href="/docs" />}>Read the docs</Button>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Button render={<a href="/docs" />} nativeButton={false}>
|
||||
Read the docs
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Button asChild>
|
||||
<a href="/docs">Read the docs</a>
|
||||
</Button>
|
||||
```
|
||||
|
||||
Same for triggers whose `render` is not a `Button`:
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
|
||||
Pick date
|
||||
</PopoverTrigger>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Select
|
||||
|
||||
**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
const items = [
|
||||
{ label: "Select a fruit", value: null },
|
||||
{ label: "Apple", value: "apple" },
|
||||
{ label: "Banana", value: "banana" },
|
||||
]
|
||||
|
||||
<Select items={items}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{items.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
|
||||
|
||||
**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
<SelectContent alignItemWithTrigger={false} side="bottom">
|
||||
|
||||
// radix.
|
||||
<SelectContent position="popper">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Select — multiple selection and object values (base only)
|
||||
|
||||
Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
|
||||
|
||||
**Correct (base — multiple selection):**
|
||||
|
||||
```tsx
|
||||
<Select items={items} multiple defaultValue={[]}>
|
||||
<SelectTrigger>
|
||||
<SelectValue>
|
||||
{(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
...
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (base — object values):**
|
||||
|
||||
```tsx
|
||||
<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
|
||||
<SelectTrigger>
|
||||
<SelectValue>{(value) => value.name}</SelectValue>
|
||||
</SelectTrigger>
|
||||
...
|
||||
</Select>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ToggleGroup
|
||||
|
||||
Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<ToggleGroup type="single" defaultValue="daily">
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
// Single (no prop needed), defaultValue is always an array.
|
||||
<ToggleGroup defaultValue={["daily"]} spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
// Multi-selection.
|
||||
<ToggleGroup multiple>
|
||||
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
|
||||
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
// Single, defaultValue is a string.
|
||||
<ToggleGroup type="single" defaultValue="daily" spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
// Multi-selection.
|
||||
<ToggleGroup type="multiple">
|
||||
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
|
||||
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Controlled single value:**
|
||||
|
||||
```tsx
|
||||
// base — wrap/unwrap arrays.
|
||||
const [value, setValue] = React.useState("normal")
|
||||
<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
|
||||
|
||||
// radix — plain string.
|
||||
const [value, setValue] = React.useState("normal")
|
||||
<ToggleGroup type="single" value={value} onValueChange={setValue}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Slider
|
||||
|
||||
Base accepts a plain number for a single thumb. Radix always requires an array.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={[50]} max={100} step={1} />
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={50} max={100} step={1} />
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={[50]} max={100} step={1} />
|
||||
```
|
||||
|
||||
Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
const [value, setValue] = React.useState([0.3, 0.7])
|
||||
<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
|
||||
|
||||
// radix.
|
||||
const [value, setValue] = React.useState([0.3, 0.7])
|
||||
<Slider value={value} onValueChange={setValue} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accordion
|
||||
|
||||
Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Accordion type="single" collapsible defaultValue="item-1">
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Accordion defaultValue={["item-1"]}>
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
// Multi-select.
|
||||
<Accordion multiple defaultValue={["item-1", "item-2"]}>
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
<AccordionItem value="item-2">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Accordion type="single" collapsible defaultValue="item-1">
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
195
skills/shadcn/rules/composition.md
Normal file
195
skills/shadcn/rules/composition.md
Normal file
@@ -0,0 +1,195 @@
|
||||
# Component Composition
|
||||
|
||||
## Contents
|
||||
|
||||
- Items always inside their Group component
|
||||
- Callouts use Alert
|
||||
- Empty states use Empty component
|
||||
- Toast notifications use sonner
|
||||
- Choosing between overlay components
|
||||
- Dialog, Sheet, and Drawer always need a Title
|
||||
- Card structure
|
||||
- Button has no isPending or isLoading prop
|
||||
- TabsTrigger must be inside TabsList
|
||||
- Avatar always needs AvatarFallback
|
||||
- Use Separator instead of raw hr or border divs
|
||||
- Use Skeleton for loading placeholders
|
||||
- Use Badge instead of custom styled spans
|
||||
|
||||
---
|
||||
|
||||
## Items always inside their Group component
|
||||
|
||||
Never render items directly inside the content container.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<SelectContent>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
This applies to all group-based components:
|
||||
|
||||
| Item | Group |
|
||||
|------|-------|
|
||||
| `SelectItem`, `SelectLabel` | `SelectGroup` |
|
||||
| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
|
||||
| `MenubarItem` | `MenubarGroup` |
|
||||
| `ContextMenuItem` | `ContextMenuGroup` |
|
||||
| `CommandItem` | `CommandGroup` |
|
||||
|
||||
---
|
||||
|
||||
## Callouts use Alert
|
||||
|
||||
```tsx
|
||||
<Alert>
|
||||
<AlertTitle>Warning</AlertTitle>
|
||||
<AlertDescription>Something needs attention.</AlertDescription>
|
||||
</Alert>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Empty states use Empty component
|
||||
|
||||
```tsx
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
|
||||
<EmptyTitle>No projects yet</EmptyTitle>
|
||||
<EmptyDescription>Get started by creating a new project.</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
<Button>Create Project</Button>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Toast notifications use sonner
|
||||
|
||||
```tsx
|
||||
import { toast } from "sonner"
|
||||
|
||||
toast.success("Changes saved.")
|
||||
toast.error("Something went wrong.")
|
||||
toast("File deleted.", {
|
||||
action: { label: "Undo", onClick: () => undoDelete() },
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Choosing between overlay components
|
||||
|
||||
| Use case | Component |
|
||||
|----------|-----------|
|
||||
| Focused task that requires input | `Dialog` |
|
||||
| Destructive action confirmation | `AlertDialog` |
|
||||
| Side panel with details or filters | `Sheet` |
|
||||
| Mobile-first bottom panel | `Drawer` |
|
||||
| Quick info on hover | `HoverCard` |
|
||||
| Small contextual content on click | `Popover` |
|
||||
|
||||
---
|
||||
|
||||
## Dialog, Sheet, and Drawer always need a Title
|
||||
|
||||
`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
|
||||
|
||||
```tsx
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Profile</DialogTitle>
|
||||
<DialogDescription>Update your profile.</DialogDescription>
|
||||
</DialogHeader>
|
||||
...
|
||||
</DialogContent>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Card structure
|
||||
|
||||
Use full composition — don't dump everything into `CardContent`:
|
||||
|
||||
```tsx
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Team Members</CardTitle>
|
||||
<CardDescription>Manage your team.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>...</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Invite</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Button has no isPending or isLoading prop
|
||||
|
||||
Compose with `Spinner` + `data-icon` + `disabled`:
|
||||
|
||||
```tsx
|
||||
<Button disabled>
|
||||
<Spinner data-icon="inline-start" />
|
||||
Saving...
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TabsTrigger must be inside TabsList
|
||||
|
||||
Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
|
||||
|
||||
```tsx
|
||||
<Tabs defaultValue="account">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="account">...</TabsContent>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Avatar always needs AvatarFallback
|
||||
|
||||
Always include `AvatarFallback` for when the image fails to load:
|
||||
|
||||
```tsx
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatar.png" alt="User" />
|
||||
<AvatarFallback>JD</AvatarFallback>
|
||||
</Avatar>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Use existing components instead of custom markup
|
||||
|
||||
| Instead of | Use |
|
||||
|---|---|
|
||||
| `<hr>` or `<div className="border-t">` | `<Separator />` |
|
||||
| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
|
||||
| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |
|
||||
192
skills/shadcn/rules/forms.md
Normal file
192
skills/shadcn/rules/forms.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# Forms & Inputs
|
||||
|
||||
## Contents
|
||||
|
||||
- Forms use FieldGroup + Field
|
||||
- InputGroup requires InputGroupInput/InputGroupTextarea
|
||||
- Buttons inside inputs use InputGroup + InputGroupAddon
|
||||
- Option sets (2–7 choices) use ToggleGroup
|
||||
- FieldSet + FieldLegend for grouping related fields
|
||||
- Field validation and disabled states
|
||||
|
||||
---
|
||||
|
||||
## Forms use FieldGroup + Field
|
||||
|
||||
Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
|
||||
|
||||
```tsx
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" type="email" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Input id="password" type="password" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
```
|
||||
|
||||
Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
|
||||
|
||||
**Choosing form controls:**
|
||||
|
||||
- Simple text input → `Input`
|
||||
- Dropdown with predefined options → `Select`
|
||||
- Searchable dropdown → `Combobox`
|
||||
- Native HTML select (no JS) → `native-select`
|
||||
- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
|
||||
- Single choice from few options → `RadioGroup`
|
||||
- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
|
||||
- OTP/verification code → `InputOTP`
|
||||
- Multi-line text → `Textarea`
|
||||
|
||||
---
|
||||
|
||||
## InputGroup requires InputGroupInput/InputGroupTextarea
|
||||
|
||||
Never use raw `Input` or `Textarea` inside an `InputGroup`.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<InputGroup>
|
||||
<Input placeholder="Search..." />
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupInput placeholder="Search..." />
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Buttons inside inputs use InputGroup + InputGroupAddon
|
||||
|
||||
Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="relative">
|
||||
<Input placeholder="Search..." className="pr-10" />
|
||||
<Button className="absolute right-0 top-0" size="icon">
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupInput placeholder="Search..." />
|
||||
<InputGroupAddon>
|
||||
<Button size="icon">
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Option sets (2–7 choices) use ToggleGroup
|
||||
|
||||
Don't manually loop `Button` components with active state.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
const [selected, setSelected] = useState("daily")
|
||||
|
||||
<div className="flex gap-2">
|
||||
{["daily", "weekly", "monthly"].map((option) => (
|
||||
<Button
|
||||
key={option}
|
||||
variant={selected === option ? "default" : "outline"}
|
||||
onClick={() => setSelected(option)}
|
||||
>
|
||||
{option}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
|
||||
|
||||
<ToggleGroup spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
<ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
Combine with `Field` for labelled toggle groups:
|
||||
|
||||
```tsx
|
||||
<Field orientation="horizontal">
|
||||
<FieldTitle id="theme-label">Theme</FieldTitle>
|
||||
<ToggleGroup aria-labelledby="theme-label" spacing={2}>
|
||||
<ToggleGroupItem value="light">Light</ToggleGroupItem>
|
||||
<ToggleGroupItem value="dark">Dark</ToggleGroupItem>
|
||||
<ToggleGroupItem value="system">System</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</Field>
|
||||
```
|
||||
|
||||
> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
|
||||
|
||||
---
|
||||
|
||||
## FieldSet + FieldLegend for grouping related fields
|
||||
|
||||
Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
|
||||
|
||||
```tsx
|
||||
<FieldSet>
|
||||
<FieldLegend variant="label">Preferences</FieldLegend>
|
||||
<FieldDescription>Select all that apply.</FieldDescription>
|
||||
<FieldGroup className="gap-3">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="dark" />
|
||||
<FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Field validation and disabled states
|
||||
|
||||
Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
|
||||
|
||||
```tsx
|
||||
// Invalid.
|
||||
<Field data-invalid>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" aria-invalid />
|
||||
<FieldDescription>Invalid email address.</FieldDescription>
|
||||
</Field>
|
||||
|
||||
// Disabled.
|
||||
<Field data-disabled>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" disabled />
|
||||
</Field>
|
||||
```
|
||||
|
||||
Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
|
||||
101
skills/shadcn/rules/icons.md
Normal file
101
skills/shadcn/rules/icons.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# Icons
|
||||
|
||||
**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
|
||||
|
||||
---
|
||||
|
||||
## Icons in Button use data-icon attribute
|
||||
|
||||
Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon className="mr-2 size-4" />
|
||||
Search
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start"/>
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
Next
|
||||
<ArrowRightIcon data-icon="inline-end"/>
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No sizing classes on icons inside components
|
||||
|
||||
Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon className="size-4" data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<SettingsIcon className="mr-2 size-4" />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<SettingsIcon />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pass icons as component objects, not string keys
|
||||
|
||||
Use `icon={CheckIcon}`, not a string key to a lookup map.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
const iconMap = {
|
||||
check: CheckIcon,
|
||||
alert: AlertIcon,
|
||||
}
|
||||
|
||||
function StatusBadge({ icon }: { icon: string }) {
|
||||
const Icon = iconMap[icon]
|
||||
return <Icon />
|
||||
}
|
||||
|
||||
<StatusBadge icon="check" />
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
|
||||
return <Icon />
|
||||
}
|
||||
|
||||
<StatusBadge icon={CheckIcon} />
|
||||
```
|
||||
162
skills/shadcn/rules/styling.md
Normal file
162
skills/shadcn/rules/styling.md
Normal file
@@ -0,0 +1,162 @@
|
||||
# Styling & Customization
|
||||
|
||||
See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
|
||||
|
||||
## Contents
|
||||
|
||||
- Semantic colors
|
||||
- Built-in variants first
|
||||
- className for layout only
|
||||
- No space-x-* / space-y-*
|
||||
- Prefer size-* over w-* h-* when equal
|
||||
- Prefer truncate shorthand
|
||||
- No manual dark: color overrides
|
||||
- Use cn() for conditional classes
|
||||
- No manual z-index on overlay components
|
||||
|
||||
---
|
||||
|
||||
## Semantic colors
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="bg-blue-500 text-white">
|
||||
<p className="text-gray-600">Secondary text</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<div className="bg-primary text-primary-foreground">
|
||||
<p className="text-muted-foreground">Secondary text</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No raw color values for status/state indicators
|
||||
|
||||
For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<span className="text-emerald-600">+20.1%</span>
|
||||
<span className="text-green-500">Active</span>
|
||||
<span className="text-red-600">-3.2%</span>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Badge variant="secondary">+20.1%</Badge>
|
||||
<Badge>Active</Badge>
|
||||
<span className="text-destructive">-3.2%</span>
|
||||
```
|
||||
|
||||
If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
|
||||
|
||||
---
|
||||
|
||||
## Built-in variants first
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button className="border border-input bg-transparent hover:bg-accent">
|
||||
Click me
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button variant="outline">Click me</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## className for layout only
|
||||
|
||||
Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Card className="bg-blue-100 text-blue-900 font-bold">
|
||||
<CardContent>Dashboard</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Card className="max-w-md mx-auto">
|
||||
<CardContent>Dashboard</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
To customize a component's appearance, prefer these approaches in order:
|
||||
1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
|
||||
2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
|
||||
3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
|
||||
|
||||
---
|
||||
|
||||
## No space-x-* / space-y-*
|
||||
|
||||
Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
|
||||
|
||||
```tsx
|
||||
<div className="flex flex-col gap-4">
|
||||
<Input />
|
||||
<Input />
|
||||
<Button>Submit</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prefer size-* over w-* h-* when equal
|
||||
|
||||
`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
|
||||
|
||||
---
|
||||
|
||||
## Prefer truncate shorthand
|
||||
|
||||
`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
|
||||
|
||||
---
|
||||
|
||||
## No manual dark: color overrides
|
||||
|
||||
Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
|
||||
|
||||
---
|
||||
|
||||
## Use cn() for conditional classes
|
||||
|
||||
Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No manual z-index on overlay components
|
||||
|
||||
`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
|
||||
@@ -10299,6 +10299,16 @@
|
||||
"source": "community",
|
||||
"date_added": "2026-02-27"
|
||||
},
|
||||
{
|
||||
"id": "senior-frontend",
|
||||
"path": "skills/senior-frontend",
|
||||
"category": "uncategorized",
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"id": "senior-fullstack",
|
||||
"path": "skills/senior-fullstack",
|
||||
@@ -10489,6 +10499,16 @@
|
||||
"source": "unknown",
|
||||
"date_added": null
|
||||
},
|
||||
{
|
||||
"id": "shadcn",
|
||||
"path": "skills/shadcn",
|
||||
"category": "uncategorized",
|
||||
"name": "shadcn",
|
||||
"description": "Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.",
|
||||
"risk": "safe",
|
||||
"source": "https://github.com/shadcn-ui/ui/tree/main/skills/shadcn",
|
||||
"date_added": "2026-03-07"
|
||||
},
|
||||
{
|
||||
"id": "shader-programming-glsl",
|
||||
"path": "skills/shader-programming-glsl",
|
||||
|
||||
Reference in New Issue
Block a user