omnidesign 1.0.0

package/bin/cli.js

@@ -0,0 +1,390 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
+
+program
+  .name('omnidesign')
+  .description('Universal design system skill for AI coding assistants')
+  .version(packageJson.version);
+
+program
+  .command('install')
+  .description('Install OmniDesign skill for your IDE')
+  .option('-i, --ide <ide>', 'Target IDE (claude, cursor, opencode, vscode, aider, continue, zed, amp, kilo, antigravity)')
+  .option('-g, --global', 'Install globally (default: project-level)')
+  .action(async (options) => {
+    console.log(chalk.blue('🎨 OmniDesign Skill Installer\n'));
+    
+    const detectedIde = options.ide || detectIDE();
+    
+    if (!detectedIde) {
+      console.log(chalk.yellow('⚠️  Could not auto-detect IDE. Please specify with --ide flag'));
+      console.log(chalk.gray('Supported: claude, cursor, opencode, vscode, aider, continue, zed, amp, kilo, antigravity'));
+      process.exit(1);
+    }
+    
+    console.log(chalk.green(`✓ Detected IDE: ${detectedIde}\n`));
+    
+    try {
+      await installSkill(detectedIde, options.global);
+      console.log(chalk.green('\n✅ OmniDesign skill installed successfully!'));
+      console.log(chalk.gray('\nNext steps:'));
+      console.log(chalk.gray('  1. Restart your IDE if needed'));
+      console.log(chalk.gray('  2. Try: "Use the OmniDesign theme cyberpunk"'));
+      console.log(chalk.gray('  3. See: https://omnidesign.dev/docs'));
+    } catch (error) {
+      console.error(chalk.red('\n❌ Installation failed:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('list')
+  .description('List available IDE integrations')
+  .action(() => {
+    console.log(chalk.blue('🎨 Supported IDEs:\n'));
+    
+    const ides = [
+      { name: 'Claude Code', cmd: 'claude', file: '.claude/skills/omnidesign.md' },
+      { name: 'Cursor', cmd: 'cursor', file: '.cursor/skills/omnidesign.md' },
+      { name: 'OpenCode', cmd: 'opencode', file: '.opencode/skills/omnidesign.md' },
+      { name: 'VS Code', cmd: 'vscode', file: '.vscode/settings.json' },
+      { name: 'Zed', cmd: 'zed', file: '.zed/omnidesign.json' },
+      { name: 'Amp Code', cmd: 'amp', file: '.agents/skills/omnidesign/SKILL.md' },
+      { name: 'Kilo Code', cmd: 'kilo', file: '.kilocode/skills/omnidesign/SKILL.md' },
+      { name: 'Antigravity', cmd: 'antigravity', file: '.agent/skills/omnidesign/SKILL.md' },
+      { name: 'Aider', cmd: 'aider', file: 'CONVENTIONS.md' },
+      { name: 'Continue.dev', cmd: 'continue', file: '.continue/config.yaml' },
+    ];
+    
+    ides.forEach(ide => {
+      const installed = fs.existsSync(path.join(process.cwd(), ide.file));
+      const status = installed ? chalk.green('✓ installed') : chalk.gray('not installed');
+      console.log(`  ${chalk.bold(ide.name)}: ${status}`);
+      console.log(`    Config: ${ide.file}`);
+      console.log();
+    });
+  });
+
+program
+  .command('uninstall')
+  .description('Remove OmniDesign skill from your IDE')
+  .option('-i, --ide <ide>', 'Target IDE')
+  .action(async (options) => {
+    const detectedIde = options.ide || detectIDE();
+    
+    if (!detectedIde) {
+      console.log(chalk.yellow('⚠️  Please specify IDE with --ide flag'));
+      return;
+    }
+    
+    console.log(chalk.blue(`Removing OmniDesign from ${detectedIde}...`));
+    await uninstallSkill(detectedIde);
+    console.log(chalk.green('✅ Uninstalled successfully'));
+  });
+
+function detectIDE() {
+  const cwd = process.cwd();
+  
+  if (fs.existsSync(path.join(cwd, '.claude'))) return 'claude';
+  if (fs.existsSync(path.join(cwd, '.cursor'))) return 'cursor';
+  if (fs.existsSync(path.join(cwd, '.opencode'))) return 'opencode';
+  if (fs.existsSync(path.join(cwd, '.vscode'))) return 'vscode';
+  if (fs.existsSync(path.join(cwd, '.zed'))) return 'zed';
+  if (fs.existsSync(path.join(cwd, '.amp'))) return 'amp';
+  if (fs.existsSync(path.join(cwd, '.kilocode'))) return 'kilo';
+  if (fs.existsSync(path.join(cwd, '.antigravity'))) return 'antigravity';
+  if (fs.existsSync(path.join(cwd, '.agents'))) return 'amp';
+  if (fs.existsSync(path.join(cwd, '.aider.conf.yml'))) return 'aider';
+  if (fs.existsSync(path.join(cwd, '.continue'))) return 'continue';
+  if (fs.existsSync(path.join(cwd, 'claude.md'))) return 'claude';
+  if (fs.existsSync(path.join(cwd, '.cursorrules'))) return 'cursor';
+  if (process.env.CLAUDE_CODE) return 'claude';
+  if (process.env.CURSOR_TRACE) return 'cursor';
+  
+  return null;
+}
+
+async function installSkill(ide, global = false) {
+  const cwd = process.cwd();
+  const skillsDir = path.join(__dirname, '..', 'skills', ide);
+  
+  if (!fs.existsSync(skillsDir)) {
+    throw new Error(`Skill files for ${ide} not found`);
+  }
+  
+  switch (ide) {
+    case 'claude':
+      await installClaudeSkill(cwd, skillsDir, global);
+      break;
+    case 'cursor':
+      await installCursorSkill(cwd, skillsDir, global);
+      break;
+    case 'opencode':
+      await installOpenCodeSkill(cwd, skillsDir, global);
+      break;
+    case 'vscode':
+      await installVSCodeSkill(cwd, skillsDir, global);
+      break;
+    case 'aider':
+      await installAiderSkill(cwd, skillsDir, global);
+      break;
+    case 'continue':
+      await installContinueSkill(cwd, skillsDir, global);
+      break;
+    case 'zed':
+      await installZedSkill(cwd, skillsDir, global);
+      break;
+    case 'amp':
+      await installAmpSkill(cwd, skillsDir, global);
+      break;
+    case 'kilo':
+      await installKiloSkill(cwd, skillsDir, global);
+      break;
+    case 'antigravity':
+      await installAntigravitySkill(cwd, skillsDir, global);
+      break;
+    default:
+      throw new Error(`Unsupported IDE: ${ide}`);
+  }
+}
+
+async function installClaudeSkill(cwd, skillsDir, global) {
+  const targetDir = global 
+    ? path.join(require('os').homedir(), '.claude', 'skills')
+    : path.join(cwd, '.claude', 'skills');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'omnidesign.md'),
+    path.join(targetDir, 'omnidesign.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'omnidesign.md'))}`));
+  
+  const marketplacePath = global
+    ? path.join(require('os').homedir(), '.claude', 'marketplace.json')
+    : path.join(cwd, '.claude', 'marketplace.json');
+  
+  let marketplace = { name: 'local', plugins: [] };
+  if (fs.existsSync(marketplacePath)) {
+    marketplace = JSON.parse(fs.readFileSync(marketplacePath, 'utf8'));
+  }
+  
+  if (!marketplace.plugins.find(p => p.name === 'omnidesign')) {
+    marketplace.plugins.push({
+      name: 'omnidesign',
+      source: './skills/omnidesign.md',
+      description: 'Universal design system with 25 themes and AI components',
+      version: '1.0.0'
+    });
+    fs.writeFileSync(marketplacePath, JSON.stringify(marketplace, null, 2));
+    console.log(chalk.gray(`  Updated: ${path.relative(cwd, marketplacePath)}`));
+  }
+}
+
+async function installCursorSkill(cwd, skillsDir, global) {
+  const targetDir = global
+    ? path.join(require('os').homedir(), '.cursor', 'skills')
+    : path.join(cwd, '.cursor', 'skills');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'omnidesign.md'),
+    path.join(targetDir, 'omnidesign.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'omnidesign.md'))}`));
+}
+
+async function installOpenCodeSkill(cwd, skillsDir, global) {
+  const targetDir = global
+    ? path.join(require('os').homedir(), '.config', 'opencode', 'skills')
+    : path.join(cwd, '.opencode', 'skills');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'omnidesign.md'),
+    path.join(targetDir, 'omnidesign.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'omnidesign.md'))}`));
+  
+  const configPath = global
+    ? path.join(require('os').homedir(), '.config', 'opencode', 'config.json')
+    : path.join(cwd, '.opencode', 'config.json');
+  
+  let config = { plugins: [] };
+  if (fs.existsSync(configPath)) {
+    config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  }
+  
+  if (!config.plugins.includes('omnidesign')) {
+    config.plugins.push('omnidesign');
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+    console.log(chalk.gray(`  Updated: ${path.relative(cwd, configPath)}`));
+  }
+}
+
+async function installVSCodeSkill(cwd, skillsDir, global) {
+  const targetDir = path.join(cwd, '.vscode');
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  const settingsPath = path.join(targetDir, 'settings.json');
+  let settings = {};
+  
+  if (fs.existsSync(settingsPath)) {
+    settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+  }
+  
+  settings['omnidesign.enabled'] = true;
+  settings['omnidesign.theme'] = 'corporate';
+  
+  fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+  console.log(chalk.gray(`  Updated: ${path.relative(cwd, settingsPath)}`));
+}
+
+async function installAiderSkill(cwd, skillsDir, global) {
+  const conventionsPath = path.join(cwd, 'CONVENTIONS.md');
+  
+  fs.copyFileSync(path.join(skillsDir, 'omnidesign.md'), conventionsPath);
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, conventionsPath)}`));
+  
+  const configPath = path.join(cwd, '.aider.conf.yml');
+  if (fs.existsSync(configPath)) {
+    let config = fs.readFileSync(configPath, 'utf8');
+    if (!config.includes('CONVENTIONS.md')) {
+      config += '\nread: CONVENTIONS.md\n';
+      fs.writeFileSync(configPath, config);
+      console.log(chalk.gray(`  Updated: ${path.relative(cwd, configPath)}`));
+    }
+  }
+}
+
+async function installContinueSkill(cwd, skillsDir, global) {
+  const targetDir = path.join(cwd, '.continue');
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  const skillRefPath = path.join(targetDir, 'omnidesign.yaml');
+  fs.copyFileSync(path.join(skillsDir, 'omnidesign.yaml'), skillRefPath);
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, skillRefPath)}`));
+  console.log(chalk.yellow('  Note: Please manually add OmniDesign to your Continue config'));
+}
+
+async function installZedSkill(cwd, skillsDir, global) {
+  const targetDir = path.join(cwd, '.zed');
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  const configPath = path.join(targetDir, 'omnidesign.json');
+  const config = {
+    name: 'OmniDesign',
+    version: '1.0.0',
+    description: 'Universal design system skill',
+    enabled: true
+  };
+  
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, configPath)}`));
+  console.log(chalk.yellow('  Note: Add OmniDesign to your Zed settings.json'));
+}
+
+async function installAmpSkill(cwd, skillsDir, global) {
+  const targetDir = global
+    ? path.join(require('os').homedir(), '.config', 'agents', 'skills', 'omnidesign')
+    : path.join(cwd, '.agents', 'skills', 'omnidesign');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'SKILL.md'),
+    path.join(targetDir, 'SKILL.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'SKILL.md'))}`));
+  console.log(chalk.blue('  You can also use: amp skill add owner/omnidesign'));
+}
+
+async function installKiloSkill(cwd, skillsDir, global) {
+  const targetDir = global
+    ? path.join(require('os').homedir(), '.kilocode', 'skills', 'omnidesign')
+    : path.join(cwd, '.kilocode', 'skills', 'omnidesign');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'SKILL.md'),
+    path.join(targetDir, 'SKILL.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'SKILL.md'))}`));
+  console.log(chalk.yellow('  Reload VS Code window to activate skill'));
+}
+
+async function installAntigravitySkill(cwd, skillsDir, global) {
+  const targetDir = global
+    ? path.join(require('os').homedir(), '.gemini', 'antigravity', 'skills', 'omnidesign')
+    : path.join(cwd, '.agent', 'skills', 'omnidesign');
+  
+  fs.mkdirSync(targetDir, { recursive: true });
+  
+  fs.copyFileSync(
+    path.join(skillsDir, 'SKILL.md'),
+    path.join(targetDir, 'SKILL.md')
+  );
+  
+  console.log(chalk.gray(`  Created: ${path.relative(cwd, path.join(targetDir, 'SKILL.md'))}`));
+}
+
+async function uninstallSkill(ide) {
+  const cwd = process.cwd();
+  
+  switch (ide) {
+    case 'claude':
+      fs.rmSync(path.join(cwd, '.claude', 'skills', 'omnidesign.md'), { force: true });
+      break;
+    case 'cursor':
+      fs.rmSync(path.join(cwd, '.cursor', 'skills', 'omnidesign.md'), { force: true });
+      break;
+    case 'opencode':
+      fs.rmSync(path.join(cwd, '.opencode', 'skills', 'omnidesign.md'), { force: true });
+      break;
+    case 'vscode':
+      const settingsPath = path.join(cwd, '.vscode', 'settings.json');
+      if (fs.existsSync(settingsPath)) {
+        const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+        delete settings['omnidesign.enabled'];
+        delete settings['omnidesign.theme'];
+        fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+      }
+      break;
+    case 'zed':
+      fs.rmSync(path.join(cwd, '.zed', 'omnidesign.json'), { force: true });
+      break;
+    case 'amp':
+      fs.rmSync(path.join(cwd, '.agents', 'skills', 'omnidesign'), { force: true, recursive: true });
+      break;
+    case 'kilo':
+      fs.rmSync(path.join(cwd, '.kilocode', 'skills', 'omnidesign'), { force: true, recursive: true });
+      break;
+    case 'antigravity':
+      fs.rmSync(path.join(cwd, '.agent', 'skills', 'omnidesign'), { force: true, recursive: true });
+      break;
+    case 'aider':
+      fs.rmSync(path.join(cwd, 'CONVENTIONS.md'), { force: true });
+      break;
+    case 'continue':
+      fs.rmSync(path.join(cwd, '.continue', 'omnidesign.yaml'), { force: true });
+      break;
+  }
+}
+
+program.parse();

