real-prototypes-skill 0.1.0

package/.claude/skills/real-prototypes-skill/scripts/manifest-schema.json

@@ -0,0 +1,302 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://real-prototypes-skill/manifest-schema.json",
+  "title": "Platform Prototype Manifest",
+  "description": "Schema for validating platform prototype reference manifest files",
+  "type": "object",
+  "required": ["platform", "pages"],
+  "properties": {
+    "platform": {
+      "type": "object",
+      "description": "Platform identification and metadata",
+      "required": ["name"],
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Name of the platform being prototyped",
+          "minLength": 1
+        },
+        "url": {
+          "type": "string",
+          "description": "Base URL of the platform",
+          "format": "uri"
+        },
+        "version": {
+          "type": "string",
+          "description": "Version identifier for the reference capture"
+        },
+        "capturedAt": {
+          "type": "string",
+          "description": "ISO 8601 timestamp when references were captured",
+          "format": "date-time"
+        }
+      },
+      "additionalProperties": true
+    },
+    "pages": {
+      "type": "array",
+      "description": "List of captured pages/views",
+      "items": {
+        "type": "object",
+        "required": ["id", "name"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "Unique identifier for the page",
+            "pattern": "^[a-z0-9-]+$"
+          },
+          "name": {
+            "type": "string",
+            "description": "Human-readable name of the page"
+          },
+          "path": {
+            "type": "string",
+            "description": "URL path or route for the page"
+          },
+          "description": {
+            "type": "string",
+            "description": "Brief description of the page purpose"
+          },
+          "screenshots": {
+            "type": "array",
+            "description": "Screenshot files for this page",
+            "items": {
+              "type": "object",
+              "required": ["file"],
+              "properties": {
+                "file": {
+                  "type": "string",
+                  "description": "Filename of the screenshot"
+                },
+                "viewport": {
+                  "type": "string",
+                  "description": "Viewport size (e.g., 'desktop', 'mobile', '1920x1080')"
+                },
+                "state": {
+                  "type": "string",
+                  "description": "UI state captured (e.g., 'default', 'hover', 'expanded')"
+                },
+                "description": {
+                  "type": "string",
+                  "description": "Description of what the screenshot shows"
+                }
+              },
+              "additionalProperties": true
+            }
+          },
+          "html": {
+            "type": "object",
+            "description": "HTML capture for this page",
+            "properties": {
+              "file": {
+                "type": "string",
+                "description": "Filename of the HTML file"
+              },
+              "capturedAt": {
+                "type": "string",
+                "description": "ISO 8601 timestamp when HTML was captured",
+                "format": "date-time"
+              }
+            },
+            "additionalProperties": true
+          },
+          "components": {
+            "type": "array",
+            "description": "Key components identified on this page",
+            "items": {
+              "type": "string"
+            }
+          },
+          "priority": {
+            "type": "string",
+            "description": "Implementation priority",
+            "enum": ["high", "medium", "low"]
+          }
+        },
+        "additionalProperties": true
+      }
+    },
+    "designTokens": {
+      "type": "object",
+      "description": "Design tokens extracted from the platform",
+      "properties": {
+        "colors": {
+          "type": "object",
+          "description": "Color palette",
+          "properties": {
+            "primary": {
+              "type": "string",
+              "description": "Primary brand color"
+            },
+            "secondary": {
+              "type": "string",
+              "description": "Secondary brand color"
+            },
+            "background": {
+              "type": "string",
+              "description": "Main background color"
+            },
+            "surface": {
+              "type": "string",
+              "description": "Surface/card background color"
+            },
+            "text": {
+              "type": "string",
+              "description": "Primary text color"
+            },
+            "textSecondary": {
+              "type": "string",
+              "description": "Secondary text color"
+            },
+            "border": {
+              "type": "string",
+              "description": "Default border color"
+            },
+            "accent": {
+              "type": "string",
+              "description": "Accent/highlight color"
+            },
+            "error": {
+              "type": "string",
+              "description": "Error state color"
+            },
+            "success": {
+              "type": "string",
+              "description": "Success state color"
+            },
+            "warning": {
+              "type": "string",
+              "description": "Warning state color"
+            }
+          },
+          "additionalProperties": true
+        },
+        "typography": {
+          "type": "object",
+          "description": "Typography settings",
+          "properties": {
+            "fontFamily": {
+              "type": "string",
+              "description": "Primary font family stack"
+            },
+            "fontFamilyMono": {
+              "type": "string",
+              "description": "Monospace font family stack"
+            },
+            "baseFontSize": {
+              "type": "string",
+              "description": "Base font size (e.g., '16px')"
+            },
+            "lineHeight": {
+              "type": "string",
+              "description": "Default line height"
+            },
+            "headings": {
+              "type": "object",
+              "description": "Heading styles",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "fontSize": { "type": "string" },
+                  "fontWeight": { "type": "string" },
+                  "lineHeight": { "type": "string" }
+                }
+              }
+            }
+          },
+          "additionalProperties": true
+        },
+        "spacing": {
+          "type": "object",
+          "description": "Spacing scale",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "borderRadius": {
+          "type": "object",
+          "description": "Border radius values",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "shadows": {
+          "type": "object",
+          "description": "Box shadow definitions",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "breakpoints": {
+          "type": "object",
+          "description": "Responsive breakpoints",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "transitions": {
+          "type": "object",
+          "description": "Transition/animation settings",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      },
+      "additionalProperties": true
+    },
+    "components": {
+      "type": "array",
+      "description": "Global component inventory",
+      "items": {
+        "type": "object",
+        "required": ["name"],
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Component name"
+          },
+          "description": {
+            "type": "string",
+            "description": "Component description"
+          },
+          "usedOn": {
+            "type": "array",
+            "description": "Page IDs where this component appears",
+            "items": {
+              "type": "string"
+            }
+          },
+          "variants": {
+            "type": "array",
+            "description": "Component variants",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "additionalProperties": true
+      }
+    },
+    "metadata": {
+      "type": "object",
+      "description": "Additional metadata",
+      "properties": {
+        "generatedAt": {
+          "type": "string",
+          "description": "ISO 8601 timestamp when manifest was generated",
+          "format": "date-time"
+        },
+        "generatedBy": {
+          "type": "string",
+          "description": "Tool or person that generated the manifest"
+        },
+        "notes": {
+          "type": "string",
+          "description": "Additional notes about the reference capture"
+        }
+      },
+      "additionalProperties": true
+    }
+  },
+  "additionalProperties": true
+}

package/.claude/skills/real-prototypes-skill/scripts/setup-prototype.sh

@@ -0,0 +1,167 @@
+#!/bin/bash
+
+# Setup script for creating a new Next.js prototype project
+# Usage: ./setup-prototype.sh [project-name]
+
+PROJECT_NAME=${1:-prototype}
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+SKILL_DIR="$(dirname "$SCRIPT_DIR")"
+ROOT_DIR="$(dirname "$(dirname "$(dirname "$SKILL_DIR")")")"
+
+echo "Setting up prototype project: $PROJECT_NAME"
+
+# Check if project already exists
+if [ -d "$ROOT_DIR/$PROJECT_NAME" ]; then
+    echo "Project directory already exists. Skipping scaffold."
+else
+    echo "Creating Next.js project..."
+    cd "$ROOT_DIR"
+    npx create-next-app@latest "$PROJECT_NAME" \
+        --typescript \
+        --tailwind \
+        --eslint \
+        --app \
+        --src-dir \
+        --no-import-alias \
+        --use-npm
+fi
+
+cd "$ROOT_DIR/$PROJECT_NAME"
+
+# Initialize shadcn/ui
+echo "Initializing shadcn/ui..."
+npx shadcn@latest init -d -y
+
+# Add common components
+echo "Adding shadcn/ui components..."
+npx shadcn@latest add button card input label dialog table tabs -y
+
+# Create platform color tokens in tailwind config
+echo "Updating Tailwind config with platform tokens..."
+cat > tailwind.config.ts << 'EOF'
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        platform: {
+          primary: "var(--platform-primary, #3B82F6)",
+          secondary: "var(--platform-secondary, #10B981)",
+          background: "var(--platform-background, #FFFFFF)",
+          foreground: "var(--platform-foreground, #1F2937)",
+          muted: "var(--platform-muted, #F3F4F6)",
+          border: "var(--platform-border, #E5E7EB)",
+        },
+      },
+      fontFamily: {
+        platform: ["var(--platform-font, Inter)", "sans-serif"],
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
+EOF
+
+# Create CSS variables file
+mkdir -p src/styles
+cat > src/styles/platform-tokens.css << 'EOF'
+/* Platform Design Tokens
+   These values will be replaced by the extract-tokens script
+   based on the captured platform styles */
+
+:root {
+  --platform-primary: #3B82F6;
+  --platform-secondary: #10B981;
+  --platform-background: #FFFFFF;
+  --platform-foreground: #1F2937;
+  --platform-muted: #F3F4F6;
+  --platform-border: #E5E7EB;
+  --platform-font: "Inter", sans-serif;
+}
+EOF
+
+# Update global CSS to import tokens
+cat > src/app/globals.css << 'EOF'
+@import "../styles/platform-tokens.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-platform-border;
+  }
+  body {
+    @apply bg-platform-background text-platform-foreground font-platform;
+  }
+}
+EOF
+
+# Create features directory
+mkdir -p src/components/features
+
+# Create example feature component
+cat > src/components/features/ExampleFeature.tsx << 'EOF'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface ExampleFeatureProps {
+  title?: string;
+}
+
+export function ExampleFeature({ title = "New Feature" }: ExampleFeatureProps) {
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="text-platform-primary">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-platform-foreground/80">
+          This is a prototype feature matching your platform&apos;s design.
+        </p>
+        <Button className="bg-platform-primary hover:bg-platform-primary/90">
+          Take Action
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+EOF
+
+# Create feature page
+mkdir -p src/app/feature
+cat > src/app/feature/page.tsx << 'EOF'
+import { ExampleFeature } from "@/components/features/ExampleFeature";
+
+export default function FeaturePage() {
+  return (
+    <main className="min-h-screen bg-platform-background p-8">
+      <div className="max-w-4xl mx-auto space-y-8">
+        <h1 className="text-3xl font-bold text-platform-foreground">
+          Feature Prototype
+        </h1>
+        <ExampleFeature title="Your New Feature" />
+      </div>
+    </main>
+  );
+}
+EOF
+
+echo ""
+echo "✓ Prototype project setup complete!"
+echo ""
+echo "Next steps:"
+echo "  cd $PROJECT_NAME"
+echo "  npm run dev"
+echo ""
+echo "View prototype at: http://localhost:3000/feature"
+EOF