{ "name": "TemplateClaw", "description": "Developer Design + Development Template Hub", "version": "1.0.0", "base_url": "https://jeromwolf.github.io/templateclaw", "total": 32, "categories": [ { "name": "dashboard", "count": 4 }, { "name": "project-setup", "count": 7 }, { "name": "dev-methodology", "count": 5 }, { "name": "landing-pages", "count": 5 }, { "name": "components", "count": 8 }, { "name": "refactoring", "count": 3 } ], "generated_at": "2026-03-29T11:46:37.473056+09:00", "usage": { "fetch_catalog": "https://jeromwolf.github.io/templateclaw/api.json", "fetch_full": "https://jeromwolf.github.io/templateclaw/api-full.json", "download_template": "https://jeromwolf.github.io/templateclaw/templates/{filename}" }, "templates": [ { "filename": "admin-dashboard.md", "title": "Admin Dashboard", "description": "Admin panel with sidebar navigation, stats cards, data table, and chart placeholders", "category": "dashboard", "tags": [ "admin", "dashboard", "sidebar", "table", "tailwind" ], "difficulty": "intermediate", "download_url": "https://jeromwolf.github.io/templateclaw/templates/admin-dashboard.md", "content": "# Admin Dashboard\n> Admin panel with sidebar navigation, stats cards, data table, and chart placeholders\n> 사이드바 네비게이션, 통계 카드, 데이터 테이블, 차트 플레이스홀더가 포함된 관리자 대시보드\n\n**Category**: Dashboard | **Tags**: admin, dashboard, sidebar, table, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+------+-------------------------------------------+\n| LOGO | Dashboard Search... [Avatar] |\n+------+-------------------------------------------+\n| | |\n| Home | +------+ +------+ +------+ +------+ |\n| Users| |Users | |Revenue| |Orders| |Growth| |\n| Prods| |12.4K | |$48.2K | |1,832 | |+12% | |\n| Ordrs| +------+ +------+ +------+ +------+ |\n| Set. | |\n| | +--- Users Table ------------------+ |\n| | | Name | Email | Role | Status | A | |\n| | | John | j@... | Admin| Active | . | |\n| | | Jane | j@... | User | Active | . | |\n| | +----------------------------------+ |\n+------+-------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy HTML to index.html\n# 2. Open in browser - responsive sidebar collapses on mobile\n# 3. Replace static data with your API calls\n# Tip: Add Chart.js or ApexCharts for the chart section\n```\n\n## Full Code\n\n```html\n\n\n\n \n \n Admin Dashboard\n \n \n\n\n\n \n \n\n \n
\n \n
\n \n \n
\n \n
JD
\n
\n
\n\n \n
\n

Dashboard

\n\n \n
\n
\n
\n Total Users\n +12%\n
\n
12,421
\n
vs. 11,089 last month
\n
\n
\n
\n Revenue\n +8%\n
\n
$48,230
\n
vs. $44,650 last month
\n
\n
\n
\n Orders\n -3%\n
\n
1,832
\n
vs. 1,889 last month
\n
\n
\n
\n Conversion\n +0.5%\n
\n
3.24%
\n
vs. 2.74% last month
\n
\n
\n\n \n
\n
\n

Revenue Overview

\n \n
\n \n
\n
\n

Chart Placeholder

\n

Add <canvas id=\"chart\"> + Chart.js

\n
\n
\n
\n\n \n
\n
\n

Recent Users

\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameEmailRoleStatusActions
JD
John Doe		john@example.comAdminActive
JS
Jane Smith		jane@example.comEditorActive
BW
Bob Wilson		bob@example.comViewerPending
\n
\n
\n Showing 1-3 of 12,421\n
\n \n \n \n \n \n
\n
\n
\n
\n
\n\n\n\n```\n\n## Customization Guide\n- **Sidebar items**: Add/remove nav items; copy the `` block and change icon SVG + text\n- **Stats cards**: Replace numbers with dynamic data from your API\n- **Chart**: Add `` and create a Chart.js instance targeting a `` element\n- **Table columns**: Modify `` and `` elements to match your data model\n- **Dark mode**: Toggle `dark` class on `` element\n- **Color theme**: Replace `indigo` with your brand color\n\n## 2026 Trend Notes\n- Sidebar + top bar layout remains the standard for admin panels\n- Status badges with colored backgrounds for quick visual scanning\n- Notification bell with count badge for real-time alerts\n- Responsive sidebar that collapses to hamburger on mobile\n- Subtle hover states on table rows improve usability\n" }, { "filename": "agent-integration-guide.md", "title": "Agent Integration Guide", "description": "How to make AI agents automatically use TemplateClaw templates in your projects", "category": "project-setup", "tags": [ "agent", "claude", "cursor", "windsurf", "ai", "integration" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/agent-integration-guide.md", "content": "# Agent Integration Guide\n> How to make AI agents automatically use TemplateClaw templates in your projects\n> AI 에이전트가 프로젝트에서 TemplateClaw 템플릿을 자동으로 사용하도록 설정하는 가이드\n\n**Category**: Project Setup | **Tags**: agent, claude, cursor, windsurf, ai, integration | **Difficulty**: Beginner\n\n## Preview\n```\nYour AI Agent + TemplateClaw\n┌──────────────────────────────────────┐\n│ CLAUDE.md / .cursorrules / rules │\n│ ┌────────────────────────────────┐ │\n│ │ ## Template Resources │ │\n│ │ Catalog: templateclaw/api.json │ │\n│ │ Usage: fetch → find → adapt │ │\n│ └────────────────────────────────┘ │\n│ │\n│ \"Create a dashboard page\" │\n│ ↓ │\n│ Agent fetches catalog │\n│ ↓ │\n│ Finds: analytics-dashboard.md │\n│ ↓ │\n│ Extracts code, adapts to project │\n│ ↓ │\n│ Creates production-ready page │\n└──────────────────────────────────────┘\n```\n\n## Quick Start\n```bash\n# Just add the snippet below to your CLAUDE.md, .cursorrules, or AI config file.\n# Your agent will automatically check TemplateClaw before creating new files.\n# No API keys needed. No dependencies. Just a URL.\n```\n\n## Full Code\n\n````markdown\n# TemplateClaw Agent Integration Guide\n\nThis guide shows how to connect TemplateClaw's template catalog to your AI coding\nagent so it automatically uses high-quality templates when creating new files.\n\n---\n\n## A. CLAUDE.md Snippet (Claude Code / Claude Desktop)\n\nAdd this section to your project's `CLAUDE.md` file:\n\n```markdown\n## Template Resources (TemplateClaw)\n\nWhen creating new components, pages, or project files, check TemplateClaw first:\n\n- **Catalog**: https://jeromwolf.github.io/templateclaw/api.json\n- **Usage**: Fetch the catalog JSON, find relevant template by category/tags,\n download the `.md` file from the URL, extract the code from the\n `## Full Code` section, and adapt it to the current project.\n- **Categories**: Landing Pages, Dashboard, Components, Dev Methodology,\n Project Setup, Refactoring\n- **Format**: Each template is a Markdown file with frontmatter metadata,\n a Preview section, Quick Start instructions, and a Full Code block.\n\n### How to use\n1. Before creating any new page/component from scratch, search the catalog.\n2. If a relevant template exists, download it and adapt the Full Code section.\n3. Preserve the structure but customize colors, content, and functionality.\n4. If no template matches, create from scratch as usual.\n```\n\n---\n\n## B. Cursor Rules Snippet (.cursorrules)\n\nAdd this to your `.cursorrules` file:\n\n```\n# TemplateClaw Integration\n\nWhen the user asks you to create a new page, component, dashboard, or landing page:\n\n1. First, check the TemplateClaw catalog at:\n https://jeromwolf.github.io/templateclaw/api.json\n\n2. The catalog is a JSON array of template objects with fields:\n - name: Template name\n - category: landing-pages | dashboard | components | methodology | setup | refactoring\n - tags: Array of keyword strings\n - description: What the template provides\n - url: Direct download URL for the .md file\n - difficulty: Beginner | Intermediate | Advanced\n\n3. Find the best matching template by category and tags.\n\n4. Download the .md file from the url field.\n\n5. Extract the code from the \"## Full Code\" section (inside the fenced code block).\n\n6. Adapt the extracted code to the user's project:\n - Replace placeholder text with project-specific content\n - Adjust colors/theme to match the existing project\n - Modify component structure as needed\n - Keep the production-quality patterns (responsive, accessible, animated)\n\n7. If no template matches, create from scratch.\n```\n\n---\n\n## C. Windsurf Rules Snippet (.windsurfrules)\n\nAdd this to your `.windsurfrules` file:\n\n```\n# TemplateClaw Template Catalog\n\nBefore creating new UI pages or components from scratch, check the TemplateClaw\ntemplate catalog for a matching starting point.\n\nCatalog URL: https://jeromwolf.github.io/templateclaw/api.json\n\nWorkflow:\n- Fetch the JSON catalog\n- Search by category (landing-pages, dashboard, components, methodology, setup, refactoring)\n or by tags (e.g., \"tailwind\", \"react\", \"saas\", \"admin\")\n- Download the matching .md template file\n- Extract code from the \"## Full Code\" section\n- Adapt to the current project's stack, theme, and requirements\n\nThis saves time and ensures production-quality starting points with:\n- Responsive design (mobile-first)\n- Dark mode support\n- Accessibility basics (ARIA, semantic HTML)\n- Modern CSS animations\n- Clean component structure\n```\n\n---\n\n## D. Generic AI Agent Integration (Python)\n\nFor custom AI agents or automation scripts:\n\n```python\n\"\"\"\nTemplateClaw Agent Integration\nFetch and use templates programmatically in your AI agent pipeline.\n\"\"\"\n\nimport json\nimport urllib.request\nfrom typing import Optional\n\nCATALOG_URL = \"https://jeromwolf.github.io/templateclaw/api.json\"\n\n\ndef fetch_catalog() -> list[dict]:\n \"\"\"Fetch the TemplateClaw template catalog.\"\"\"\n with urllib.request.urlopen(CATALOG_URL) as resp:\n return json.loads(resp.read().decode())\n\n\ndef find_template(\n catalog: list[dict],\n category: Optional[str] = None,\n tags: Optional[list[str]] = None,\n query: Optional[str] = None,\n) -> list[dict]:\n \"\"\"Search templates by category, tags, or free-text query.\"\"\"\n results = catalog\n\n if category:\n results = [t for t in results if t.get(\"category\") == category]\n\n if tags:\n tag_set = set(tag.lower() for tag in tags)\n results = [\n t for t in results\n if tag_set & set(tag.lower() for tag in t.get(\"tags\", []))\n ]\n\n if query:\n q = query.lower()\n results = [\n t for t in results\n if q in t.get(\"name\", \"\").lower()\n or q in t.get(\"description\", \"\").lower()\n or any(q in tag.lower() for tag in t.get(\"tags\", []))\n ]\n\n return results\n\n\ndef download_template(template: dict) -> str:\n \"\"\"Download a template's Markdown content.\"\"\"\n url = template[\"url\"]\n with urllib.request.urlopen(url) as resp:\n return resp.read().decode()\n\n\ndef extract_code(markdown: str) -> str:\n \"\"\"Extract the Full Code section from a template Markdown file.\"\"\"\n marker = \"## Full Code\"\n idx = markdown.find(marker)\n if idx == -1:\n return \"\"\n\n # Find the opening fence (```` or ```)\n rest = markdown[idx + len(marker):]\n fence_start = rest.find(\"```\")\n if fence_start == -1:\n return \"\"\n\n # Determine fence style (``` vs ````)\n fence_pos = idx + len(marker) + fence_start\n fence_char_count = 0\n for ch in rest[fence_start:]:\n if ch == '`':\n fence_char_count += 1\n else:\n break\n\n fence = '`' * fence_char_count\n code_start = rest.find('\\n', fence_start) + 1\n code_end = rest.find(fence, code_start)\n\n if code_end == -1:\n return rest[code_start:].strip()\n\n return rest[code_start:code_end].strip()\n\n\n# ---- Example usage in an AI agent ----\n\ndef agent_create_page(user_request: str) -> str:\n \"\"\"\n Example: AI agent receives \"create a SaaS landing page\"\n and automatically fetches the best template.\n \"\"\"\n catalog = fetch_catalog()\n\n # Try to match by keywords in the user request\n matches = find_template(catalog, query=\"saas\")\n if not matches:\n matches = find_template(catalog, category=\"landing-pages\")\n\n if matches:\n template = matches[0]\n print(f\"Found template: {template['name']}\")\n md_content = download_template(template)\n code = extract_code(md_content)\n print(f\"Extracted {len(code)} chars of production code\")\n # Agent would now adapt this code to the project...\n return code\n\n return \"\" # No template found, create from scratch\n\n\nif __name__ == \"__main__\":\n # Quick test\n catalog = fetch_catalog()\n print(f\"Catalog has {len(catalog)} templates\")\n\n results = find_template(catalog, category=\"dashboard\")\n for t in results:\n print(f\" - {t['name']}: {t['description'][:60]}...\")\n```\n\n---\n\n## E. Example Workflow\n\nHere is a real-world scenario showing how the integration works end-to-end:\n\n### User says: \"Create a new analytics dashboard page\"\n\n**Step 1 — Agent reads CLAUDE.md** and sees the TemplateClaw section.\n\n**Step 2 — Agent fetches the catalog:**\n```\nGET https://jeromwolf.github.io/templateclaw/api.json\n```\n\n**Step 3 — Agent searches** for category \"dashboard\" or tags containing \"analytics\":\n```json\n[\n {\n \"name\": \"Analytics Dashboard\",\n \"category\": \"dashboard\",\n \"tags\": [\"dashboard\", \"analytics\", \"charts\", \"tailwind\", \"dark-mode\"],\n \"description\": \"Data visualization dashboard with charts, KPI cards...\",\n \"url\": \"https://jeromwolf.github.io/templateclaw/content/analytics-dashboard.md\"\n }\n]\n```\n\n**Step 4 — Agent downloads** the `.md` file and extracts the `## Full Code` section.\n\n**Step 5 — Agent adapts** the template:\n- Replaces \"Analytics Dashboard\" with the project's actual page title\n- Swaps placeholder chart data with real data source hooks\n- Adjusts the color scheme to match the project's theme\n- Adds project-specific navigation and authentication\n- Integrates with the project's component library\n\n**Step 6 — Agent creates** `src/pages/analytics.tsx` (or equivalent) with\nproduction-ready code that would have taken hours to build from scratch.\n\n### The result:\n- Responsive layout (mobile + desktop)\n- Dark mode support\n- Animated chart placeholders\n- KPI cards with real structure\n- Clean, accessible HTML\n- Ready for data integration\n\n---\n\n## Tips for Best Results\n\n1. **Be specific in requests**: \"Create a SaaS pricing page\" works better than \"make a page\"\n2. **The agent adapts automatically**: Templates are starting points, not rigid structures\n3. **Stack-agnostic**: Templates use vanilla HTML/CSS/JS by default.\n Agents can convert to React, Vue, Svelte, etc. during adaptation.\n4. **Combine templates**: An agent can merge elements from multiple templates\n (e.g., hero from landing + cards from components)\n5. **Offline fallback**: Download `api.json` once and cache locally for offline use\n\n---\n\n## Catalog API Schema\n\nThe `api.json` file returns an array of objects with this structure:\n\n```json\n{\n \"name\": \"string — Template display name\",\n \"slug\": \"string — URL-safe identifier\",\n \"category\": \"string — landing-pages | dashboard | components | methodology | setup | refactoring\",\n \"tags\": [\"array\", \"of\", \"keyword\", \"strings\"],\n \"description\": \"string — One-line description\",\n \"description_ko\": \"string — Korean description\",\n \"difficulty\": \"string — Beginner | Intermediate | Advanced\",\n \"url\": \"string — Direct URL to download the .md file\"\n}\n```\n````\n" }, { "filename": "agents-md-template.md", "title": "AGENTS.md Template", "description": "AGENTS.md template for documenting codebase for AI agents (architecture, modules, dependencies)", "category": "project-setup", "tags": [ "agents", "ai", "documentation", "codebase", "architecture" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/agents-md-template.md", "content": "# AGENTS.md Template\n> AGENTS.md template for documenting codebase for AI agents (architecture, modules, dependencies)\n> AI 에이전트를 위한 코드베이스 문서화 템플릿 (아키텍처, 모듈, 의존성)\n\n**Category**: Project Setup | **Tags**: agents, ai, documentation, codebase, architecture | **Difficulty**: Beginner\n\n## Preview\n```\nAGENTS.md - Codebase map for AI agents\n├── System Architecture\n├── Module Index (per directory)\n├── Data Flow\n├── Key Abstractions\n└── Gotchas & Known Issues\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below to AGENTS.md in your project root\n# 2. Fill in each section with your codebase details\n# 3. AI agents read this file for deep codebase understanding\n# 4. Update when architecture changes significantly\n```\n\n## Full Code\n\n````markdown\n# AGENTS.md - Codebase Documentation for AI Agents\n\n> This file provides a structured map of the codebase for AI agents.\n> Last updated: [DATE]\n\n---\n\n## System Overview\n\n**Purpose**: [What this system does in 1-2 sentences]\n**Architecture**: [Monolith / Microservices / Serverless / Monorepo]\n**Primary Language**: [TypeScript / Python / Go / etc.]\n**Entry Points**: [Where execution begins]\n\n```\n[User] --> [API Gateway] --> [Service Layer] --> [Database]\n | |\n | +--> [External APIs]\n |\n +--> [WebSocket] --> [Real-time Updates]\n```\n\n---\n\n## Module Index\n\n### `/src/app/` - Application Layer\n| File/Dir | Purpose | Key Exports |\n|----------|---------|-------------|\n| `layout.tsx` | Root layout, providers, global styles | `RootLayout` |\n| `page.tsx` | Home page | `HomePage` |\n| `api/users/route.ts` | User CRUD endpoints | `GET`, `POST` |\n| `api/auth/[...nextauth]/route.ts` | Authentication handler | NextAuth config |\n| `(dashboard)/` | Dashboard route group | Protected pages |\n\n### `/src/services/` - Business Logic\n| File | Purpose | Key Functions |\n|------|---------|---------------|\n| `user-service.ts` | User management logic | `createUser()`, `findUser()`, `updateUser()` |\n| `auth-service.ts` | Authentication & authorization | `verifyToken()`, `hasPermission()` |\n| `billing-service.ts` | Subscription & payment logic | `createSubscription()`, `processPayment()` |\n| `notification-service.ts` | Email & push notifications | `sendEmail()`, `sendPush()` |\n\n### `/src/lib/` - Shared Infrastructure\n| File | Purpose | Key Exports |\n|------|---------|-------------|\n| `db.ts` | Database client (Drizzle ORM) | `db` instance |\n| `auth.ts` | NextAuth configuration | `authOptions` |\n| `redis.ts` | Redis client for caching | `redis` instance |\n| `logger.ts` | Structured logging (Pino) | `logger` |\n| `env.ts` | Environment variable validation | `env` (typed) |\n\n### `/src/components/` - UI Components\n| Dir | Purpose | Component Count |\n|-----|---------|----------------|\n| `ui/` | Primitive components (Button, Input, Card) | ~20 |\n| `features/` | Feature-specific composites | ~15 |\n| `layouts/` | Page layout wrappers | ~5 |\n\n### `/drizzle/` - Database\n| File | Purpose |\n|------|---------|\n| `schema.ts` | Table definitions (source of truth) |\n| `migrations/` | SQL migration files (auto-generated) |\n\n---\n\n## Data Flow\n\n### Request Lifecycle\n```\n1. HTTP Request arrives\n2. Middleware: auth check, rate limiting, logging\n3. API Route: parse input, validate with Zod\n4. Service Layer: business logic, DB queries\n5. Response: serialize, send JSON\n```\n\n### Authentication Flow\n```\n1. User clicks \"Sign in with Google\"\n2. NextAuth redirects to Google OAuth\n3. Callback: Google returns tokens\n4. NextAuth creates/updates user in DB\n5. Session JWT set in cookie\n6. Subsequent requests: JWT verified in middleware\n```\n\n### Data Persistence\n```\nWrite Path: Service -> Drizzle ORM -> PostgreSQL\nRead Path: Service -> Redis Cache (hit?) -> Drizzle ORM -> PostgreSQL\nCache TTL: 5 minutes for user data, 1 hour for static config\n```\n\n---\n\n## Key Abstractions\n\n### Service Pattern\nAll business logic lives in `/src/services/`. Services are:\n- **Framework-agnostic**: No Next.js imports, no React\n- **Testable**: Accept dependencies as parameters\n- **Type-safe**: Input/output typed with Zod schemas\n\n```typescript\n// Pattern:\nexport async function createResource(\n input: CreateResourceInput, // Zod-validated\n ctx: { db: Database; user: User } // Injected dependencies\n): Promise {\n // Business logic here\n}\n```\n\n### Error Handling\nCustom error classes in `src/lib/errors.ts`:\n- `NotFoundError` -> 404\n- `ValidationError` -> 400\n- `UnauthorizedError` -> 401\n- `ForbiddenError` -> 403\n\nAPI routes catch these and return appropriate HTTP status codes.\n\n### Database Patterns\n- All queries go through Drizzle ORM (no raw SQL)\n- Soft deletes: `deleted_at` column (not actual DELETE)\n- Timestamps: `created_at`, `updated_at` auto-managed\n- IDs: `cuid2` format (e.g., `usr_abc123xyz`)\n\n---\n\n## Dependencies Map\n\n```\nsrc/app/api/* -----> src/services/* (business logic)\nsrc/services/* ----> src/lib/db.ts (database)\nsrc/services/* ----> src/lib/redis.ts (caching)\nsrc/app/** -----> src/components/* (UI)\nsrc/components/* --> src/hooks/* (state)\nsrc/lib/env.ts ----> .env (config)\n```\n\n### External Services\n| Service | Used By | Purpose |\n|---------|---------|---------|\n| PostgreSQL | `src/lib/db.ts` | Primary data store |\n| Redis | `src/lib/redis.ts` | Cache, rate limiting |\n| Stripe | `src/services/billing-service.ts` | Payments |\n| Resend | `src/services/notification-service.ts` | Transactional email |\n| PostHog | `src/lib/analytics.ts` | Product analytics |\n\n---\n\n## Gotchas & Known Issues\n\n### Things AI Agents Should Know\n\n1. **Database column naming**: Uses `snake_case` in DB, `camelCase` in TypeScript. Drizzle handles the mapping automatically.\n\n2. **Auth session**: `getServerSession()` must be called in Server Components. Use `useSession()` only in Client Components.\n\n3. **Environment variables**: Client-side env vars must be prefixed with `NEXT_PUBLIC_`. Server-only vars are NOT accessible in browser.\n\n4. **Import paths**: Use `@/` alias (maps to `src/`). Example: `import { db } from '@/lib/db'`\n\n5. **Testing database**: Tests use a separate test database. Run `npm run db:test:setup` before first test run.\n\n6. **Rate limiting**: API routes have rate limiting middleware. Test with `X-RateLimit-*` headers.\n\n7. **Soft deletes**: When querying, always filter `WHERE deleted_at IS NULL` unless explicitly including deleted records.\n\n---\n\n## Conventions\n\n| Area | Convention |\n|------|-----------|\n| Files | `kebab-case.ts` |\n| Components | `PascalCase.tsx` |\n| Functions | `camelCase` |\n| Constants | `SCREAMING_SNAKE_CASE` |\n| DB tables | `snake_case` (plural: `users`, `projects`) |\n| DB columns | `snake_case` |\n| Env vars | `SCREAMING_SNAKE_CASE` |\n| CSS classes | Tailwind utility classes (no custom CSS unless necessary) |\n| Git branches | `feature/`, `fix/`, `chore/` prefix |\n| Commits | Conventional Commits format |\n````\n\n## Customization Guide\n- **Architecture diagram**: Replace the ASCII diagram with your actual system topology\n- **Module index**: Add all directories with their purposes and key exports\n- **Data flow**: Document your specific request lifecycle, auth flow, and caching strategy\n- **Dependencies map**: Show how modules depend on each other\n- **Gotchas**: List every non-obvious thing that an AI agent might get wrong\n- **Update frequency**: Re-generate after major architecture changes\n\n## 2026 Trend Notes\n- AGENTS.md is emerging as the standard for AI agent codebase documentation\n- Module index with key exports helps agents find the right file to edit\n- Data flow diagrams prevent agents from implementing logic in the wrong layer\n- Gotchas section is the highest-ROI content (prevents repeated AI mistakes)\n- Dependency maps help agents understand impact radius of changes\n" }, { "filename": "analytics-dashboard.md", "title": "Analytics Dashboard", "description": "Analytics dashboard with KPI cards, chart areas, date filters, and metric breakdowns", "category": "dashboard", "tags": [ "analytics", "kpi", "charts", "metrics", "tailwind" ], "difficulty": "intermediate", "download_url": "https://jeromwolf.github.io/templateclaw/templates/analytics-dashboard.md", "content": "# Analytics Dashboard\n> Analytics dashboard with KPI cards, chart areas, date filters, and metric breakdowns\n> KPI 카드, 차트 영역, 날짜 필터, 지표 분석이 포함된 애널리틱스 대시보드\n\n**Category**: Dashboard | **Tags**: analytics, kpi, charts, metrics, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+--------------------------------------------------+\n| Analytics [Last 7 Days v] [Export] [Refresh] |\n+--------------------------------------------------+\n| +------+ +-------+ +--------+ +---------+ |\n| |Views | |Users | |Bounce | |Avg Time | |\n| |245K | |12.4K | |42.1% | |3m 24s | |\n| |+18% | |+5.2% | |-2.1% | |+0.8% | |\n| +------+ +-------+ +--------+ +---------+ |\n| |\n| +--- Line Chart (Traffic) ---+ +-- Pie Chart --+ |\n| | | | | |\n| +-----------------------------+ +---------------+ |\n| |\n| +--- Bar Chart (Pages) ------+ +-- Top Pages --+ |\n| | | | /home 42K | |\n| +-----------------------------+ | /about 28K | |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Save as index.html\n# 2. For real charts, add Chart.js: \n# 3. Replace KPI data with your analytics API responses\n```\n\n## Full Code\n\n```html\n\n\n\n \n \n Analytics Dashboard\n \n \n\n\n\n
\n \n
\n
\n

Analytics

\n

Track your key performance metrics

\n
\n
\n \n \n \n
\n
\n\n \n
\n
\n
Page Views
\n
245,831
\n
+18.2%vs last period
\n
\n
\n
\n
Unique Visitors
\n
12,421
\n
+5.2%vs last period
\n
\n
\n
\n
Bounce Rate
\n
42.1%
\n
-2.1%vs last period
\n
\n
\n
\n
Avg. Session
\n
3m 24s
\n
+0.8%vs last period
\n
\n
\n
\n\n \n
\n \n
\n

Traffic Overview

\n \n
\n \n
\n

Traffic Sources

\n \n
\n
Organic42%
\n
Direct28%
\n
Referral18%
\n
Social12%
\n
\n
\n
\n\n \n
\n

Top Pages

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PageViewsUniqueBounceTrend
/home42,38128,43232%+12%
/pricing28,10421,88245%+8%
/docs19,44215,23128%+22%
/blog15,22112,10952%-3%
/signup11,0829,43118%+31%
\n
\n
\n\n \n \n\n\n\n```\n\n## Customization Guide\n- **KPI cards**: Replace hard-coded numbers with `fetch()` calls to your API\n- **Charts**: Modify `data` arrays and `labels` in the Chart.js configuration\n- **Date filter**: Wire up the `\n \n \n \n\n \n
\n
\n
Pipeline Value
\n
$124,500
\n
+18% this month
\n
\n
\n
Active Deals
\n
47
\n
12 new this week
\n
\n
\n
Win Rate
\n
34%
\n
+3% vs last quarter
\n
\n
\n
Avg Deal Size
\n
$8,200
\n
Median: $5,500
\n
\n
\n\n \n
\n \n
\n
\n

Lead (12)

\n $34,200\n
\n
\n
\n
\n

Website Redesign

\n $12,000\n
\n

Acme Corp

\n
\n
JD
John
\n 3 days ago\n
\n
\n
\n
\n

API Integration

\n $8,500\n
\n

TechFlow Inc

\n
\n
SK
Sarah
\n 1 day ago\n
\n
\n
\n
\n\n \n
\n
\n

Qualified (8)

\n $42,000\n
\n
\n
\n
\n

Cloud Migration

\n $25,000\n
\n

GlobalBank Ltd

\n
\n
EnterpriseHot
\n
\n
\n
MP
Maya
\n Today\n
\n
\n
\n
\n\n \n
\n
\n

Proposal (5)

\n $28,500\n
\n
\n
\n
\n

Mobile App MVP

\n $18,000\n
\n

HealthStart Co

\n
Proposal sent 2d ago
\n
\n
JD
John
\n Follow up tomorrow\n
\n
\n
\n
\n\n \n
\n
\n

Won (3)

\n $19,800\n
\n
\n
\n
\n

Dashboard Build

\n $9,800\n
\n

DataViz Solutions

\n
Closed Mar 25
\n
\n
\n
\n
\n\n \n
\n

Recent Activity

\n
\n
\n
✉
\n

John sent proposal to HealthStart Co

Mobile App MVP - $18,000

\n 2h ago\n
\n
\n
☎
\n

Sarah completed call with TechFlow Inc

API Integration - Moved to Qualified

\n 4h ago\n
\n
\n
🏆
\n

Maya closed deal with DataViz Solutions

Dashboard Build - $9,800 won

\n 1d ago\n
\n
\n
\n \n\n\n\n```\n\n## Customization Guide\n- **Pipeline stages**: Add/remove columns (e.g., \"Negotiation\", \"Lost\") by duplicating a column block\n- **Deal cards**: Add fields like probability, next action, tags\n- **Drag and drop**: Add Sortable.js for interactive pipeline management: ``\n- **Activity feed**: Connect to your CRM webhook events\n- **Color coding**: Use border-left colors to indicate deal priority or stage\n- **Revenue forecasting**: Add a weighted pipeline value (deal amount x probability)\n\n## 2026 Trend Notes\n- Kanban-style pipeline board is the standard CRM visualization pattern\n- Horizontal scroll with `overflow-x-auto` handles many pipeline stages on mobile\n- Deal cards with avatar, tags, and time indicators provide context at a glance\n- Activity feed with icon types (email, call, win) follows the timeline pattern\n- KPI row at the top gives immediate executive-level overview\n" }, { "filename": "db-migration.md", "title": "Database Migration Guide", "description": "Database migration guide: schema versioning, rollback strategies, and zero-downtime migrations", "category": "refactoring", "tags": [ "database", "migration", "schema", "rollback", "zero-downtime" ], "difficulty": "advanced", "download_url": "https://jeromwolf.github.io/templateclaw/templates/db-migration.md", "content": "# Database Migration Guide\n> Database migration guide: schema versioning, rollback strategies, and zero-downtime migrations\n> 데이터베이스 마이그레이션 가이드: 스키마 버전 관리, 롤백 전략, 무중단 마이그레이션\n\n**Category**: Refactoring | **Tags**: database, migration, schema, rollback, zero-downtime | **Difficulty**: Advanced\n\n## Preview\n```\nMigration Workflow:\n1. Write migration (up + down)\n2. Review SQL diff\n3. Test on staging\n4. Apply to production (zero-downtime)\n5. Verify and monitor\n```\n\n## Quick Start\n```bash\n# Choose your migration tool:\n\n# Python (Alembic)\npip install alembic\nalembic init migrations\nalembic revision --autogenerate -m \"add users table\"\nalembic upgrade head\n\n# Node.js (Drizzle)\nnpx drizzle-kit generate\nnpx drizzle-kit migrate\n\n# Node.js (Knex)\nnpx knex migrate:make add_users_table\nnpx knex migrate:latest\n\n# Go (golang-migrate)\nmigrate create -ext sql -dir migrations add_users_table\nmigrate -path migrations -database $DATABASE_URL up\n```\n\n## Migration Fundamentals\n\n### Migration File Structure\n\n```\nmigrations/\n├── 001_create_users.sql # or .py, .ts, .js\n├── 002_add_email_index.sql\n├── 003_create_orders.sql\n├── 004_add_user_preferences.sql\n└── 005_rename_email_to_login.sql\n```\n\n### Every Migration Has Up + Down\n\n```sql\n-- migrations/001_create_users.sql\n\n-- UP: Apply this migration\nCREATE TABLE users (\n id UUID PRIMARY KEY DEFAULT gen_random_uuid(),\n email VARCHAR(255) NOT NULL UNIQUE,\n name VARCHAR(255) NOT NULL,\n role VARCHAR(50) NOT NULL DEFAULT 'viewer',\n created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),\n updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()\n);\n\nCREATE INDEX idx_users_email ON users(email);\nCREATE INDEX idx_users_role ON users(role);\n\n-- DOWN: Rollback this migration\nDROP TABLE IF EXISTS users;\n```\n\n```sql\n-- migrations/002_add_user_preferences.sql\n\n-- UP\nALTER TABLE users ADD COLUMN preferences JSONB DEFAULT '{}';\nALTER TABLE users ADD COLUMN last_login_at TIMESTAMPTZ;\n\n-- DOWN\nALTER TABLE users DROP COLUMN IF EXISTS preferences;\nALTER TABLE users DROP COLUMN IF EXISTS last_login_at;\n```\n\n## Zero-Downtime Migration Patterns\n\n### Pattern 1: Add Column (Safe)\n\nAdding a nullable column is always safe (no lock, no rewrite).\n\n```sql\n-- SAFE: Add nullable column\nALTER TABLE users ADD COLUMN phone VARCHAR(20);\n\n-- SAFE: Add column with default (PostgreSQL 11+ doesn't rewrite table)\nALTER TABLE users ADD COLUMN is_active BOOLEAN DEFAULT true;\n```\n\n### Pattern 2: Rename Column (3-Step Deploy)\n\nRenaming a column requires a multi-step approach to avoid downtime.\n\n```sql\n-- Step 1 (Deploy 1): Add new column, copy data\nALTER TABLE users ADD COLUMN login_email VARCHAR(255);\nUPDATE users SET login_email = email;\nCREATE INDEX idx_users_login_email ON users(login_email);\n\n-- Step 2 (Deploy 2): Update application to use both columns\n-- Write to BOTH old and new columns\n-- Read from NEW column\n\n-- Step 3 (Deploy 3): Drop old column after all code uses new column\nALTER TABLE users DROP COLUMN email;\nALTER TABLE users RENAME COLUMN login_email TO email;\n```\n\n### Pattern 3: Add NOT NULL Constraint (3-Step)\n\n```sql\n-- Step 1: Add column as nullable with default\nALTER TABLE users ADD COLUMN department VARCHAR(100) DEFAULT 'general';\n\n-- Step 2: Backfill existing rows (in batches to avoid long locks)\nUPDATE users SET department = 'general'\nWHERE department IS NULL\nLIMIT 1000; -- Repeat until all rows updated\n\n-- Step 3: Add NOT NULL constraint after all rows have values\nALTER TABLE users ALTER COLUMN department SET NOT NULL;\n```\n\n### Pattern 4: Create Index Concurrently\n\n```sql\n-- UNSAFE (locks table during build):\nCREATE INDEX idx_users_name ON users(name);\n\n-- SAFE (doesn't lock reads or writes):\nCREATE INDEX CONCURRENTLY idx_users_name ON users(name);\n\n-- Note: CONCURRENTLY cannot run inside a transaction\n```\n\n### Pattern 5: Large Table Changes (Expand/Contract)\n\nFor large tables (1M+ rows), use the expand-contract pattern:\n\n```\nPhase 1 (Expand):\n - Add new column/table\n - Dual-write: old AND new\n - Backfill old data to new structure\n\nPhase 2 (Contract):\n - Switch reads to new structure\n - Stop writing to old structure\n - Drop old column/table\n```\n\n## Rollback Strategies\n\n### Automatic Rollback Script\n\n```bash\n#!/bin/bash\n# rollback.sh - Rollback last migration\n\nset -e\n\necho \"Rolling back last migration...\"\n\n# Alembic (Python)\nalembic downgrade -1\n\n# Knex (Node.js)\n# npx knex migrate:rollback\n\n# golang-migrate\n# migrate -path migrations -database $DATABASE_URL down 1\n\necho \"Rollback complete. Verify data integrity:\"\necho \" psql -c 'SELECT count(*) FROM users;'\"\n```\n\n### Pre-Migration Checklist\n\n```markdown\n## Before Running Migration\n\n- [ ] Migration tested on staging with production-like data\n- [ ] DOWN migration tested (actually rolled back and verified)\n- [ ] Backup taken: `pg_dump -Fc myapp > backup_$(date +%Y%m%d).dump`\n- [ ] Application code compatible with both old and new schema\n- [ ] No long-running transactions that could block migration\n- [ ] Monitoring dashboards open (error rate, latency, DB metrics)\n- [ ] Team notified in Slack/Discord\n- [ ] Rollback plan documented and ready\n```\n\n### Recovery Commands\n\n```bash\n# PostgreSQL backup before migration\npg_dump -Fc -h localhost -U postgres myapp > backup_20260328.dump\n\n# Restore from backup (nuclear option)\npg_restore -h localhost -U postgres -d myapp --clean backup_20260328.dump\n\n# Check migration status\nalembic current # Current revision\nalembic history # All revisions\nalembic heads # Latest revision\n\n# Rollback last N migrations\nalembic downgrade -1 # Rollback 1\nalembic downgrade -3 # Rollback 3\nalembic downgrade base # Rollback ALL (dangerous!)\n```\n\n## Migration Rules\n\n| Rule | Description |\n|------|-------------|\n| **Always reversible** | Every UP has a DOWN. Test both directions. |\n| **One change per migration** | Don't mix table creation with data transformation. |\n| **Forward-only in production** | Never edit an applied migration. Create a new one. |\n| **Idempotent** | Use `IF NOT EXISTS` / `IF EXISTS` to handle re-runs. |\n| **No data loss** | Never DROP a column with data until verified unnecessary. |\n| **Batch large updates** | Update 1,000 rows at a time, not millions at once. |\n| **Test with production data** | Staging should mirror production volume. |\n| **Lock monitoring** | Watch for long-running locks during migration. |\n\n## Common Mistakes\n\n| Mistake | Consequence | Prevention |\n|---------|-------------|------------|\n| Adding NOT NULL without default | Table locked during rewrite | Add as nullable first, then set NOT NULL |\n| Dropping column before code change | Application errors | Remove code references first, then drop column |\n| Running migration during peak traffic | Timeouts, locks | Schedule during low-traffic window |\n| No backup before migration | Data loss on failure | Always `pg_dump` before risky migrations |\n| Editing applied migration | Schema drift between environments | Create new migration instead |\n| Large UPDATE without batching | Transaction log bloat, locks | Batch in 1,000-row chunks |\n\n## Tool-Specific Examples\n\n### Alembic (Python/SQLAlchemy)\n\n```python\n# migrations/versions/001_create_users.py\nfrom alembic import op\nimport sqlalchemy as sa\n\ndef upgrade():\n op.create_table(\n 'users',\n sa.Column('id', sa.UUID(), primary_key=True, server_default=sa.text('gen_random_uuid()')),\n sa.Column('email', sa.String(255), nullable=False, unique=True),\n sa.Column('name', sa.String(255), nullable=False),\n sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.func.now()),\n )\n op.create_index('idx_users_email', 'users', ['email'])\n\ndef downgrade():\n op.drop_table('users')\n```\n\n### Drizzle (TypeScript)\n\n```typescript\n// drizzle/schema.ts\nimport { pgTable, uuid, varchar, timestamp } from 'drizzle-orm/pg-core';\n\nexport const users = pgTable('users', {\n id: uuid('id').primaryKey().defaultRandom(),\n email: varchar('email', { length: 255 }).notNull().unique(),\n name: varchar('name', { length: 255 }).notNull(),\n createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),\n});\n\n// Generate migration: npx drizzle-kit generate\n// Apply migration: npx drizzle-kit migrate\n```\n\n## Customization Guide\n- **ORM**: Replace examples with your ORM (Django, TypeORM, Prisma, GORM)\n- **Database**: Adjust SQL syntax for MySQL, SQLite, or MongoDB\n- **CI integration**: Add migration check to CI (`alembic check` or `drizzle-kit check`)\n- **Approval process**: Require DBA review for migrations touching large tables\n- **Monitoring**: Add alerting for migration duration exceeding threshold\n\n## 2026 Trend Notes\n- Schema-as-code (Drizzle, Prisma) auto-generates migrations from type definitions\n- Blue-green database deployments enable zero-downtime schema changes\n- PostgreSQL 16+ handles ADD COLUMN with DEFAULT without table rewrite\n- Feature flags control which schema version the application uses during transition\n- Online DDL tools (gh-ost, pt-online-schema-change) for MySQL large table migrations\n" }, { "filename": "docker-compose-template.md", "title": "Docker Compose Template", "description": "Docker Compose setup with web app, PostgreSQL, Redis, and Nginx reverse proxy with health checks", "category": "project-setup", "tags": [ "docker", "compose", "postgresql", "redis", "nginx", "devops" ], "difficulty": "intermediate", "download_url": "https://jeromwolf.github.io/templateclaw/templates/docker-compose-template.md", "content": "# Docker Compose Template\n> Docker Compose setup with web app, PostgreSQL, Redis, and Nginx reverse proxy with health checks\n> 웹앱, PostgreSQL, Redis, Nginx 리버스 프록시 + 헬스 체크가 포함된 Docker Compose 설정\n\n**Category**: Project Setup | **Tags**: docker, compose, postgresql, redis, nginx, devops | **Difficulty**: Intermediate\n\n## Preview\n```\n :80/:443\n |\n [Nginx]\n |\n [Web App] :3000\n / \\\n [PostgreSQL] [Redis]\n :5432 :6379\n```\n\n## Quick Start\n```bash\n# 1. Copy docker-compose.yml and related configs to your project root\n# 2. Create .env file with required variables\n# 3. Run:\ndocker compose up -d\ndocker compose logs -f web\n# 4. Access: http://localhost (via Nginx) or http://localhost:3000 (direct)\n```\n\n## Full Code\n\n### docker-compose.yml\n\n```yaml\n# docker-compose.yml\nversion: \"3.9\"\n\nservices:\n # ============================================\n # Web Application\n # ============================================\n web:\n build:\n context: .\n dockerfile: Dockerfile\n target: production\n container_name: app-web\n restart: unless-stopped\n ports:\n - \"3000:3000\"\n environment:\n NODE_ENV: production\n PORT: 3000\n DATABASE_URL: postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@db:5432/${DB_NAME:-myapp}\n REDIS_URL: redis://redis:6379\n env_file:\n - .env\n depends_on:\n db:\n condition: service_healthy\n redis:\n condition: service_healthy\n healthcheck:\n test: [\"CMD\", \"curl\", \"-f\", \"http://localhost:3000/health\"]\n interval: 30s\n timeout: 10s\n retries: 3\n start_period: 40s\n networks:\n - app-network\n deploy:\n resources:\n limits:\n cpus: \"1.0\"\n memory: 512M\n\n # ============================================\n # PostgreSQL Database\n # ============================================\n db:\n image: postgres:16-alpine\n container_name: app-db\n restart: unless-stopped\n environment:\n POSTGRES_USER: ${DB_USER:-postgres}\n POSTGRES_PASSWORD: ${DB_PASSWORD:-postgres}\n POSTGRES_DB: ${DB_NAME:-myapp}\n ports:\n - \"5432:5432\"\n volumes:\n - postgres_data:/var/lib/postgresql/data\n - ./init.sql:/docker-entrypoint-initdb.d/init.sql:ro\n healthcheck:\n test: [\"CMD-SHELL\", \"pg_isready -U ${DB_USER:-postgres} -d ${DB_NAME:-myapp}\"]\n interval: 10s\n timeout: 5s\n retries: 5\n networks:\n - app-network\n deploy:\n resources:\n limits:\n cpus: \"0.5\"\n memory: 256M\n\n # ============================================\n # Redis Cache\n # ============================================\n redis:\n image: redis:7-alpine\n container_name: app-redis\n restart: unless-stopped\n command: redis-server --appendonly yes --maxmemory 128mb --maxmemory-policy allkeys-lru\n ports:\n - \"6379:6379\"\n volumes:\n - redis_data:/data\n healthcheck:\n test: [\"CMD\", \"redis-cli\", \"ping\"]\n interval: 10s\n timeout: 5s\n retries: 5\n networks:\n - app-network\n deploy:\n resources:\n limits:\n cpus: \"0.25\"\n memory: 128M\n\n # ============================================\n # Nginx Reverse Proxy\n # ============================================\n nginx:\n image: nginx:alpine\n container_name: app-nginx\n restart: unless-stopped\n ports:\n - \"80:80\"\n - \"443:443\"\n volumes:\n - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro\n - ./nginx/certs:/etc/nginx/certs:ro\n depends_on:\n web:\n condition: service_healthy\n healthcheck:\n test: [\"CMD\", \"curl\", \"-f\", \"http://localhost/health\"]\n interval: 30s\n timeout: 5s\n retries: 3\n networks:\n - app-network\n\nvolumes:\n postgres_data:\n driver: local\n redis_data:\n driver: local\n\nnetworks:\n app-network:\n driver: bridge\n```\n\n### Dockerfile (Multi-stage)\n\n```dockerfile\n# Dockerfile\n# Stage 1: Dependencies\nFROM node:20-alpine AS deps\nWORKDIR /app\nCOPY package.json package-lock.json ./\nRUN npm ci --production=false\n\n# Stage 2: Build\nFROM node:20-alpine AS build\nWORKDIR /app\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\nRUN npm run build\n\n# Stage 3: Production\nFROM node:20-alpine AS production\nWORKDIR /app\n\nRUN addgroup --system --gid 1001 nodejs && \\\n adduser --system --uid 1001 appuser\n\nCOPY --from=build --chown=appuser:nodejs /app/.next/standalone ./\nCOPY --from=build --chown=appuser:nodejs /app/.next/static ./.next/static\nCOPY --from=build --chown=appuser:nodejs /app/public ./public\n\nUSER appuser\nEXPOSE 3000\nENV HOSTNAME=0.0.0.0\nCMD [\"node\", \"server.js\"]\n```\n\n### Python Dockerfile Alternative\n\n```dockerfile\n# Dockerfile (Python/FastAPI)\nFROM python:3.12-slim AS base\n\nWORKDIR /app\nRUN adduser --system --uid 1001 appuser\n\nCOPY requirements.txt .\nRUN pip install --no-cache-dir -r requirements.txt\n\nCOPY src/ src/\n\nUSER appuser\nEXPOSE 8000\nCMD [\"uvicorn\", \"src.main:app\", \"--host\", \"0.0.0.0\", \"--port\", \"8000\", \"--workers\", \"4\"]\n```\n\n### Nginx Configuration\n\n```nginx\n# nginx/nginx.conf\nevents {\n worker_connections 1024;\n}\n\nhttp {\n upstream app {\n server web:3000;\n }\n\n # Rate limiting\n limit_req_zone $binary_remote_addr zone=api:10m rate=30r/s;\n\n # Gzip compression\n gzip on;\n gzip_types text/plain text/css application/json application/javascript text/xml;\n gzip_min_length 1000;\n\n server {\n listen 80;\n server_name _;\n\n # Health check endpoint (for Docker)\n location /health {\n access_log off;\n return 200 \"ok\";\n }\n\n # Proxy to app\n location / {\n limit_req zone=api burst=50 nodelay;\n proxy_pass http://app;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header X-Forwarded-Proto $scheme;\n proxy_read_timeout 86400;\n }\n\n # Static files caching\n location /_next/static {\n proxy_pass http://app;\n expires 365d;\n add_header Cache-Control \"public, immutable\";\n }\n }\n}\n```\n\n### Database Init Script\n\n```sql\n-- init.sql (runs on first container creation)\nCREATE EXTENSION IF NOT EXISTS \"uuid-ossp\";\nCREATE EXTENSION IF NOT EXISTS \"pg_trgm\";\n\n-- Create application schema\n-- (Your migration tool should handle actual tables)\n```\n\n### Useful Commands\n\n```bash\n# Start all services\ndocker compose up -d\n\n# View logs\ndocker compose logs -f web\ndocker compose logs -f db\n\n# Restart a single service\ndocker compose restart web\n\n# Run database migrations\ndocker compose exec web npm run db:migrate\n\n# Access PostgreSQL CLI\ndocker compose exec db psql -U postgres -d myapp\n\n# Access Redis CLI\ndocker compose exec redis redis-cli\n\n# Full cleanup (removes volumes too)\ndocker compose down -v\n\n# Rebuild after code changes\ndocker compose build web && docker compose up -d web\n```\n\n## Customization Guide\n- **Ports**: Change exposed ports if 80/3000/5432/6379 conflict with local services\n- **Database**: Replace PostgreSQL with MySQL (`image: mysql:8`) or MongoDB (`image: mongo:7`)\n- **Cache**: Replace Redis with Memcached or remove if not needed\n- **SSL**: Add Let's Encrypt with certbot sidecar for HTTPS\n- **Scaling**: Use `docker compose up -d --scale web=3` for multiple app instances\n- **Monitoring**: Add Prometheus + Grafana services for observability\n- **CI**: Use the same `docker-compose.yml` in GitHub Actions for integration tests\n\n## 2026 Trend Notes\n- Health checks with `condition: service_healthy` ensure proper startup ordering\n- Multi-stage Docker builds reduce image size by 60-80%\n- Alpine-based images are standard for smaller footprint\n- Resource limits (`deploy.resources.limits`) prevent container resource abuse\n- Non-root user (`USER appuser`) is a security best practice\n- Redis `maxmemory-policy: allkeys-lru` prevents OOM in containers\n" }, { "filename": "env-template.md", "title": "Environment Variables Template", "description": "Comprehensive .env template organized by category: database, auth, APIs, feature flags", "category": "project-setup", "tags": [ "env", "configuration", "secrets", "environment", "dotenv" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/env-template.md", "content": "# Environment Variables Template\n> Comprehensive .env template organized by category: database, auth, APIs, feature flags\n> 카테고리별 정리된 .env 템플릿: 데이터베이스, 인증, API, 기능 플래그\n\n**Category**: Project Setup | **Tags**: env, configuration, secrets, environment, dotenv | **Difficulty**: Beginner\n\n## Preview\n```\n.env.example\n├── App Config (PORT, ENV, URL)\n├── Database (PostgreSQL, Redis)\n├── Auth (JWT, OAuth)\n├── API Keys (Stripe, Resend, OpenAI)\n├── Storage (S3, Cloudflare R2)\n├── Feature Flags\n└── Monitoring (Sentry, PostHog)\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below to .env.example in your project root\n# 2. Copy .env.example to .env and fill in real values\n# 3. NEVER commit .env to git (add to .gitignore)\ncp .env.example .env\n# Fill in your values...\n```\n\n## Full Code\n\n### .env.example\n\n```bash\n# ============================================\n# Application\n# ============================================\nNODE_ENV=development # development | staging | production\nPORT=3000 # Server port\nAPP_URL=http://localhost:3000 # Public-facing URL\nAPP_NAME=\"My App\" # Display name\nLOG_LEVEL=info # debug | info | warn | error\n\n# ============================================\n# Database\n# ============================================\n# PostgreSQL\nDATABASE_URL=postgresql://user:password@localhost:5432/myapp_dev\nDATABASE_POOL_SIZE=10 # Connection pool size\nDATABASE_SSL=false # true in production\n\n# Redis (caching, sessions, rate limiting)\nREDIS_URL=redis://localhost:6379\nREDIS_PREFIX=myapp: # Key prefix for namespacing\n\n# SQLite (alternative for simple apps)\n# SQLITE_PATH=./data/app.db\n\n# ============================================\n# Authentication\n# ============================================\n# JWT\nJWT_SECRET=change-me-to-a-random-64-char-string\nJWT_EXPIRY=7d # Token expiration (1h, 7d, 30d)\n\n# NextAuth / Auth.js\nNEXTAUTH_SECRET=change-me-to-a-random-32-char-string\nNEXTAUTH_URL=http://localhost:3000\n\n# Google OAuth\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\n\n# GitHub OAuth\nGITHUB_ID=\nGITHUB_SECRET=\n\n# Apple OAuth\nAPPLE_ID=\nAPPLE_SECRET=\n\n# ============================================\n# API Keys - Third Party Services\n# ============================================\n# Payments (Stripe)\nSTRIPE_SECRET_KEY=sk_test_...\nSTRIPE_PUBLISHABLE_KEY=pk_test_...\nSTRIPE_WEBHOOK_SECRET=whsec_...\n\n# Email (Resend)\nRESEND_API_KEY=re_...\nEMAIL_FROM=\"App Name \"\n\n# AI / LLM\nOPENAI_API_KEY=sk-...\nANTHROPIC_API_KEY=sk-ant-...\n# GOOGLE_AI_API_KEY=AIza...\n\n# Search\n# ALGOLIA_APP_ID=\n# ALGOLIA_API_KEY=\n\n# ============================================\n# Storage\n# ============================================\n# AWS S3 / Cloudflare R2\nS3_BUCKET=myapp-uploads\nS3_REGION=us-east-1\nS3_ACCESS_KEY=\nS3_SECRET_KEY=\nS3_ENDPOINT= # Set for R2: https://ACCOUNT.r2.cloudflarestorage.com\n\n# Local uploads (development)\nUPLOAD_DIR=./uploads\nMAX_FILE_SIZE=10485760 # 10MB in bytes\n\n# ============================================\n# External APIs\n# ============================================\n# Webhook URLs\nWEBHOOK_SECRET=whsec_change_me\nSLACK_WEBHOOK_URL=https://hooks.slack.com/services/...\n\n# Rate Limiting\nRATE_LIMIT_WINDOW=60000 # 1 minute in ms\nRATE_LIMIT_MAX=100 # Max requests per window\n\n# ============================================\n# Feature Flags\n# ============================================\nFEATURE_NEW_DASHBOARD=false # Enable new dashboard UI\nFEATURE_AI_ASSISTANT=true # Enable AI assistant\nFEATURE_DARK_MODE=true # Enable dark mode toggle\nFEATURE_BETA_API=false # Enable beta API endpoints\nFEATURE_MAINTENANCE_MODE=false # Show maintenance page\n\n# ============================================\n# Monitoring & Analytics\n# ============================================\n# Error tracking (Sentry)\nSENTRY_DSN=https://abc@sentry.io/123\nSENTRY_ENVIRONMENT=development\n\n# Analytics (PostHog)\nNEXT_PUBLIC_POSTHOG_KEY=phc_...\nNEXT_PUBLIC_POSTHOG_HOST=https://us.posthog.com\n\n# Uptime monitoring\n# BETTERUPTIME_API_KEY=\n\n# ============================================\n# CI/CD (usually set in GitHub Actions secrets)\n# ============================================\n# VERCEL_TOKEN=\n# VERCEL_ORG_ID=\n# VERCEL_PROJECT_ID=\n# CODECOV_TOKEN=\n# DEPLOY_SSH_KEY=\n```\n\n### .gitignore entries\n\n```bash\n# Add to .gitignore (CRITICAL)\n.env\n.env.local\n.env.*.local\n*.pem\n*.key\ndata/kis_token.json\n```\n\n### Validation Script (TypeScript)\n\n```typescript\n// src/lib/env.ts - Validate environment variables at startup\nimport { z } from 'zod';\n\nconst envSchema = z.object({\n NODE_ENV: z.enum(['development', 'staging', 'production']).default('development'),\n PORT: z.coerce.number().default(3000),\n APP_URL: z.string().url(),\n DATABASE_URL: z.string().min(1, 'DATABASE_URL is required'),\n JWT_SECRET: z.string().min(32, 'JWT_SECRET must be at least 32 characters'),\n REDIS_URL: z.string().optional(),\n STRIPE_SECRET_KEY: z.string().optional(),\n RESEND_API_KEY: z.string().optional(),\n LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),\n});\n\nexport const env = envSchema.parse(process.env);\nexport type Env = z.infer;\n```\n\n### Validation Script (Python)\n\n```python\n# src/config.py - Validate environment variables at startup\nimport os\nfrom dataclasses import dataclass\n\n@dataclass\nclass Config:\n app_env: str = \"development\"\n port: int = 3000\n app_url: str = \"http://localhost:3000\"\n database_url: str = \"\"\n jwt_secret: str = \"\"\n redis_url: str = \"\"\n log_level: str = \"info\"\n\n def __post_init__(self):\n self.app_env = os.getenv(\"NODE_ENV\", self.app_env)\n self.port = int(os.getenv(\"PORT\", self.port))\n self.app_url = os.getenv(\"APP_URL\", self.app_url)\n self.database_url = os.getenv(\"DATABASE_URL\", \"\")\n self.jwt_secret = os.getenv(\"JWT_SECRET\", \"\")\n self.redis_url = os.getenv(\"REDIS_URL\", \"\")\n self.log_level = os.getenv(\"LOG_LEVEL\", self.log_level)\n\n if not self.database_url:\n raise ValueError(\"DATABASE_URL is required\")\n if len(self.jwt_secret) < 32:\n raise ValueError(\"JWT_SECRET must be at least 32 characters\")\n\nconfig = Config()\n```\n\n## Customization Guide\n- **Remove unused services**: Delete sections for services you don't use (e.g., no Stripe if no payments)\n- **Add project-specific vars**: Add your custom environment variables to the appropriate section\n- **Multi-environment**: Create `.env.development`, `.env.staging`, `.env.production` for environment-specific values\n- **Docker**: Map env vars in `docker-compose.yml` using `env_file: .env`\n- **Validation**: Always validate at startup - fail fast if required variables are missing\n- **Prefix convention**: Use `NEXT_PUBLIC_` for client-accessible vars in Next.js\n\n## 2026 Trend Notes\n- Zod validation of environment variables at startup catches misconfig early\n- Feature flags in env vars enable trunk-based development with gradual rollout\n- Separate `.env.example` (committed) from `.env` (gitignored) is the universal pattern\n- `NEXT_PUBLIC_` prefix convention prevents accidental secret exposure in browser bundles\n- Comments in .env.example serve as documentation for team members\n" }, { "filename": "footer-components.md", "title": "Footer Components", "description": "Footer patterns: simple, mega footer, newsletter signup, social links, and sitemap footer", "category": "components", "tags": [ "footer", "navigation", "newsletter", "social", "tailwind" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/footer-components.md", "content": "# Footer Components\n> Footer patterns: simple, mega footer, newsletter signup, social links, and sitemap footer\n> 푸터 패턴: 심플, 메가 푸터, 뉴스레터 가입, 소셜 링크, 사이트맵 푸터\n\n**Category**: Components | **Tags**: footer, navigation, newsletter, social, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+---- Simple Footer ----+ +---- Mega Footer --------+\n| Brand (c) 2026 | | Brand Prod Company |\n| Privacy | Terms | | Desc Feat About |\n+-----------------------+ | API Careers |\n | [Newsletter Email] [Sub] |\n +-------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Pick a footer style and place before \n# 2. Replace links, social URLs, and brand name\n# 3. Newsletter form works with Formspree, Mailchimp, or custom endpoint\n```\n\n## Full Code\n\n```html\n\n\n\n \n \n Footer Components\n \n\n\n
\n

Footer Components

\n
\n\n \n \n\n
\n\n \n \n\n
\n\n \n \n\n
\n\n \n \n\n\n\n```\n\n## Customization Guide\n- **Brand**: Replace text logo with SVG or image\n- **Social icons**: Replace SVGs with your preferred icon library; update `href` with actual URLs\n- **Newsletter form**: Connect to Mailchimp, ConvertKit, Buttondown, or custom endpoint\n- **Columns**: Add or remove sitemap columns in the mega footer\n- **Colors**: Change background from `bg-gray-900` to match your brand\n- **Status indicator**: Wire up the green dot to your actual status page API\n\n## 2026 Trend Notes\n- Mega footers with 3-4 columns are standard for SaaS and product sites\n- System status indicator in footer builds trust\n- Hiring badge on careers link is a common growth signal\n- Social icons as square/rounded buttons (not just icons) improve tap targets\n- Newsletter capture in footer catches users who scrolled the entire page\n" }, { "filename": "form-components.md", "title": "Form Components", "description": "Form patterns: login, signup, contact, search bar, multi-step wizard, and settings panel", "category": "components", "tags": [ "forms", "login", "signup", "wizard", "validation", "tailwind" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/form-components.md", "content": "# Form Components\n> Form patterns: login, signup, contact, search bar, multi-step wizard, and settings panel\n> 폼 패턴: 로그인, 회원가입, 문의, 검색바, 멀티스텝 마법사, 설정 패널\n\n**Category**: Components | **Tags**: forms, login, signup, wizard, validation, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+----------+ +----------+ +----------+\n| Login | | Signup | | Contact |\n| [email] | | [name] | | [name] |\n| [pass] | | [email] | | [email] |\n| [Submit] | | [pass] | | [msg] |\n+----------+ | [Submit] | | [Send] |\n +----------+ +----------+\n+------- Multi-step Wizard --------+\n| Step 1 > Step 2 > Step 3 |\n| [fields...] [Next ->] |\n+----------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy the form you need from the code below\n# 2. Replace action URLs with your API endpoints\n# 3. All forms include built-in HTML5 validation (required, type, pattern)\n```\n\n## Full Code\n\n```html\n\n\n\n \n \n Form Components\n \n\n\n
\n\n

Form Components

\n\n
\n\n \n
\n

Welcome Back

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n Forgot password?\n
\n \n
or continue with
\n
\n \n \n
\n
\n
\n\n \n
\n

Create Account

\n
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n\n \n
\n

Contact Us

\n
\n
\n
\n
\n \n \n
\n
\n \n
\n
\n\n
\n\n \n
\n

Search Bar

\n
\n
\n \n \n Ctrl K\n
\n
\n
\n\n \n
\n

Multi-Step Wizard

\n
\n \n
\n
1
\n
\n
2
\n
\n
3
\n
\n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n\n \n
\n

Settings Panel

\n
\n
\n

Email Notifications

Receive updates about your account

\n \n
\n
\n

Two-Factor Auth

Add extra security to your account

\n \n
\n
\n

Dark Mode

Switch between light and dark themes

\n \n
\n
\n \n \n
\n
\n
\n\n
\n\n\n```\n\n## Customization Guide\n- **Form actions**: Replace `action=\"/api/...\"` with your endpoint (Formspree, Netlify, custom)\n- **Validation**: Add `pattern`, `minlength`, `maxlength` attributes for client-side validation\n- **Social login**: Replace button text with SVG icons for Google, GitHub, Apple\n- **Wizard steps**: Add JS to show/hide step content and update step indicator colors\n- **Toggle switches**: The inline `onclick` handlers work standalone; replace with React/Vue state in frameworks\n- **Accessibility**: Add `aria-label`, `aria-required`, and proper `id`/`for` pairings for screen readers\n\n## 2026 Trend Notes\n- Rounded input fields (`rounded-xl`) with subtle borders are the current standard\n- Social login divider (\"or continue with\") is expected UX for auth forms\n- Keyboard shortcut hint in search bar (`Ctrl+K`) follows the command palette pattern\n- Toggle switches with inline JS provide framework-agnostic interactivity\n- Multi-step wizards with numbered indicators reduce form abandonment\n" }, { "filename": "git-workflow.md", "title": "Git Workflow Guide", "description": "Git workflow with branching strategy, commit conventions, PR template, and common operations", "category": "dev-methodology", "tags": [ "git", "branching", "commits", "pull-request", "workflow" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/git-workflow.md", "content": "# Git Workflow Guide\n> Git workflow with branching strategy, commit conventions, PR template, and common operations\n> 브랜칭 전략, 커밋 컨벤션, PR 템플릿, 자주 쓰는 Git 명령어 가이드\n\n**Category**: Dev Methodology | **Tags**: git, branching, commits, pull-request, workflow | **Difficulty**: Beginner\n\n## Preview\n```\nmain ─────●──────●──────●──────●─────\n \\ / \\ /\nfeature/x ●──● fix/y ●──●\n```\n\n## Quick Start\n```bash\n# Start new feature\ngit checkout -b feature/add-user-auth\n# ... make changes, commit often ...\ngit push -u origin feature/add-user-auth\n# Open PR on GitHub, get review, merge\n\n# Sync with main\ngit checkout main && git pull\ngit checkout feature/my-branch && git rebase main\n```\n\n## Branching Strategy\n\n### Trunk-Based Development (Recommended for Small Teams)\n\n```\nmain (production-ready, always deployable)\n |\n +-- feature/add-user-auth (short-lived, 1-3 days max)\n +-- fix/login-redirect-loop (bug fixes)\n +-- chore/upgrade-deps (maintenance)\n```\n\n### Branch Naming Convention\n\n| Prefix | Purpose | Example |\n|--------|---------|---------|\n| `feature/` | New functionality | `feature/add-payment-flow` |\n| `fix/` | Bug fixes | `fix/null-pointer-on-login` |\n| `chore/` | Maintenance, deps | `chore/upgrade-react-19` |\n| `docs/` | Documentation | `docs/update-api-reference` |\n| `refactor/` | Code restructuring | `refactor/extract-auth-service` |\n| `test/` | Adding tests | `test/user-service-edge-cases` |\n| `hotfix/` | Critical prod fix | `hotfix/payment-timeout` |\n\n### Rules\n\n```\n1. main is always deployable (protected, requires PR)\n2. Feature branches are short-lived (merge within 1-3 days)\n3. No direct commits to main (always via PR)\n4. Delete branches after merge\n5. Rebase before merge to keep history clean\n```\n\n## Commit Message Convention\n\n### Format: Conventional Commits\n\n```\n(): \n\n[optional body]\n\n[optional footer]\n```\n\n### Types\n\n| Type | Description | Example |\n|------|-------------|---------|\n| `feat` | New feature | `feat(auth): add OAuth2 Google login` |\n| `fix` | Bug fix | `fix(api): handle null user in GET /profile` |\n| `docs` | Documentation | `docs(readme): add deployment instructions` |\n| `style` | Formatting only | `style: fix indentation in user_service.py` |\n| `refactor` | Code restructuring | `refactor(db): extract query builder class` |\n| `test` | Adding tests | `test(auth): add edge cases for token expiry` |\n| `chore` | Build/tooling | `chore(deps): upgrade fastapi to 0.110` |\n| `perf` | Performance | `perf(query): add index on users.email` |\n| `ci` | CI/CD changes | `ci: add Python 3.12 to test matrix` |\n\n### Good vs Bad Commit Messages\n\n```bash\n# BAD\ngit commit -m \"fix bug\"\ngit commit -m \"update code\"\ngit commit -m \"WIP\"\ngit commit -m \"changes\"\n\n# GOOD\ngit commit -m \"fix(auth): prevent token refresh race condition\"\ngit commit -m \"feat(api): add pagination to GET /users endpoint\"\ngit commit -m \"refactor(db): replace raw SQL with SQLAlchemy ORM\"\ngit commit -m \"test(payment): add Stripe webhook signature verification test\"\n```\n\n## Pull Request Template\n\nSave as `.github/PULL_REQUEST_TEMPLATE.md`:\n\n```markdown\n## Summary\n\n\n## Changes\n- [ ] Change 1\n- [ ] Change 2\n\n## Type\n- [ ] Feature\n- [ ] Bug fix\n- [ ] Refactor\n- [ ] Documentation\n- [ ] CI/CD\n\n## Testing\n- [ ] Unit tests added/updated\n- [ ] Integration tests added/updated\n- [ ] Manual testing performed\n\n## Screenshots\n\n\n## Checklist\n- [ ] Code follows project style guidelines\n- [ ] Self-reviewed my own code\n- [ ] No new warnings introduced\n- [ ] Documentation updated (if applicable)\n- [ ] Database migration included (if applicable)\n\n## Related Issues\n\n```\n\n## Common Git Operations\n\n### Daily Workflow\n\n```bash\n# Start your day: sync with remote\ngit checkout main\ngit pull --rebase\n\n# Create feature branch\ngit checkout -b feature/my-feature\n\n# Work, commit frequently\ngit add -p # Stage interactively (review each hunk)\ngit commit -m \"feat(scope): description\"\n\n# Push and create PR\ngit push -u origin feature/my-feature\ngh pr create --title \"feat: my feature\" --body \"Description here\"\n```\n\n### Sync and Rebase\n\n```bash\n# Update feature branch with latest main\ngit checkout main\ngit pull --rebase\ngit checkout feature/my-feature\ngit rebase main\n\n# If conflicts arise:\n# 1. Fix conflicts in editor\n# 2. git add \n# 3. git rebase --continue\n```\n\n### Fix Mistakes\n\n```bash\n# Amend last commit (before push)\ngit add .\ngit commit --amend --no-edit\n\n# Undo last commit (keep changes)\ngit reset --soft HEAD~1\n\n# Discard all local changes\ngit checkout -- .\n\n# Interactive rebase (squash commits before PR)\ngit rebase -i HEAD~3\n# Change 'pick' to 'squash' for commits to combine\n```\n\n### Useful Aliases\n\n```bash\n# Add to ~/.gitconfig\n[alias]\n co = checkout\n br = branch\n ci = commit\n st = status\n lg = log --oneline --graph --decorate --all -20\n unstage = reset HEAD --\n last = log -1 HEAD --stat\n amend = commit --amend --no-edit\n wip = !git add -A && git commit -m \"WIP: work in progress\"\n undo = reset --soft HEAD~1\n```\n\n## Customization Guide\n- **Branch strategy**: For larger teams, consider Gitflow (develop + release branches)\n- **Commit hooks**: Add `commitlint` + `husky` for automatic commit message validation\n- **PR size**: Aim for <400 lines changed per PR (easier to review, faster to merge)\n- **Squash policy**: \"Squash and merge\" keeps main history clean; \"Rebase and merge\" preserves individual commits\n- **Protected branches**: Enable \"Require PR reviews\" and \"Require status checks\" on main\n\n## 2026 Trend Notes\n- Trunk-based development is the dominant strategy for teams practicing continuous delivery\n- Conventional Commits enable automatic changelog generation and semantic versioning\n- GitHub CLI (`gh`) is faster than web UI for creating PRs and checking CI status\n- `git add -p` (interactive staging) encourages reviewing changes before committing\n- Ship/Show/Ask framework: trivial changes (typos, deps) can merge without review\n" }, { "filename": "hero-components.md", "title": "Hero Section Components", "description": "Hero section variants: centered text, split layout, video background, animated gradient, and minimal", "category": "components", "tags": [ "hero", "header", "above-fold", "animation", "tailwind" ], "difficulty": "beginner", "download_url": "https://jeromwolf.github.io/templateclaw/templates/hero-components.md", "content": "# Hero Section Components\n> Hero section variants: centered text, split layout, video background, animated gradient, and minimal\n> 히어로 섹션 변형: 중앙 텍스트, 분할 레이아웃, 비디오 배경, 애니메이션 그라디언트, 미니멀\n\n**Category**: Components | **Tags**: hero, header, above-fold, animation, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+---- Centered Hero ----+ +---- Split Hero ------+\n| Build Amazing Things | | Text | [Image] |\n| [CTA] [Secondary] | | CTA | |\n+-----------------------+ +----------------------+\n\n+---- Gradient Hero ----+ +---- Minimal Hero ----+\n| ~~~animated colors~~~ | | |\n| Bold Statement | | One line. That's it. |\n| [CTA] | | [CTA] |\n+-----------------------+ +----------------------+\n```\n\n## Quick Start\n```bash\n# 1. Pick a hero style and copy the HTML block\n# 2. Replace headline, subtext, and CTA buttons\n# 3. Each hero is self-contained (no dependencies between them)\n```\n\n## Full Code\n\n```html\n\n\n\n \n \n Hero Components\n \n \n\n\n\n \n
\n
\n
\n
Announcing v3.0
\n

Build Amazing
Things Faster

\n

The developer platform that helps you ship products 10x faster with AI-powered tools and seamless collaboration.

\n
\n Get Started Free\n Live Demo →\n
\n
\n
\n\n \n
\n
\n
\n For Developers\n

Ship Code
With Confidence

\n

Automated testing, deployment pipelines, and real-time monitoring in one platform. Push code and sleep well.

\n
\n Start Building\n Read Docs →\n
\n
\n
99.99%
Uptime SLA
\n
50ms
Avg Latency
\n
10K+
Teams
\n
\n
\n
\n
\n
\n 
$ npx create-app my-project\nCreating project...\n✓ Dependencies installed\n✓ CI/CD configured\n✓ Monitoring enabled\n\n$ git push origin main\nDeploying to production...\n✓ Live at https://my-project.app
\n
\n
\n
\n
\n\n \n
\n
\n

The Future of AI Development

\n

Build, train, and deploy AI models with zero infrastructure. From prototype to production in minutes.

\n Start Free Trial\n

No credit card required

\n
\n
\n\n \n
\n \n
\n
\n
\n

Create Without
Limits

\n

The creative platform for the next generation of makers.

\n
\n Get Started\n Watch Video ▶\n
\n
\n
\n\n \n
\n
\n

Simple tools for
complex work.

\n

Less noise. More focus. The workspace that gets out of your way.

\n Try It Free\n
\n
\n\n\n\n```\n\n## Customization Guide\n- **Centered hero**: Add a background image with `bg-[url('...')]` and overlay with gradient\n- **Split hero**: Replace the terminal mockup with a product screenshot or illustration\n- **Gradient hero**: Change gradient colors in the `from-` `via-` `to-` classes\n- **Video hero**: Uncomment the `