create-claudecraft 1.0.0

package/templates/skills/design/ralph-wiggum-loops/SKILL.md

@@ -0,0 +1,299 @@
+# Ralph Wiggum Loops - The Ultimate Superpower
+
+> "Ralph is a bash loop. You give Claude a task, it works on it, and when it tries to exit, a Stop hook blocks the exit and feeds the same prompt back in. Each iteration builds on the last."
+> — Geoffrey Huntley, creator of the technique
+
+## What Is It?
+
+The Ralph Wiggum technique creates a **self-correcting feedback loop** where Claude Code:
+1. Works on your task
+2. Tries to exit
+3. Gets blocked and fed the same prompt again
+4. Sees what it built, notices what's broken, fixes it
+5. Repeats until done
+
+Named after the Simpsons character who keeps going despite everything.
+
+## Setup
+
+### Install the Official Plugin
+
+```bash
+# Add Anthropic's plugin marketplace (if not already added)
+/plugin marketplace add anthropics/claude-code
+
+# Install ralph-wiggum
+/plugin install ralph-wiggum@claude-plugins-official
+```
+
+### Verify Installation
+
+```bash
+/ralph-loop --help
+```
+
+## Basic Usage
+
+```bash
+/ralph-loop "<your prompt>" --completion-promise "COMPLETE" --max-iterations 20
+```
+
+**Parameters:**
+- `--completion-promise`: Exact text that signals "I'm done"
+- `--max-iterations`: Safety limit (always set this!)
+
+**Cancel anytime:**
+```bash
+/cancel-ralph
+```
+
+---
+
+## Pre-Configured Loops for Designers
+
+### 1. Component Builder Loop
+
+Build a complete component from a description:
+
+```bash
+/ralph-loop "Build a [COMPONENT NAME] component.
+
+Requirements:
+- Use DaisyUI + Tailwind CSS
+- Follow existing patterns in src/components/ui/
+- Include hover, focus, and active states
+- Make it responsive (mobile, tablet, desktop)
+- Add TypeScript props interface
+
+Verification steps each iteration:
+1. Check if component file exists
+2. Run: bun run typecheck
+3. Run: bun run lint
+4. If errors, fix them
+5. When all checks pass, output: <promise>COMPLETE</promise>
+
+If after 10 iterations not complete, document blockers and output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 15
+```
+
+### 2. Design System Audit Loop
+
+Audit and fix design consistency:
+
+```bash
+/ralph-loop "Audit src/components for design system consistency.
+
+For each component, check and fix:
+- Uses DaisyUI semantic colors (not hardcoded hex)
+- Uses spacing scale (4, 8, 16, 24, 32px)
+- Has proper hover/focus states
+- Typography follows hierarchy
+
+Process:
+1. List all components in src/components/
+2. Review each one
+3. Fix inconsistencies found
+4. Run typecheck and lint
+5. Move to next component
+6. When ALL components reviewed and fixed, output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 30
+```
+
+### 3. Responsive Fix Loop
+
+Make a page fully responsive:
+
+```bash
+/ralph-loop "Make [PAGE NAME] fully responsive.
+
+Breakpoints to support:
+- Mobile: 375px
+- Tablet: 768px
+- Desktop: 1280px+
+
+Process each section:
+1. Review current responsive behavior
+2. Fix layout issues at each breakpoint
+3. Ensure touch targets are 44px+ on mobile
+4. Run typecheck
+5. Move to next section
+6. When entire page is responsive, output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 20
+```
+
+### 4. Polish Loop
+
+Automated polish pass:
+
+```bash
+/ralph-loop "Polish pass on [FILE/COMPONENT].
+
+Check and fix:
+- [ ] Consistent spacing
+- [ ] Proper typography hierarchy
+- [ ] Hover states on interactive elements
+- [ ] Focus states for accessibility
+- [ ] Smooth transitions (150-300ms)
+- [ ] No hardcoded colors
+
+After each fix:
+1. Run bun run typecheck
+2. Run bun run lint
+3. If errors, fix them
+
+When all checklist items done and no errors, output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 15
+```
+
+### 5. Feature Build Loop
+
+Build a complete feature overnight:
+
+```bash
+/ralph-loop "Build [FEATURE NAME] feature.
+
+Requirements:
+[List your requirements here]
+
+Phases:
+1. Create component structure
+2. Implement core functionality
+3. Add styling with DaisyUI
+4. Make responsive
+5. Run all checks
+
+Each iteration:
+- Work on current phase
+- Run: bun run typecheck && bun run lint
+- If errors, fix them
+- If phase complete, move to next
+- When all phases done and checks pass, output: <promise>COMPLETE</promise>
+
+Escape hatch: After 25 iterations, document progress and blockers, then output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 30
+```
+
+---
+
+## Writing Good Ralph Prompts
+
+### The Formula
+
+```
+[TASK DESCRIPTION]
+
+Requirements:
+- [Specific requirement 1]
+- [Specific requirement 2]
+
+Verification each iteration:
+1. [Check 1]
+2. [Check 2]
+3. If errors, fix them
+
+Completion criteria:
+- [Measurable outcome 1]
+- [Measurable outcome 2]
+- When all criteria met, output: <promise>COMPLETE</promise>
+
+Escape hatch:
+After N iterations, if not complete, document blockers and output: <promise>COMPLETE</promise>
+```
+
+### Good vs Bad Prompts
+
+❌ **Bad:**
+```
+Make the homepage look better
+```
+
+✅ **Good:**
+```
+Improve homepage visual hierarchy.
+
+Specific changes:
+- Increase hero heading to text-4xl on mobile, text-6xl on desktop
+- Add 32px gap between sections
+- Ensure CTA button has hover state with scale-105 transform
+- Add subtle shadow to feature cards
+
+Verify each iteration:
+- Run bun run typecheck
+- Run bun run lint
+- Fix any errors
+
+When all changes implemented and checks pass, output: <promise>COMPLETE</promise>
+```
+
+---
+
+## Safety Guidelines
+
+### Always Set Max Iterations
+
+```bash
+# GOOD - has safety limit
+/ralph-loop "..." --max-iterations 20
+
+# DANGEROUS - could run forever
+/ralph-loop "..."
+```
+
+### Include Escape Hatches
+
+Always add fallback instructions:
+
+```
+After 20 iterations, if not complete:
+- Document what's blocking progress
+- List what was attempted
+- Output: <promise>COMPLETE</promise>
+```
+
+### Monitor Costs
+
+Ralph loops can consume significant API credits. For reference:
+- Simple component: ~$2-5
+- Full feature: ~$10-30
+- Overnight builds: ~$50-300
+
+### Start Small
+
+Test your prompt with `--max-iterations 5` first to verify it works, then increase.
+
+---
+
+## Real-World Results
+
+- **YC Hackathon**: 6 repositories shipped overnight for $297
+- **Contract Work**: $50k project completed autonomously
+- **CURSED Lang**: Entire programming language built over 3 months
+
+---
+
+## When to Use Ralph
+
+✅ **Perfect for:**
+- Well-defined tasks with clear success criteria
+- Tasks with automatic verification (tests, linting)
+- Overnight/background builds
+- Iterative refinement work
+
+❌ **Not for:**
+- Tasks requiring design decisions
+- Unclear requirements
+- Production debugging
+- Anything needing human judgment mid-process
+
+---
+
+## Quick Reference
+
+| Command | Description |
+|---------|-------------|
+| `/ralph-loop "<prompt>" --max-iterations N --completion-promise "TEXT"` | Start loop |
+| `/cancel-ralph` | Stop active loop |
+| `<promise>COMPLETE</promise>` | Standard completion signal |
+
+---
+
+## Philosophy
+
+> "Don't aim for perfect on first try. Let the loop refine the work."
+
+The Ralph Wiggum technique embodies **iteration over perfection**. Each failure is data. Each loop improves on the last. Success comes from persistent iteration, not first-try brilliance.

