@fr0mpy/component-system 2.0.0

package/bin/cli.js

@@ -0,0 +1,283 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+const TARGET_DIR = path.join(process.cwd(), '.claude');
+const args = process.argv.slice(2);
+
+// Parse flags
+const hasFlag = (...flags) => flags.some((f) => args.includes(f));
+const forceMode = hasFlag('--force', '-f');
+const mergeMode = hasFlag('--merge', '-m');
+const removeMode = hasFlag('--remove', '--uninstall', '-r');
+const helpMode = hasFlag('--help', '-h');
+const updateSkills = hasFlag('--update-skills');
+const updateRecipes = hasFlag('--update-recipes');
+const updateCommands = hasFlag('--update-commands');
+const updateMode = updateSkills || updateRecipes || updateCommands;
+
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function copySubdir(subdir) {
+  const src = path.join(TEMPLATES_DIR, subdir);
+  const dest = path.join(TARGET_DIR, subdir);
+
+  if (!fs.existsSync(src)) {
+    console.error(`❌ Source directory not found: ${subdir}`);
+    return false;
+  }
+
+  if (fs.existsSync(dest)) {
+    fs.rmSync(dest, { recursive: true });
+  }
+
+  copyDir(src, dest);
+  return true;
+}
+
+function injectStylingTrigger() {
+  const triggersDDir = path.join(TARGET_DIR, 'hooks', 'triggers.d');
+  const stylingTriggerSrc = path.join(TEMPLATES_DIR, 'hooks', 'triggers.d', 'styling.json');
+  const stylingTriggerDest = path.join(triggersDDir, 'styling.json');
+
+  if (fs.existsSync(triggersDDir) && fs.existsSync(stylingTriggerSrc)) {
+    fs.copyFileSync(stylingTriggerSrc, stylingTriggerDest);
+    return true;
+  }
+  return false;
+}
+
+function removeStylingTrigger() {
+  const stylingTrigger = path.join(TARGET_DIR, 'hooks', 'triggers.d', 'styling.json');
+  if (fs.existsSync(stylingTrigger)) {
+    fs.unlinkSync(stylingTrigger);
+    return true;
+  }
+  return false;
+}
+
+async function init() {
+  console.log('🎨 Initializing Claude Code component system...\n');
+
+  const promptSystemExists = fs.existsSync(path.join(TARGET_DIR, 'hooks'));
+  const componentSystemExists = fs.existsSync(path.join(TARGET_DIR, 'skills')) ||
+                                 fs.existsSync(path.join(TARGET_DIR, 'component-recipes'));
+
+  if (componentSystemExists && !forceMode && !mergeMode) {
+    console.log('⚠️  Component system already exists in .claude/');
+    console.log('   Use --force to overwrite, --merge to update, or use selective updates:');
+    console.log('   --update-skills, --update-recipes, --update-commands\n');
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(TEMPLATES_DIR)) {
+    console.error('❌ Templates directory not found. Package may be corrupted.');
+    process.exit(1);
+  }
+
+  // Create .claude if it doesn't exist
+  fs.mkdirSync(TARGET_DIR, { recursive: true });
+
+  if (forceMode && componentSystemExists) {
+    // Only remove component-system specific dirs
+    const componentDirs = ['skills', 'component-recipes'];
+    for (const dir of componentDirs) {
+      const dirPath = path.join(TARGET_DIR, dir);
+      if (fs.existsSync(dirPath)) {
+        fs.rmSync(dirPath, { recursive: true });
+      }
+    }
+    console.log('🗑️  Removed existing component system files.\n');
+  }
+
+  // Copy component system templates
+  copyDir(path.join(TEMPLATES_DIR, 'skills'), path.join(TARGET_DIR, 'skills'));
+  copyDir(path.join(TEMPLATES_DIR, 'component-recipes'), path.join(TARGET_DIR, 'component-recipes'));
+
+  // Copy styling commands
+  const commandsDir = path.join(TARGET_DIR, 'commands');
+  fs.mkdirSync(commandsDir, { recursive: true });
+  fs.copyFileSync(
+    path.join(TEMPLATES_DIR, 'commands', 'setup-styling.md'),
+    path.join(commandsDir, 'setup-styling.md')
+  );
+  fs.copyFileSync(
+    path.join(TEMPLATES_DIR, 'commands', 'component-harness.md'),
+    path.join(commandsDir, 'component-harness.md')
+  );
+
+  console.log('✅ Created component system files:');
+  console.log('   📁 skills/            - Styling skill for UI generation');
+  console.log('   📁 component-recipes/ - 36 component templates');
+  console.log('   📄 commands/setup-styling.md');
+  console.log('   📄 commands/component-harness.md\n');
+
+  // Inject styling trigger if prompt-system is installed
+  if (promptSystemExists) {
+    if (injectStylingTrigger()) {
+      console.log('✅ Injected styling trigger into prompt system.');
+      console.log('   Styling-related prompts will now auto-trigger the styling skill.\n');
+    }
+  } else {
+    console.log('ℹ️  Prompt system not detected.');
+    console.log('   For auto-triggering styling rules, also install:');
+    console.log('   npx @fr0mpy/prompt-system\n');
+  }
+
+  console.log('🚀 Ready! Use /setup-styling to configure your design system.\n');
+}
+
+async function update() {
+  if (!fs.existsSync(TARGET_DIR)) {
+    console.error('❌ .claude directory not found. Run without flags to initialize first.');
+    process.exit(1);
+  }
+
+  console.log('🔄 Updating selected components...\n');
+
+  const updates = [];
+
+  if (updateSkills && copySubdir('skills')) updates.push('skills');
+  if (updateRecipes && copySubdir('component-recipes')) updates.push('component-recipes');
+  if (updateCommands) {
+    const commandsDir = path.join(TARGET_DIR, 'commands');
+    fs.mkdirSync(commandsDir, { recursive: true });
+    fs.copyFileSync(
+      path.join(TEMPLATES_DIR, 'commands', 'setup-styling.md'),
+      path.join(commandsDir, 'setup-styling.md')
+    );
+    fs.copyFileSync(
+      path.join(TEMPLATES_DIR, 'commands', 'component-harness.md'),
+      path.join(commandsDir, 'component-harness.md')
+    );
+    updates.push('commands');
+  }
+
+  if (updates.length > 0) {
+    console.log(`✅ Updated: ${updates.join(', ')}\n`);
+  } else {
+    console.log('⚠️  No components updated.\n');
+  }
+}
+
+function remove() {
+  if (!fs.existsSync(TARGET_DIR)) {
+    console.log('ℹ️  .claude directory does not exist. Nothing to remove.\n');
+    return;
+  }
+
+  // Check if prompt-system exists - if so, only remove component-system files
+  const hasHooks = fs.existsSync(path.join(TARGET_DIR, 'hooks'));
+
+  const componentDirs = ['skills', 'component-recipes'];
+  const componentCommands = ['setup-styling.md', 'component-harness.md'];
+
+  for (const dir of componentDirs) {
+    const dirPath = path.join(TARGET_DIR, dir);
+    if (fs.existsSync(dirPath)) {
+      fs.rmSync(dirPath, { recursive: true });
+    }
+  }
+
+  // Remove styling commands
+  const commandsDir = path.join(TARGET_DIR, 'commands');
+  if (fs.existsSync(commandsDir)) {
+    for (const cmd of componentCommands) {
+      const cmdPath = path.join(commandsDir, cmd);
+      if (fs.existsSync(cmdPath)) {
+        fs.unlinkSync(cmdPath);
+      }
+    }
+  }
+
+  // Remove styling trigger
+  removeStylingTrigger();
+
+  // Remove styling-config.json if it exists
+  const stylingConfig = path.join(TARGET_DIR, 'styling-config.json');
+  if (fs.existsSync(stylingConfig)) {
+    fs.unlinkSync(stylingConfig);
+  }
+
+  if (hasHooks) {
+    console.log('✅ Removed component system files. Prompt system preserved.\n');
+  } else {
+    // If nothing else remains, remove .claude entirely
+    const remaining = fs.readdirSync(TARGET_DIR);
+    if (remaining.length === 0 || (remaining.length === 1 && remaining[0] === 'commands')) {
+      fs.rmSync(TARGET_DIR, { recursive: true });
+      console.log('✅ Removed .claude directory.\n');
+    } else {
+      console.log('✅ Removed component system files.\n');
+    }
+  }
+}
+
+function showHelp() {
+  console.log(`
+@fr0mpy/component-system - Claude Code UI styling and component system
+
+Usage:
+  npx @fr0mpy/component-system              Initialize in current directory
+  npx @fr0mpy/component-system --merge      Add to existing .claude (default behavior)
+  npx @fr0mpy/component-system --force      Overwrite existing component files
+  npx @fr0mpy/component-system --remove     Remove component system files
+
+Selective updates:
+  --update-skills    Update only skills/
+  --update-recipes   Update only component-recipes/
+  --update-commands  Update only styling commands
+
+Options:
+  -h, --help     Show this help message
+  -f, --force    Overwrite existing component system files
+  -m, --merge    Merge with existing .claude directory
+  -r, --remove   Remove component system (alias: --uninstall)
+
+What's included:
+  • skills/            Styling skill for consistent UI generation
+  • component-recipes/ 36 pre-built component templates
+  • commands/          /setup-styling, /component-harness
+
+Getting started:
+  1. Run: npx @fr0mpy/component-system
+  2. Use: /setup-styling to configure your design system
+  3. Use: /component-harness to preview components
+
+For prompt injection and agents:
+  npx @fr0mpy/prompt-system
+
+Learn more: https://github.com/fr0mpy/claude-base-setup
+`);
+}
+
+async function main() {
+  if (helpMode) {
+    showHelp();
+  } else if (removeMode) {
+    remove();
+  } else if (updateMode) {
+    await update();
+  } else {
+    await init();
+  }
+}
+
+main();