package/bin/detect-ide.js

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function detectIDE() {
+  const cwd = process.cwd();
+  
+  if (fs.existsSync(path.join(cwd, '.claude'))) return 'claude';
+  if (fs.existsSync(path.join(cwd, '.cursor'))) return 'cursor';
+  if (fs.existsSync(path.join(cwd, '.opencode'))) return 'opencode';
+  if (fs.existsSync(path.join(cwd, '.vscode'))) return 'vscode';
+  if (fs.existsSync(path.join(cwd, '.zed'))) return 'zed';
+  if (fs.existsSync(path.join(cwd, '.agents'))) return 'amp';
+  if (fs.existsSync(path.join(cwd, '.kilocode'))) return 'kilo';
+  if (fs.existsSync(path.join(cwd, '.antigravity'))) return 'antigravity';
+  if (fs.existsSync(path.join(cwd, '.agent'))) return 'antigravity';
+  if (fs.existsSync(path.join(cwd, '.aider.conf.yml'))) return 'aider';
+  if (fs.existsSync(path.join(cwd, '.continue'))) return 'continue';
+  if (fs.existsSync(path.join(cwd, 'claude.md'))) return 'claude';
+  if (fs.existsSync(path.join(cwd, '.cursorrules'))) return 'cursor';
+  if (process.env.CLAUDE_CODE) return 'claude';
+  if (process.env.CURSOR_TRACE) return 'cursor';
+  
+  return null;
+}
+
+function autoInstall() {
+  const ide = detectIDE();
+  
+  if (!ide) {
+    console.log(chalk.gray('ℹ️  No IDE detected. Run: npx omnidesign install --ide <ide>'));
+    console.log(chalk.gray('Supported: claude, cursor, opencode, vscode, zed, amp, kilo, antigravity, aider, continue'));
+    return;
+  }
+  
+  console.log(chalk.blue(`🎨 OmniDesign detected ${ide}. Installing...\n`));
+  
+  try {
+    execSync(`node ${path.join(__dirname, 'cli.js')} install`, { stdio: 'inherit' });
+  } catch (error) {
+    console.log(chalk.gray('ℹ️  Run manually: npx omnidesign install'));
+  }
+}
+
+autoInstall();

