create-claudecraft 1.0.0

package/templates/hooks/check-branch.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+/**
+ * PreToolUse Hook: Check Branch Before Edit
+ *
+ * Warns if editing files on main/master branch.
+ * Helps prevent accidental commits to protected branches.
+ */
+
+const { execSync } = require('child_process');
+
+try {
+  const branch = execSync('git rev-parse --abbrev-ref HEAD', {
+    encoding: 'utf8',
+    stdio: ['pipe', 'pipe', 'pipe']
+  }).trim();
+
+  if (branch === 'main' || branch === 'master') {
+    console.log(JSON.stringify({
+      feedback: `⚠️ Warning: You are on the ${branch} branch. Consider creating a feature branch first.`,
+      suppressOutput: false
+    }));
+  }
+} catch (error) {
+  // Not a git repo or git not available - silently continue
+  process.exit(0);
+}

package/templates/hooks/typecheck-after-edit.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+/**
+ * PostToolUse Hook: Type Check After Edit
+ *
+ * Runs TypeScript type checking after a file is edited.
+ * Outputs JSON feedback for Claude to process.
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+
+// Get the edited file path from arguments
+const filePath = process.argv[2];
+
+// Only check TypeScript/JavaScript files
+if (!filePath || !filePath.match(/\.(tsx?|jsx?)$/)) {
+  // Exit silently for non-TS/JS files
+  process.exit(0);
+}
+
+try {
+  // Run TypeScript check (non-blocking, just report)
+  execSync('npx tsc --noEmit', {
+    encoding: 'utf8',
+    stdio: ['pipe', 'pipe', 'pipe'],
+    timeout: 30000
+  });
+
+  // No errors - output success feedback
+  console.log(JSON.stringify({
+    feedback: `✅ Type check passed for ${path.basename(filePath)}`,
+    suppressOutput: true
+  }));
+
+} catch (error) {
+  // Parse TypeScript errors
+  const output = error.stdout || error.stderr || '';
+  const errorLines = output.split('\n').filter(line => line.includes('error TS'));
+
+  if (errorLines.length > 0) {
+    // Has type errors - provide feedback
+    console.log(JSON.stringify({
+      feedback: `⚠️ Type errors detected:\n${errorLines.slice(0, 5).join('\n')}${errorLines.length > 5 ? `\n... and ${errorLines.length - 5} more` : ''}`,
+      suppressOutput: false
+    }));
+
+    // Exit code 0 to not block, just inform
+    process.exit(0);
+  }
+}

package/templates/index.css

@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Smaller border radius for all DaisyUI components */
+:root {
+  --rounded-box: 0.25rem;
+  --rounded-btn: 0.25rem;
+  --rounded-badge: 0.25rem;
+}
+
+/* ═══════════════════════════════════════
+   Accessibility Defaults
+   ═══════════════════════════════════════ */
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link - visible on focus */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  background: var(--fallback-b1, oklch(var(--b1)));
+  border: 1px solid var(--fallback-b3, oklch(var(--b3)));
+  border-radius: 0.25rem;
+}
+
+.skip-link:focus {
+  top: 1rem;
+}
+
+/* Focus visible - keyboard only focus indicator */
+:focus-visible {
+  outline: 2px solid oklch(var(--p));
+  outline-offset: 2px;
+}
+
+/* Remove default focus for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/templates/lib/utils.ts

@@ -0,0 +1,9 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Merge Tailwind classes with proper precedence
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { ThemeProvider } from './context/ThemeContext'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </BrowserRouter>
+  </StrictMode>,
+)

package/templates/settings/MCP_SETUP.md

@@ -0,0 +1,76 @@
+# MCP Server Setup
+
+Model Context Protocol (MCP) servers extend Claude Code with external tools and data sources.
+
+## Recommended MCP Servers
+
+### Figma (Official)
+
+Convert designs to code with direct Figma access.
+
+```bash
+claude mcp add --transport http figma https://mcp.figma.com/mcp
+```
+
+Then authenticate:
+1. Type `/mcp` in Claude Code
+2. Select `figma`
+3. Click "Authenticate" and allow access
+
+**Usage:** Share a Figma frame URL and ask Claude to implement it.
+
+### Browser Automation (Optional)
+
+Control Chrome for testing and automation.
+
+```bash
+# Requires Chrome extension: Claude in Chrome
+claude mcp add chrome-automation
+```
+
+### Database (Optional)
+
+Query databases directly from Claude.
+
+```bash
+# PostgreSQL
+claude mcp add --transport stdio postgres npx @anthropic-ai/mcp-server-postgres $DATABASE_URL
+
+# SQLite
+claude mcp add --transport stdio sqlite npx @anthropic-ai/mcp-server-sqlite $DB_PATH
+```
+
+## Managing MCP Servers
+
+```bash
+# List configured servers
+claude mcp list
+
+# Remove a server
+claude mcp remove figma
+
+# Check server status
+/mcp
+```
+
+## Rate Limits
+
+| Plan | Figma API Calls |
+|------|-----------------|
+| Starter/View/Collab | 6/month |
+| Dev/Full (Professional+) | Per-minute limits |
+
+## Troubleshooting
+
+**"MCP server not responding"**
+- Check `/mcp` status
+- Re-authenticate if needed
+- Ensure you have network access
+
+**"Rate limit exceeded"**
+- Wait or upgrade Figma plan
+- Cache designs locally when possible
+
+---
+
+*The robots need credentials too. It's only fair.*

package/templates/settings/settings.json

@@ -0,0 +1,16 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node .claude/hooks/typecheck-after-edit.js \"$FILEPATH\"",
+            "timeout": 30000
+          }
+        ]
+      }
+    ]
+  }
+}

package/templates/settings/settings.local.json

@@ -0,0 +1,37 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(bun install)",
+      "Bash(bun install:*)",
+      "Bash(bun add:*)",
+      "Bash(bun remove:*)",
+      "Bash(bun run:*)",
+      "Bash(bun dev:*)",
+      "Bash(bun test:*)",
+      "Bash(bunx:*)",
+      "Bash(npx tsc:*)",
+      "Bash(git status)",
+      "Bash(git diff:*)",
+      "Bash(git log:*)",
+      "Bash(git branch:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git checkout:*)",
+      "Bash(git merge:*)",
+      "Bash(git stash:*)",
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(tree:*)",
+      "Bash(wc:*)",
+      "Bash(grep:*)",
+      "Bash(curl:*)",
+      "WebSearch",
+      "Bash(gh auth status:*)",
+      "Bash(gh repo create:*)",
+      "Bash(npx vercel:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(git clone:*)"
+    ],
+    "deny": []
+  }
+}

package/templates/skills/design/a11y-audit/SKILL.md

@@ -0,0 +1,173 @@
+# Accessibility Audit
+
+WCAG 2.1 AA compliance checklist for React components.
+
+## Critical (Must Fix)
+
+### Perceivable
+
+| Check | WCAG | How to Fix |
+|-------|------|------------|
+| Images without alt | 1.1.1 | Add `alt="description"` or `alt=""` for decorative |
+| Videos without captions | 1.2.2 | Add captions track |
+| Color-only info | 1.4.1 | Add icon/text alongside color |
+| Contrast < 4.5:1 | 1.4.3 | Use darker/lighter colors |
+| Text resize breaks layout | 1.4.4 | Use relative units (rem) |
+
+### Operable
+
+| Check | WCAG | How to Fix |
+|-------|------|------------|
+| Not keyboard accessible | 2.1.1 | Add tabIndex, onKeyDown |
+| No skip link | 2.4.1 | Add skip to main content link |
+| Missing focus indicator | 2.4.7 | Use focus-visible, not outline-none |
+| Touch target < 44px | 2.5.5 | Increase padding/size |
+
+### Understandable
+
+| Check | WCAG | How to Fix |
+|-------|------|------------|
+| No lang attribute | 3.1.1 | Add `<html lang="en">` |
+| Form errors unclear | 3.3.1 | Show specific error messages |
+| No labels on inputs | 3.3.2 | Add `<label>` or aria-label |
+
+### Robust
+
+| Check | WCAG | How to Fix |
+|-------|------|------------|
+| Invalid HTML | 4.1.1 | Fix nesting, duplicates |
+| Missing ARIA labels | 4.1.2 | Add aria-label to icon buttons |
+| Bad ARIA usage | 4.1.2 | Remove redundant/incorrect ARIA |
+
+## Component Patterns
+
+### Buttons
+
+```tsx
+// ✗ Bad
+<div onClick={handleClick}>Click me</div>
+
+// ✓ Good
+<button onClick={handleClick}>Click me</button>
+
+// ✓ Icon button
+<button onClick={handleClick} aria-label="Close dialog">
+  <XIcon aria-hidden="true" />
+</button>
+```
+
+### Links
+
+```tsx
+// ✗ Bad
+<a onClick={navigate}>Go somewhere</a>
+
+// ✓ Good
+<a href="/somewhere">Go somewhere</a>
+
+// ✓ External link
+<a href="https://..." target="_blank" rel="noopener noreferrer">
+  External site
+  <span className="sr-only">(opens in new tab)</span>
+</a>
+```
+
+### Forms
+
+```tsx
+// ✓ Good
+<div>
+  <label htmlFor="email">Email</label>
+  <input
+    id="email"
+    type="email"
+    aria-describedby="email-error"
+    aria-invalid={hasError}
+  />
+  {hasError && (
+    <p id="email-error" role="alert">
+      Please enter a valid email
+    </p>
+  )}
+</div>
+```
+
+### Images
+
+```tsx
+// Informative image
+<img src="chart.png" alt="Sales increased 25% in Q4" />
+
+// Decorative image
+<img src="decoration.png" alt="" aria-hidden="true" />
+
+// Complex image
+<figure>
+  <img src="diagram.png" alt="System architecture" />
+  <figcaption>Detailed description...</figcaption>
+</figure>
+```
+
+## Required CSS
+
+```css
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Respect motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Focus visible (keyboard only) */
+:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+```
+
+## Testing Tools
+
+- **axe DevTools** — Browser extension
+- **WAVE** — wave.webaim.org
+- **Lighthouse** — Chrome DevTools
+- **VoiceOver** — macOS screen reader (Cmd + F5)
+
+## Output Format
+
+```
+A11Y AUDIT: [component/page]
+════════════════════════════
+
+CRITICAL (2)
+────────────
+[4.1.2] Line 45: Button missing accessible name
+  <button><XIcon /></button>
+  Fix: Add aria-label="Close"
+
+[2.4.7] Line 12: Focus outline removed without replacement
+  className="outline-none"
+  Fix: Use focus-visible styles instead
+
+WARNINGS (1)
+────────────
+[2.5.5] Line 78: Touch target may be too small
+  className="p-1" (32px)
+  Fix: Increase to p-2.5 minimum (44px)
+
+Score: 85/100 (AA compliant with warnings)
+```

package/templates/skills/design/design-polish/SKILL.md

@@ -0,0 +1,75 @@
+# Design Polish Skill
+
+Use this skill when doing visual polish passes on UI components.
+
+## Trigger
+
+Use when user asks to "polish", "review design", "check UI consistency", or "do a design pass".
+
+## Checklist
+
+When reviewing components, systematically check:
+
+### Spacing
+- [ ] Consistent padding (use spacing scale: 4, 8, 16, 24, 32px)
+- [ ] Proper margins between elements
+- [ ] Alignment on grid
+
+### Typography
+- [ ] Clear hierarchy (heading > subhead > body > caption)
+- [ ] Consistent font weights
+- [ ] Proper line heights for readability
+- [ ] No orphaned words in headlines
+
+### Color
+- [ ] Uses semantic colors (primary, secondary, base-content)
+- [ ] Sufficient contrast ratios (4.5:1 for text)
+- [ ] Consistent use of opacity for secondary elements
+
+### Interaction States
+- [ ] Hover states present
+- [ ] Focus states for accessibility (visible focus ring)
+- [ ] Active/pressed states
+- [ ] Disabled states where appropriate
+- [ ] Transitions smooth (150-300ms)
+
+### Responsive
+- [ ] Works at 375px (mobile)
+- [ ] Works at 768px (tablet)
+- [ ] Works at 1280px+ (desktop)
+- [ ] Touch targets 44px+ on mobile
+
+## Process
+
+1. Read the component file(s)
+2. Run through checklist silently
+3. Report findings grouped by category
+4. Offer to fix issues one at a time
+5. Show before/after for each fix
+
+## Output Format
+
+```
+## Polish Review: [Component Name]
+
+### ✅ Passing
+- Spacing is consistent
+- Typography hierarchy is clear
+
+### ⚠️ Issues Found
+
+**Spacing**
+- Card padding inconsistent (16px top, 12px bottom)
+- Missing gap between icon and label
+
+**Interaction**
+- No hover state on clickable card
+- Focus state missing
+
+### Recommended Fixes
+1. [Most impactful fix first]
+2. [Second priority]
+...
+
+Shall I fix these one at a time?
+```

package/templates/skills/design/figma-to-code/SKILL.md

@@ -0,0 +1,157 @@
+---
+name: figma-to-code
+description: Convert Figma designs to React components with pixel-perfect accuracy
+triggers:
+  - figma
+  - design to code
+  - implement design
+  - from figma
+  - mockup
+  - ui from design
+---
+
+# Figma to Code
+
+Convert Figma designs into production-ready React components.
+
+## Prerequisites
+
+### MCP Server Setup
+
+Run this command once to connect Figma to Claude Code:
+
+```bash
+claude mcp add --transport http figma https://mcp.figma.com/mcp
+```
+
+Then authenticate: type `/mcp` in Claude, select `figma`, and click "Authenticate".
+
+## Workflow
+
+### 1. Get the Figma Link
+
+User provides a Figma frame URL like:
+```
+https://www.figma.com/design/ABC123/ProjectName?node-id=1-234
+```
+
+### 2. Analyze the Design
+
+Use Figma MCP to inspect:
+- **Layout structure** - Frames, auto-layout, constraints
+- **Design tokens** - Colors, typography, spacing
+- **Components** - Reusable elements, variants
+- **Assets** - Icons, images (export if needed)
+
+### 3. Map to React + Tailwind
+
+| Figma Concept | React/Tailwind Equivalent |
+|---------------|--------------------------|
+| Frame | `<div>` with flex/grid |
+| Auto Layout | `flex` + `gap-*` |
+| Fill Container | `w-full` or `flex-1` |
+| Hug Contents | `w-fit` |
+| Constraints | `absolute` positioning |
+| Corner Radius | `rounded-*` |
+| Drop Shadow | `shadow-*` |
+| Text Styles | `text-*` + `font-*` |
+
+### 4. Generate Component
+
+```tsx
+// Example output structure
+interface ComponentProps {
+  // Props derived from Figma variants
+}
+
+export function ComponentName({ ...props }: ComponentProps) {
+  return (
+    <div className="/* Tailwind classes from Figma styles */">
+      {/* Child elements */}
+    </div>
+  )
+}
+```
+
+## Design Token Extraction
+
+When you encounter repeated values in Figma:
+
+```tsx
+// tailwind.config.js extension
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Extract from Figma color styles
+        'brand-primary': '#6366f1',
+        'brand-secondary': '#a855f7',
+      },
+      spacing: {
+        // Extract from Figma spacing
+        '18': '4.5rem',
+      },
+      borderRadius: {
+        // Extract from Figma corner radius
+        'card': '1.5rem',
+      },
+    },
+  },
+}
+```
+
+## Common Patterns
+
+### Cards
+```tsx
+<div className="bg-base-100 rounded-xl p-6 shadow-lg">
+  {/* Card content */}
+</div>
+```
+
+### Buttons (from Figma variants)
+```tsx
+<button className={cn(
+  "btn",
+  variant === 'primary' && "btn-primary",
+  variant === 'secondary' && "btn-secondary btn-outline",
+  size === 'lg' && "btn-lg",
+)}>
+  {children}
+</button>
+```
+
+### Responsive Layouts
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  {/* Responsive grid from Figma breakpoints */}
+</div>
+```
+
+## Checklist
+
+Before completing Figma-to-code conversion:
+
+- [ ] Layout matches Figma at 1:1 zoom
+- [ ] Colors use DaisyUI semantic classes (`bg-base-*`, `text-primary`)
+- [ ] Typography uses Tailwind scale (`text-lg`, `font-semibold`)
+- [ ] Spacing is consistent with Figma (use `gap-*`, `p-*`, `m-*`)
+- [ ] Interactive states match Figma (hover, focus, active)
+- [ ] Component is responsive (test at 320px, 768px, 1024px)
+- [ ] Icons are imported from Lucide React
+- [ ] No hardcoded colors (use theme variables)
+
+## Limitations
+
+- Complex animations need manual implementation
+- Multi-frame flows (carousels, onboarding) require combining frames
+- Design system updates may require regeneration
+- Figma effects like blur may need CSS equivalents
+
+## Dark Humor Corner
+
+> "The design looked simple. The implementation had other plans."
+
+> "Pixel-perfect is a lie we tell ourselves to feel productive."
+
+> "That 4px difference? No one will notice. Except you. Forever."