package/index.js

@@ -0,0 +1,12 @@
+/**
+ * @claude-tools/component-system
+ *
+ * Claude Code UI styling system with design tokens, component recipes, and visual preview harness.
+ */
+
+const path = require('path');
+
+module.exports = {
+  name: '@claude-tools/component-system',
+  templatesDir: path.join(__dirname, 'templates'),
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@fr0mpy/component-system",
+  "version": "2.0.0",
+  "description": "Claude Code UI styling system with design tokens, 36 component recipes, and visual harness",
+  "main": "index.js",
+  "bin": {
+    "fromp-component-system": "./bin/cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Tests not yet configured\""
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ui",
+    "components",
+    "tailwind",
+    "design-tokens",
+    "styling",
+    "react"
+  ],
+  "author": "fr0mpy",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fr0mpy/claude-base-setup.git",
+    "directory": "packages/component-system"
+  },
+  "files": [
+    "bin/",
+    "templates/",
+    "index.js"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "peerDependencies": {
+    "@fr0mpy/prompt-system": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@fr0mpy/prompt-system": {
+      "optional": true
+    }
+  }
+}

package/templates/commands/component-harness.md

@@ -0,0 +1,116 @@
+Launch the visual component harness to preview and iterate on your design system components.
+
+## Prerequisites
+- Run `/setup-styling` first to generate styling config and component recipes
+- Node.js 18+ installed
+
+## Workflow
+
+1. **Check for styling config**
+   - If `.claude/styling-config.json` doesn't exist, prompt to run `/setup-styling` first
+
+2. **Check if component-harness exists**
+   - Look for `component-harness/` directory in project root
+   - If not found, scaffold it from templates
+
+3. **Scaffold component-harness** (if needed)
+   Create the following structure:
+   ```
+   component-harness/
+   ├── index.html
+   ├── main.tsx
+   ├── App.tsx
+   ├── Gallery.tsx
+   ├── ComponentPreview.tsx
+   ├── components/           # Generated components go here
+   │   ├── Button.tsx
+   │   ├── Card.tsx
+   │   └── ...
+   ├── lib/
+   │   └── utils.ts          # cn() utility
+   ├── vite.config.ts
+   ├── tailwind.config.ts
+   ├── postcss.config.js
+   ├── tsconfig.json
+   └── package.json
+   ```
+
+4. **Generate components from recipes (resumable)**
+   - List all `.claude/component-recipes/*.md` files
+   - For each recipe, check if matching `.tsx` component exists
+   - Only generate missing components (skip existing ones)
+   - Use tokens from `.claude/styling-config.json`
+   - Update `components/index.ts` to export all components
+
+5. **Validate completeness**
+   - Count recipes vs generated components
+   - If any missing, loop back to step 4
+   - Only proceed when: `✓ [N]/[N] components generated`
+
+6. **Install dependencies** (if package.json is new)
+   ```bash
+   cd component-harness && npm install
+   ```
+
+7. **Start dev server**
+   ```bash
+   cd component-harness && npm run dev
+   ```
+
+8. **Open browser**
+   - Open `http://localhost:5173` (or configured port)
+
+## Harness Features
+
+### Navigation
+- Left/right chevron buttons to cycle through components
+- Component name displayed in header
+- Variant selector for components with multiple variants
+
+### Live Preview
+- Component rendered in isolated preview area
+- Props can be adjusted in real-time
+- Dark/light mode toggle
+
+### Change Requests
+- "Request Change" button that:
+  1. Prompts user to describe desired change
+  2. Claude updates the recipe and regenerates component
+  3. HMR updates the preview instantly
+
+## Generated Gallery.tsx Structure
+
+```tsx
+// Core navigation and preview
+- useState for currentComponentIndex
+- Array of all components with their variants
+- Left/Right chevron navigation
+- Component name + variant display
+- Isolated preview area
+- "Request Change" button
+```
+
+## package.json Dependencies
+
+```json
+{
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "lucide-react": "^0.300.0",
+    "@radix-ui/react-slot": "^1.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.0.0",
+    "autoprefixer": "^10.0.0"
+  }
+}
+```
+
+$ARGUMENTS