package/bin/install.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+execSync(`node ${path.join(__dirname, 'cli.js')} install`, { stdio: 'inherit' });

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "omnidesign",
+  "version": "1.0.0",
+  "description": "Universal design system skill for AI coding assistants - Works with Claude Code, Cursor, OpenCode, VS Code, and more",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "omnidesign": "./bin/cli.js",
+    "omnidesign-install": "./bin/install.js"
+  },
+  "scripts": {
+    "build": "bun run scripts/build-tokens.js",
+    "validate": "bun run scripts/validate-tokens.js",
+    "lint": "biome lint .",
+    "format": "biome format . --write",
+    "format:check": "biome format .",
+    "check": "bun run format:check && bun run lint && bun run validate",
+    "themes:list": "bun run -e \"const fs=require('fs');const themes=fs.readdirSync('tokens/themes').filter(f=>f.endsWith('.json')).map(f=>f.replace('.json','')).sort();console.log('\\n🎨 Available Themes ('+themes.length+'):\\n');themes.forEach(t=>console.log('  •',t));console.log();\"",
+    "fonts:list": "bun run -e \"const data=require('./tokens/typography/font-collection.json');console.log('\\n🔤 Font Families:\\n');Object.entries(data.families).forEach(([cat,families])=>{console.log(cat+':');Object.keys(families).forEach(f=>console.log('  •',f));console.log();});\"",
+    "postinstall": "node bin/detect-ide.js"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "themes",
+    "components",
+    "ui-library",
+    "css-variables",
+    "typography",
+    "nerd-fonts",
+    "ai-components",
+    "claude-code",
+    "cursor",
+    "opencode",
+    "vscode",
+    "skill",
+    "plugin"
+  ],
+  "author": "OmniDesign Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codewithkenzo/omnidesign.git"
+  },
+  "bugs": {
+    "url": "https://github.com/codewithkenzo/omnidesign/issues"
+  },
+  "homepage": "https://omnidesign.dev",
+  "files": [
+    "tokens/",
+    "recipes/",
+    "components/",
+    "packages/",
+    "bin/",
+    "skills/",
+    "README.md",
+    "QUICKREF.md",
+    "logo.jpg"
+  ],
+  "exports": {
+    "./tokens": "./packages/tokens-css/dist/tokens.css",
+    "./tokens-ts": "./packages/tokens-ts/dist/tokens.ts",
+    "./react": "./packages/react/dist/index.js",
+    "./skill/claude": "./skills/claude/",
+    "./skill/cursor": "./skills/cursor/",
+    "./skill/opencode": "./skills/opencode/",
+    "./skill/vscode": "./skills/vscode/",
+    "./skill/aider": "./skills/aider/",
+    "./skill/continue": "./skills/continue/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1"
+  }
+}