package/templates/skills/design/react-best-practices/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: react-best-practices
+description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
+---
+
+# React Best Practices
+
+## Overview
+
+Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are prioritized by impact to guide automated refactoring and code generation.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Refactoring existing React/Next.js code
+- Optimizing bundle size or load times
+
+## Priority-Ordered Guidelines
+
+Rules are prioritized by impact:
+
+| Priority | Category | Impact |
+|----------|----------|--------|
+| 1 | Eliminating Waterfalls | CRITICAL |
+| 2 | Bundle Size Optimization | CRITICAL |
+| 3 | Server-Side Performance | HIGH |
+| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
+| 5 | Re-render Optimization | MEDIUM |
+| 6 | Rendering Performance | MEDIUM |
+| 7 | JavaScript Performance | LOW-MEDIUM |
+| 8 | Advanced Patterns | LOW |
+
+## Quick Reference
+
+### Critical Patterns (Apply First)
+
+**Eliminate Waterfalls:**
+- Defer await until needed (move into branches)
+- Use `Promise.all()` for independent async operations
+- Start promises early, await late
+- Use `better-all` for partial dependencies
+- Use Suspense boundaries to stream content
+
+**Reduce Bundle Size:**
+- Avoid barrel file imports (import directly from source)
+- Use `next/dynamic` for heavy components
+- Defer non-critical third-party libraries
+- Preload based on user intent
+
+### High-Impact Server Patterns
+
+- Use `React.cache()` for per-request deduplication
+- Use LRU cache for cross-request caching
+- Minimize serialization at RSC boundaries
+- Parallelize data fetching with component composition
+
+### Medium-Impact Client Patterns
+
+- Use SWR for automatic request deduplication
+- Defer state reads to usage point
+- Use lazy state initialization for expensive values
+- Use derived state subscriptions
+- Apply `startTransition` for non-urgent updates
+
+### Rendering Patterns
+
+- Animate SVG wrappers, not SVG elements directly
+- Use `content-visibility: auto` for long lists
+- Prevent hydration mismatch with inline scripts
+- Use explicit conditional rendering (`? :` not `&&`)
+
+### JavaScript Patterns
+
+- Batch DOM CSS changes via classes
+- Build index maps for repeated lookups
+- Cache repeated function calls
+- Use `toSorted()` instead of `sort()` for immutability
+- Early length check for array comparisons
+
+## References
+
+Full documentation with code examples is available in:
+
+- `references/react-performance-guidelines.md` - Complete guide with all patterns
+- `references/rules/` - Individual rule files organized by category
+
+To look up a specific pattern, grep the rules directory:
+```
+grep -l "suspense" references/rules/
+grep -l "barrel" references/rules/
+grep -l "swr" references/rules/
+```
+
+## Rule Categories in `references/rules/`
+
+- `async-*` - Waterfall elimination patterns
+- `bundle-*` - Bundle size optimization
+- `server-*` - Server-side performance
+- `client-*` - Client-side data fetching
+- `rerender-*` - Re-render optimization
+- `rendering-*` - DOM rendering performance
+- `js-*` - JavaScript micro-optimizations
+- `advanced-*` - Advanced patterns

