create-claudecraft 1.0.0

package/templates/commands/ralph.md

@@ -0,0 +1,113 @@
+# Ralph Wiggum Loop Quick Start
+
+Start an autonomous Ralph Wiggum loop for common design tasks.
+
+## Prerequisites
+
+First, install the plugin if you haven't:
+```bash
+/plugin marketplace add anthropics/claude-code
+/plugin install ralph-wiggum@claude-plugins-official
+```
+
+## Available Loop Templates
+
+### 1. Component Builder
+Build a new component with full polish:
+```bash
+/ralph-loop "Build a $ARGUMENTS component.
+
+Requirements:
+- Use DaisyUI + Tailwind CSS from our design system
+- Follow patterns in src/components/ui/
+- Include hover, focus, and active states
+- Make responsive (mobile, tablet, desktop)
+- Add TypeScript props interface
+
+Each iteration:
+1. Check component exists
+2. Run: bun run typecheck
+3. Run: bun run lint
+4. If errors, fix them
+5. When all pass, output: <promise>COMPLETE</promise>
+
+Escape: After 12 iterations, document blockers and complete." --completion-promise "COMPLETE" --max-iterations 15
+```
+
+### 2. Polish Pass
+Run a design polish pass on a file or directory:
+```bash
+/ralph-loop "Polish pass on $ARGUMENTS
+
+Check and fix:
+- Consistent spacing (4, 8, 16, 24, 32px)
+- 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 polished and checks pass, output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 20
+```
+
+### 3. Responsive Fix
+Make a component/page fully responsive:
+```bash
+/ralph-loop "Make $ARGUMENTS fully responsive.
+
+Breakpoints:
+- Mobile: 375px (touch targets 44px+)
+- Tablet: 768px
+- Desktop: 1280px+
+
+Process:
+1. Review current responsive behavior
+2. Fix layout issues at each breakpoint
+3. Run typecheck and lint
+4. When fully responsive, output: <promise>COMPLETE</promise>" --completion-promise "COMPLETE" --max-iterations 15
+```
+
+### 4. Overnight Feature Build
+Build a complete feature while you sleep:
+```bash
+/ralph-loop "Build $ARGUMENTS feature.
+
+Phases:
+1. Create component structure
+2. Implement core functionality
+3. Style with DaisyUI
+4. Make responsive
+5. Add TypeScript types
+
+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: After 25 iterations, document progress and complete." --completion-promise "COMPLETE" --max-iterations 30
+```
+
+## Usage
+
+Pick a template above, replace `$ARGUMENTS` with your target, and run.
+
+## Safety
+
+- **Always** use `--max-iterations`
+- Start small (5-10) to test, then increase
+- Use `/cancel-ralph` to stop anytime
+
+## Tips
+
+- More specific prompts = better results
+- Include verification steps (typecheck, lint)
+- Add escape hatches for stuck loops
+- Check `.claude/skills/ralph-wiggum-loops/SKILL.md` for full docs

package/templates/commands/typecheck.md

@@ -0,0 +1,44 @@
+# /typecheck Command
+
+Run TypeScript type checking and provide categorized error summary.
+
+## Steps
+
+1. Run `npx tsc --noEmit` to check types without emitting files
+
+2. Parse errors and categorize by:
+   - **Critical:** Type mismatches, missing properties
+   - **Warning:** Implicit any, unused variables
+   - **Info:** Style issues, unnecessary type assertions
+
+3. Format results as:
+
+```markdown
+## TypeScript Check Results
+
+**Status:** ✅ No errors | ⚠️ X errors found
+
+### Critical Errors
+| File | Line | Code | Message |
+|------|------|------|---------|
+| src/App.tsx | 42 | TS2322 | Type 'string' is not assignable to type 'number' |
+
+### Warnings
+| File | Line | Code | Message |
+|------|------|------|---------|
+| ... | ... | ... | ... |
+
+### Summary
+- Critical: X
+- Warnings: Y
+- Total files checked: Z
+```
+
+4. For each critical error:
+   - Show the problematic code snippet
+   - Suggest the fix
+   - Offer to apply fix
+
+5. If no errors:
+   - Report "All X files passed type checking"
+   - Note any strict mode opportunities

package/templates/commands/write-plan.md

@@ -0,0 +1,6 @@
+---
+description: Create detailed implementation plan with bite-sized tasks
+disable-model-invocation: true
+---
+
+Invoke the superpowers:writing-plans skill and follow it exactly as presented to you

package/templates/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import { Component, ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="min-h-dvh bg-base-100 text-base-content flex items-center justify-center px-6">
+          <div className="text-center max-w-md">
+            <h1 className="text-2xl font-bold mb-4 text-balance">Something went wrong</h1>
+            <p className="text-base-content/70 mb-8 text-pretty">
+              We couldn't load this page. Try refreshing or come back later.
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="btn btn-primary"
+            >
+              Refresh page
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/templates/components/ui/Button.tsx

@@ -0,0 +1,60 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error'
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  variant?: ButtonVariant
+  size?: ButtonSize
+  outline?: boolean
+  loading?: boolean
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  accent: 'btn-accent',
+  ghost: 'btn-ghost',
+  link: 'btn-link',
+  info: 'btn-info',
+  success: 'btn-success',
+  warning: 'btn-warning',
+  error: 'btn-error',
+}
+
+const sizeClasses: Record<ButtonSize, string> = {
+  xs: 'btn-xs',
+  sm: 'btn-sm',
+  md: '',
+  lg: 'btn-lg',
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  outline = false,
+  loading = false,
+  className,
+  disabled,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'btn',
+        variantClasses[variant],
+        sizeClasses[size],
+        outline && 'btn-outline',
+        className
+      )}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && <span className="loading loading-spinner" />}
+      {children}
+    </button>
+  )
+}