package/recipes/components/README.md

@@ -0,0 +1,29 @@
+# Components
+
+Markdown documentation of UI component implementations. Each file describes a component's anatomy, variants, and usage patterns.
+
+## Core Components
+- [Hero Section](./hero-section.md) - Landing page hero with CTA
+- [Bento Grid](./bento-grid.md) - Feature showcase grid
+- [Navbar](./navbar.md) - Navigation header
+- [Forms](./forms.md) - Input components and patterns
+
+## AI Industry Components
+Modern components for AI-powered applications:
+
+- [AI Chat](./ai-chat.md) - ChatGPT/Claude-style chat interface
+- [Prompt Input](./prompt-input.md) - Smart prompt with suggestions
+- [Agent Card](./agent-card.md) - AI model/agent display card
+- [Thinking Indicator](./thinking-indicator.md) - Loading/streaming states
+- [Code Block](./code-block.md) - Syntax-highlighted code with actions
+- [File Upload](./file-upload.md) - Drag-drop upload with AI context
+
+## Component Structure
+Each component recipe includes:
+- **When to Use** - Context and use cases
+- **Anatomy** - Structural breakdown
+- **Token Usage** - Design token implementation
+- **State Matrix** - Interactive states
+- **Accessibility** - ARIA and screen reader support
+- **Responsive Behavior** - Breakpoint adaptations
+- **Code Examples** - React/TSX implementations