package/templates/skills/design/react-best-practices/references/react-performance-guidelines.md

@@ -0,0 +1,143 @@
+# React Best Practices
+
+**Version 0.1.0**
+Vercel Engineering
+January 2026
+
+> **Note:**
+> This document is mainly for agents and LLMs to follow when maintaining,
+> generating, or refactoring React and Next.js codebases. Humans
+> may also find it useful, but guidance here is optimized for automation
+> and consistency by AI-assisted workflows.
+
+---
+
+## Abstract
+
+Comprehensive performance optimization guide for React and Next.js applications, designed for AI agents and LLMs. Contains 40+ rules across 8 categories, prioritized by impact from critical (eliminating waterfalls, reducing bundle size) to incremental (advanced patterns). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation.
+
+---
+
+## Table of Contents
+
+1. [Eliminating Waterfalls](#1-eliminating-waterfalls) — **CRITICAL**
+2. [Bundle Size Optimization](#2-bundle-size-optimization) — **CRITICAL**
+3. [Server-Side Performance](#3-server-side-performance) — **HIGH**
+4. [Client-Side Data Fetching](#4-client-side-data-fetching) — **MEDIUM-HIGH**
+5. [Re-render Optimization](#5-re-render-optimization) — **MEDIUM**
+6. [Rendering Performance](#6-rendering-performance) — **MEDIUM**
+7. [JavaScript Performance](#7-javascript-performance) — **LOW-MEDIUM**
+8. [Advanced Patterns](#8-advanced-patterns) — **LOW**
+
+---
+
+## 1. Eliminating Waterfalls
+
+**Impact: CRITICAL**
+
+Waterfalls are the #1 performance killer. Each sequential await adds full network latency.
+
+### Key Patterns:
+
+- **Defer await until needed** - Move `await` into branches where data is actually used
+- **Use Promise.all()** - For independent async operations
+- **Start promises early, await late** - Begin fetches immediately, await when needed
+- **Use Suspense boundaries** - Stream content to show wrapper UI faster
+
+---
+
+## 2. Bundle Size Optimization
+
+**Impact: CRITICAL**
+
+### Key Patterns:
+
+- **Avoid barrel file imports** - Import directly from source files
+- **Use dynamic imports** - For heavy components not needed on initial render
+- **Defer third-party libraries** - Load analytics, logging after hydration
+- **Preload on user intent** - Load bundles on hover/focus before click
+
+---
+
+## 3. Server-Side Performance
+
+**Impact: HIGH**
+
+### Key Patterns:
+
+- **React.cache()** - Per-request deduplication
+- **LRU cache** - Cross-request caching
+- **Minimize serialization** - Only pass needed fields across RSC boundaries
+- **Parallel component composition** - Restructure for concurrent data fetching
+
+---
+
+## 4. Client-Side Data Fetching
+
+**Impact: MEDIUM-HIGH**
+
+### Key Patterns:
+
+- **SWR** - Automatic request deduplication and caching
+- **useSWRSubscription** - Share global event listeners
+
+---
+
+## 5. Re-render Optimization
+
+**Impact: MEDIUM**
+
+### Key Patterns:
+
+- **Defer state reads** - Read searchParams/localStorage in callbacks, not subscriptions
+- **Extract memoized components** - Enable early returns before computation
+- **Narrow effect dependencies** - Use primitives instead of objects
+- **Lazy state initialization** - Pass functions to useState for expensive values
+- **startTransition** - Mark non-urgent updates
+
+---
+
+## 6. Rendering Performance
+
+**Impact: MEDIUM**
+
+### Key Patterns:
+
+- **Animate SVG wrappers** - Not SVG elements directly
+- **content-visibility: auto** - Defer off-screen rendering
+- **Hoist static JSX** - Avoid recreating elements
+- **Prevent hydration mismatch** - Use inline scripts for client-only data
+
+---
+
+## 7. JavaScript Performance
+
+**Impact: LOW-MEDIUM**
+
+### Key Patterns:
+
+- **Batch DOM CSS changes** - Via classes or cssText
+- **Build index maps** - For repeated lookups
+- **Cache function results** - Module-level Map
+- **toSorted() over sort()** - Immutable array operations
+- **Early length check** - Before expensive array comparisons
+
+---
+
+## 8. Advanced Patterns
+
+**Impact: LOW**
+
+### Key Patterns:
+
+- **Store handlers in refs** - Stable subscriptions
+- **useLatest** - Access latest values without dependency changes
+
+---
+
+## References
+
+1. [https://react.dev](https://react.dev)
+2. [https://nextjs.org](https://nextjs.org)
+3. [https://swr.vercel.app](https://swr.vercel.app)
+4. [https://vercel.com/blog/how-we-optimized-package-imports-in-next-js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

package/templates/skills/design/seo-review/SKILL.md

@@ -0,0 +1,96 @@
+# SEO Review
+
+Audit pages for SEO best practices.
+
+## Checklist
+
+### Meta Tags (Critical)
+
+- [ ] `<title>` exists, 50-60 characters
+- [ ] `<meta name="description">` exists, 150-160 characters
+- [ ] `<meta name="viewport">` set correctly
+- [ ] `<link rel="canonical">` for duplicate content prevention
+- [ ] Language declared: `<html lang="en">`
+
+### Open Graph (Social)
+
+- [ ] `og:title` — same or variant of title
+- [ ] `og:description` — same or variant of meta description
+- [ ] `og:image` — 1200×630px minimum
+- [ ] `og:url` — canonical URL
+- [ ] `og:type` — website, article, product, etc.
+
+### Twitter Cards
+
+- [ ] `twitter:card` — summary_large_image recommended
+- [ ] `twitter:title`
+- [ ] `twitter:description`
+- [ ] `twitter:image`
+
+### Headings
+
+- [ ] Single `<h1>` per page
+- [ ] Logical hierarchy: h1 → h2 → h3 (no skipping)
+- [ ] Headings describe content (not styled text)
+
+### Images
+
+- [ ] All `<img>` have `alt` attributes
+- [ ] Alt text is descriptive, not "image" or filename
+- [ ] Decorative images use `alt=""`
+- [ ] Images have width/height to prevent layout shift
+
+### Links
+
+- [ ] Descriptive link text (not "click here")
+- [ ] External links have `rel="noopener noreferrer"`
+- [ ] No broken links
+- [ ] Important pages within 3 clicks of homepage
+
+### Performance (SEO Impact)
+
+- [ ] Core Web Vitals passing
+- [ ] No render-blocking resources
+- [ ] Images optimized (WebP, lazy loading)
+- [ ] Fonts preloaded
+
+### Indexing
+
+- [ ] `robots.txt` allows crawling
+- [ ] `sitemap.xml` exists and is valid
+- [ ] No `noindex` on important pages
+- [ ] JSON-LD structured data present
+
+## Review Process
+
+1. Read `index.html` for meta tags
+2. Scan page components for heading structure
+3. Check images for alt text
+4. Verify Open Graph tags
+5. Check for sitemap.xml and robots.txt
+6. Report findings with line numbers
+
+## Output Format
+
+```
+SEO REVIEW: [page name]
+═══════════════════════
+
+CRITICAL
+────────
+✗ Missing meta description
+  Fix: Add <meta name="description" content="...">
+
+WARNINGS
+────────
+⚠ Title too long (72 chars, max 60)
+  Current: "Very Long Title That Goes On..."
+
+PASSED
+──────
+✓ Single h1 element
+✓ All images have alt text
+✓ Open Graph tags present
+
+Score: 7/10
+```

package/templates/skills/design/sitemap-generator/SKILL.md

@@ -0,0 +1,66 @@
+# Sitemap Generator
+
+Generate XML sitemaps for static and dynamic routes.
+
+## When to Use
+
+- Before deploying to production
+- After adding new pages/routes
+- When setting up SEO
+
+## Output Format
+
+Generate `public/sitemap.xml`:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://example.com/</loc>
+    <lastmod>2024-01-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://example.com/about</loc>
+    <lastmod>2024-01-01</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>
+```
+
+## Priority Guidelines
+
+| Page Type | Priority | Change Frequency |
+|-----------|----------|------------------|
+| Homepage | 1.0 | weekly |
+| Main sections | 0.8 | weekly |
+| Blog posts | 0.6 | monthly |
+| Legal pages | 0.3 | yearly |
+
+## Steps
+
+1. Scan `src/pages/` for route components
+2. Check `src/App.tsx` for route definitions
+3. Extract all public routes (exclude auth-protected)
+4. Generate sitemap.xml with today's date
+5. Create `public/robots.txt` if missing:
+
+```
+User-agent: *
+Allow: /
+Sitemap: https://example.com/sitemap.xml
+```
+
+## Dynamic Routes
+
+For dynamic routes like `/blog/:slug`, either:
+- Fetch content list from CMS/API
+- Read from `src/data/` files
+- Ask user for URL list
+
+## Validation
+
+After generation, validate at:
+- https://www.xml-sitemaps.com/validate-xml-sitemap.html