package/templates/commands/setup-styling.md

@@ -0,0 +1,111 @@
+Define your unique UI aesthetic for consistent component generation.
+
+This command creates a personalized styling system. Once configured, the `styling` skill will automatically apply these tokens and recipes when generating UI components.
+
+## Workflow
+
+1. **Check for existing tokens** - Look for `tailwind.config.*` or existing `.claude/styling-config.json`
+2. **Ask aesthetic questions** using AskUserQuestion tool:
+
+   **Q1: Import existing?**
+   - If `tailwind.config.*` found: "Found tailwind config. Import colors/spacing from it?"
+   - Options: [Yes, import] [No, start fresh]
+
+   **Q2: Overall aesthetic feel**
+   - Options: [Minimal - clean, lots of whitespace] [Bold - strong colors, high contrast] [Playful - rounded, colorful, fun] [Enterprise - professional, structured] [Custom - I'll describe it]
+
+   **Q3: Color philosophy**
+   - Options: [Monochrome - shades of one color] [Vibrant - bright, saturated colors] [Muted pastels - soft, calm colors] [Earth tones - natural, warm colors] [Custom - I'll provide hex values]
+   - If Custom: Ask for primary, secondary, background, surface, text colors
+
+   **Q4: Typography**
+   - Options: [Modern sans (Inter/system)] [Classic serif] [Monospace/technical] [Custom font family]
+
+   **Q5: Component personality**
+   - Corners: [Sharp (rounded-none)] [Subtle (rounded-sm)] [Rounded (rounded-lg)] [Pill (rounded-full)]
+   - Shadows: [Flat (no shadows)] [Subtle (shadow-sm)] [Pronounced (shadow-lg)] [Glassmorphism]
+   - Density: [Compact (tight spacing)] [Comfortable (normal)] [Spacious (generous padding)]
+
+3. **Generate `.claude/styling-config.json`** with structure:
+```json
+{
+  "aesthetic": "minimal",
+  "tokens": {
+    "colors": {
+      "primary": "#0066FF",
+      "primary-foreground": "#FFFFFF",
+      "secondary": "#6C5CE7",
+      "secondary-foreground": "#FFFFFF",
+      "background": "#FFFFFF",
+      "foreground": "#1A1A1A",
+      "surface": "#F5F5F5",
+      "muted": "#6B7280",
+      "muted-foreground": "#9CA3AF",
+      "border": "#E5E7EB",
+      "destructive": "#EF4444",
+      "destructive-foreground": "#FFFFFF"
+    },
+    "radius": "rounded-lg",
+    "shadow": "shadow-sm",
+    "spacing": {
+      "tight": "2",
+      "normal": "4",
+      "loose": "6"
+    },
+    "typography": {
+      "family": "font-sans",
+      "heading": "font-semibold tracking-tight",
+      "body": "font-normal"
+    }
+  },
+  "personality": {
+    "corners": "rounded",
+    "depth": "subtle-shadows",
+    "density": "comfortable"
+  }
+}
+```
+
+4. **Generate `.claude/component-recipes/`** directory with recipes for each component type:
+   - button.md, card.md, input.md, modal.md, select.md
+   - checkbox.md, radio.md, badge.md, alert.md, avatar.md
+   - tooltip.md, table.md, tabs.md, accordion.md, dialog.md, toast.md
+
+   Each recipe should reference `{tokens.*}` from the config and follow the aesthetic choices.
+
+5. **Ask about component-harness**: "Want me to scaffold the visual component-harness for previewing?"
+
+## Recipe Template
+
+When generating each recipe, follow this structure:
+```markdown
+# [Component] Component Recipe
+
+## Structure
+- HTML element to use
+- Supported variants
+- Supported sizes
+- Required states (loading, disabled, etc.)
+
+## Tailwind Classes
+- Base: [base classes that apply to all variants]
+- [Variant]: [classes for this variant using {tokens.*} references]
+- Sizes: [size-specific classes]
+- States: [hover, focus, disabled classes]
+
+## Props Interface
+- variant: [list of variants]
+- size: [list of sizes]
+- [other props]
+
+## Do
+- [best practices]
+
+## Don't
+- [anti-patterns]
+
+## Example
+[code example]
+```
+
+$ARGUMENTS