package/templates/components/ui/CodeBlock.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+interface CodeBlockProps {
+  children: string
+  language?: string
+}
+
+export function CodeBlock({ children, language }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="relative group">
+      <pre className="font-mono text-xs bg-base-200/80 border border-base-300 p-3 rounded-lg overflow-x-auto">
+        {language && (
+          <span className="absolute top-2 left-3 text-[10px] text-base-content/40 uppercase">
+            {language}
+          </span>
+        )}
+        <code className={language ? 'block pt-4' : ''}>{children}</code>
+      </pre>
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded-md bg-base-100/90 border border-base-300 opacity-0 group-hover:opacity-100 focus:opacity-100 hover:bg-base-100"
+        aria-label="Copy code"
+      >
+        <span aria-hidden="true">
+          {copied ? (
+            <Check className="size-3 text-success" />
+          ) : (
+            <Copy className="size-3 text-base-content/50" />
+          )}
+        </span>
+        <span className="sr-only" aria-live="polite">
+          {copied ? 'Copied to clipboard' : ''}
+        </span>
+      </button>
+    </div>
+  )
+}

package/templates/components/ui/CopyCommand.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+interface CopyCommandProps {
+  children: string
+}
+
+export function CopyCommand({ children }: CopyCommandProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="group inline-flex items-center gap-2 text-left"
+      aria-label={`Copy command: ${children}`}
+    >
+      <code className="font-mono text-sm bg-base-200/60 px-2 py-1 rounded border border-base-300/50 group-hover:border-base-300 group-focus-visible:border-base-300">
+        {children}
+      </code>
+      <span className="opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true">
+        {copied ? (
+          <Check className="size-3.5 text-success" />
+        ) : (
+          <Copy className="size-3.5 text-base-content/40" />
+        )}
+      </span>
+      <span className="sr-only" aria-live="polite">
+        {copied ? 'Copied to clipboard' : ''}
+      </span>
+    </button>
+  )
+}

package/templates/components/ui/FilePreview.tsx

@@ -0,0 +1,46 @@
+import { useState, useId } from 'react'
+
+interface FilePreviewProps {
+  filename: string
+  description: string
+  content: string
+  language?: string
+}
+
+export function FilePreview({ filename, description, content, language = 'markdown' }: FilePreviewProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const panelId = useId()
+
+  return (
+    <div className="border border-base-300 rounded-lg overflow-hidden">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between p-4 hover:bg-base-200 transition-colors text-left"
+        aria-expanded={isOpen}
+        aria-controls={panelId}
+      >
+        <div>
+          <div className="font-mono text-sm font-medium">{filename}</div>
+          <div className="text-xs text-base-content/50 mt-1">{description}</div>
+        </div>
+        <svg
+          className={`w-5 h-5 text-base-content/50 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div id={panelId} className="border-t border-base-300 bg-base-200 p-4 overflow-x-auto">
+          <pre className="text-xs font-mono text-base-content/80 whitespace-pre-wrap">
+            <code className={`language-${language}`}>{content}</code>
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/components/ui/SkipLink.tsx

@@ -0,0 +1,7 @@
+export function SkipLink() {
+  return (
+    <a href="#main-content" className="skip-link">
+      Skip to main content
+    </a>
+  )
+}

package/templates/components/ui/ThemeSelector.tsx

@@ -0,0 +1,41 @@
+import { useTheme, Theme } from '@/context/ThemeContext'
+import { Palette } from 'lucide-react'
+
+export function ThemeSelector() {
+  const { theme, setTheme, themes } = useTheme()
+
+  return (
+    <div className="dropdown dropdown-end">
+      <div tabIndex={0} role="button" aria-label="Select theme" className="btn btn-ghost gap-2">
+        <Palette className="size-5" aria-hidden="true" />
+        <span className="hidden sm:inline">Theme</span>
+        <svg
+          className="size-2 fill-current opacity-60"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 2048 2048"
+          aria-hidden="true"
+        >
+          <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" />
+        </svg>
+      </div>
+      <ul
+        tabIndex={0}
+        className="dropdown-content bg-base-200 text-base-content rounded-box z-50 w-52 max-h-96 overflow-y-auto p-2 shadow-2xl"
+      >
+        {themes.map((t) => (
+          <li key={t}>
+            <input
+              type="radio"
+              name="theme-dropdown"
+              className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
+              aria-label={t}
+              value={t}
+              checked={theme === t}
+              onChange={() => setTheme(t as Theme)}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}