specweave 0.4.1 → 0.6.3

package/plugins/specweave-ui/README.md

@@ -0,0 +1,386 @@
+# SpecWeave UI Plugin
+
+**Complete UI/UX Development Toolkit** - Playwright E2E testing, Figma design integration, React/Vue/Angular development, design systems, Storybook component testing.
+
+---
+
+## What's Included
+
+### Skills (7)
+
+1. **e2e-playwright** - Browser automation and E2E testing with Playwright
+   - Write automated tests for web applications
+   - Cross-browser testing (Chrome, Firefox, Safari, Edge)
+   - Screenshot and video capture
+   - Accessibility testing
+   - Mobile emulation
+
+2. **figma-designer** - Figma design integration and mockup creation
+   - Create production-ready Figma designs
+   - Design systems with reusable components
+   - Design tokens (colors, typography, spacing)
+   - Responsive layouts
+
+3. **figma-implementer** - Convert Figma designs to production code
+   - Pixel-perfect React/Angular components
+   - Extract design tokens automatically
+   - Generate TypeScript interfaces from Figma
+   - Storybook integration
+
+4. **figma-mcp-connector** - Connect to Figma via MCP servers
+   - Read/write Figma files
+   - Extract design variables
+   - Sync design changes
+
+5. **design-system-architect** - Build scalable design systems
+   - Atomic design methodology
+   - Component hierarchy (atoms/molecules/organisms)
+   - Design token management
+   - Brand consistency
+
+6. **frontend** - React, Vue, Angular development
+   - Component-driven development
+   - State management (Redux, Zustand, Pinia)
+   - Form validation and handling
+   - Responsive design with Tailwind/CSS modules
+   - Accessibility (WCAG 2.1 compliance)
+
+7. **nextjs** - Next.js 14+ App Router specialist
+   - Server components and streaming
+   - Server actions and mutations
+   - Route handlers and middleware
+   - Metadata API and SEO
+   - NextAuth.js authentication
+   - Prisma ORM integration
+
+### Agents (1)
+
+**ui-ux-specialist** - Unified agent with expertise across all UI/UX tools
+- Combines knowledge from all 7 skills
+- Coordinates design → implementation → testing workflow
+- Provides holistic UI/UX guidance
+
+### Commands (3)
+
+1. `/ui.test` - Run Playwright E2E tests
+2. `/ui.design` - Generate Figma designs
+3. `/ui.implement` - Convert Figma to code
+
+---
+
+## Auto-Detection
+
+This plugin **auto-activates** when your project contains:
+
+**Package.json dependencies**:
+- `@playwright/test`, `playwright`
+- `figma`, `@figma/rest-api-types`
+- `react`, `react-dom`, `next`
+- `vue`, `@vue/core`
+- `@angular/core`
+- `@storybook/react`
+
+**Files/directories**:
+- `playwright.config.ts`
+- `figma.config.json`
+- `.storybook/`
+- `next.config.js`
+
+**Keywords in increment descriptions**:
+- "playwright", "e2e", "end-to-end"
+- "figma", "design", "ui", "ux"
+- "react", "next", "vue", "angular"
+- "storybook", "design system"
+
+---
+
+## Installation
+
+### Automatic (Recommended)
+
+```bash
+# SpecWeave detects UI project and suggests plugin
+specweave init
+
+# Detected: React + Playwright
+# Installing: specweave-ui
+```
+
+### Manual
+
+```bash
+# Via SpecWeave CLI
+specweave plugin enable specweave-ui
+
+# Via Claude Code
+/plugin install specweave-ui
+
+# Via NPM
+npm install -g specweave
+cp -r node_modules/specweave/plugins/specweave-ui .claude/plugins/
+```
+
+---
+
+## Usage
+
+### E2E Testing with Playwright
+
+**Skill auto-activates when you mention:**
+- "Add Playwright tests"
+- "Create E2E test for login"
+- "Test user signup flow"
+
+**Example interaction**:
+```
+User: Add Playwright tests for the login page
+AI: I'll create a comprehensive E2E test suite for the login page...
+[Generates tests/e2e/login.spec.ts with Playwright tests]
+```
+
+**Manual command**:
+```bash
+/ui.test login
+```
+
+---
+
+### Figma Design Integration
+
+**Skill auto-activates when you mention:**
+- "Design in Figma"
+- "Create mockup"
+- "Convert Figma to code"
+
+**Example interaction**:
+```
+User: Convert the Figma dashboard design to React components
+AI: I'll extract the Figma design and generate React components...
+[Generates components with design tokens and TypeScript types]
+```
+
+**Manual command**:
+```bash
+/ui.design dashboard
+/ui.implement dashboard
+```
+
+---
+
+### Frontend Development
+
+**Skill auto-activates when you mention:**
+- "Create React component"
+- "Build Next.js page"
+- "Add Vue component"
+
+**Example interaction**:
+```
+User: Create a reusable Button component with variants
+AI: I'll create a Button component following atomic design...
+[Generates Button.tsx with primary/secondary variants, Storybook stories, tests]
+```
+
+---
+
+### Design System Architecture
+
+**Skill auto-activates when you mention:**
+- "Design system"
+- "Component library"
+- "Design tokens"
+
+**Example interaction**:
+```
+User: Set up a design system with Tailwind and design tokens
+AI: I'll create a comprehensive design system...
+[Generates tokens.ts, color palette, typography scale, spacing system]
+```
+
+---
+
+## MCP Integration (Optional)
+
+### Browserbase (Cloud Browser Automation)
+
+**What it does**:
+- Runs Playwright tests in cloud infrastructure
+- Parallel test execution (10x faster)
+- No local browser dependencies
+- Automatic screenshots/videos
+
+**Setup**:
+
+1. Get API key from [Browserbase](https://www.browserbase.com/)
+
+2. Set environment variables:
+   ```bash
+   export BROWSERBASE_API_KEY="bb_xxx"
+   export BROWSERBASE_PROJECT_ID="proj_xxx"
+   ```
+
+3. SpecWeave auto-configures MCP server (via `.mcp.json`)
+
+4. Use in Playwright:
+   ```typescript
+   // playwright.config.ts
+   export default {
+     use: {
+       connectOptions: {
+         wsEndpoint: process.env.BROWSERBASE_WS_ENDPOINT
+       }
+     }
+   }
+   ```
+
+**Benefits**:
+- ✅ 10x faster parallel execution
+- ✅ No local ChromeDriver installation
+- ✅ Automatic scaling
+- ✅ Works in CI/CD without setup
+
+---
+
+## Workflow Example
+
+### Complete UI Feature Development
+
+```bash
+# 1. Create increment
+/specweave:inc "Add user dashboard with charts"
+
+# 2. SpecWeave detects UI work, auto-enables plugin
+# Installing: specweave-ui (Playwright + Figma + React + Design System)
+
+# 3. Design phase (Figma skill)
+/ui.design dashboard
+
+# 4. Implementation (Frontend + Next.js skills)
+/ui.implement dashboard
+
+# 5. Testing (Playwright skill)
+/ui.test dashboard
+
+# 6. Storybook documentation (auto-generated)
+npm run storybook
+```
+
+**AI auto-coordinates** across all skills:
+1. **Design System Architect**: Defines tokens, components
+2. **Figma Designer**: Creates mockups
+3. **Frontend**: Implements React components
+4. **Next.js**: Integrates into App Router
+5. **Playwright**: Writes E2E tests
+6. **Storybook**: Documents components
+
+---
+
+## Configuration
+
+### Plugin Settings
+
+**File**: `.claude/settings.json`
+
+```json
+{
+  "plugins": {
+    "specweave-ui": {
+      "enabled": true,
+      "mcp": {
+        "browserbase": {
+          "enabled": false
+        }
+      },
+      "defaults": {
+        "frontend_framework": "react",  // or "vue", "angular"
+        "test_framework": "playwright",
+        "design_tool": "figma"
+      }
+    }
+  }
+}
+```
+
+---
+
+## FAQ
+
+### Q: Do I need all 7 skills?
+
+**A**: No! Skills auto-activate based on your project.
+- React project? Only `frontend` and `nextjs` activate
+- Playwright tests? Only `e2e-playwright` activates
+- Design work? Only `figma-*` and `design-system-architect` activate
+
+### Q: Can I disable specific skills?
+
+**A**: Yes, via settings:
+```json
+{
+  "plugins": {
+    "specweave-ui": {
+      "skills": {
+        "figma-designer": { "enabled": false }
+      }
+    }
+  }
+}
+```
+
+### Q: Does this work without SpecWeave?
+
+**A**: Yes! This is a **native Claude Code plugin**. Install it directly:
+```bash
+/plugin install specweave-ui
+```
+
+### Q: How much context does this use?
+
+**A**:
+- **All skills loaded**: ~8K tokens
+- **Typical usage** (2-3 skills active): ~3K tokens
+- **vs. Monolithic** (loading all 44 skills): 50K tokens
+
+**Result**: **84-94% context reduction** vs. old architecture.
+
+### Q: Can I contribute skills?
+
+**A**: Yes! Submit a PR:
+1. Add skill to `src/plugins/specweave-ui/skills/`
+2. Update `plugin.json` provides list
+3. Add tests in `test-cases/`
+4. Update this README
+
+---
+
+## Community Extensions
+
+### Available Community Skills
+
+- **specweave-ui-mobile** - React Native, Flutter, SwiftUI
+- **specweave-ui-3d** - Three.js, WebGL, 3D visualization
+- **specweave-ui-animation** - Framer Motion, GSAP, Lottie
+
+**Install**:
+```bash
+/plugin marketplace add specweave-community
+/plugin install specweave-ui-mobile
+```
+
+---
+
+## Support
+
+- **Documentation**: https://spec-weave.com/plugins/ui
+- **Issues**: https://github.com/anton-abyzov/specweave/issues
+- **Discussions**: https://github.com/anton-abyzov/specweave/discussions
+
+---
+
+## License
+
+MIT © Anton Abyzov
+
+---
+
+🎨 **SpecWeave UI Plugin** - Complete UI/UX toolkit for AI-assisted development

package/src/adapters/claude/adapter.ts

@@ -13,6 +13,8 @@ import fs from 'fs-extra';
 import { AdapterBase } from '../adapter-base.js';
 import { AdapterOptions, AdapterFile } from '../adapter-interface.js';
 import type { Plugin } from '../../core/types/plugin.js';
+import { LanguageManager, getSystemPromptForLanguage } from '../../core/i18n/language-manager.js';
+import type { SupportedLanguage, I18nConfig } from '../../core/i18n/types.js';
 
 export class ClaudeAdapter extends AdapterBase {
   name = 'claude';
@@ -39,56 +41,50 @@ export class ClaudeAdapter extends AdapterBase {
   /**
    * Get files to install for Claude adapter
    *
-   * Claude adapter installs:
-   * - Skills to .claude/skills/ (auto-activating capabilities)
-   * - Agents to .claude/agents/ (specialized roles)
-   * - Commands to .claude/commands/ (slash commands)
-   * - Hooks to .claude/hooks/ (auto-update mechanisms)
+   * Claude Code v0.5.0+ uses native plugin loading via marketplace.
+   * No file copying needed!
    */
   getFiles(): AdapterFile[] {
-    return [
-      {
-        sourcePath: 'README.md',
-        targetPath: '.claude/README.md',
-        description: 'Claude adapter documentation'
-      }
-      // Note: Skills, agents, commands, hooks are installed via npm scripts
-      // (install:skills, install:agents) - not copied here
-    ];
+    return []; // No files to copy - native loading!
   }
 
   /**
    * Install Claude adapter
    *
-   * Since SpecWeave was originally built for Claude Code, the "installation"
-   * is actually just ensuring the existing .claude/ structure is correct.
-   *
-   * Skills, agents, commands, hooks are installed separately via:
-   * - npm run install:skills
-   * - npm run install:agents
+   * Claude Code v0.5.0+ uses native plugin system with marketplace.
+   * Installation steps:
+   * 1. Create .specweave/ structure (project data)
+   * 2. Show marketplace installation instructions
+   * 3. User adds marketplace: /plugin marketplace add anton-abyzov/specweave
+   * 4. User installs plugins: /plugin install specweave@specweave
    */
   async install(options: AdapterOptions): Promise<void> {
-    console.log('\n📦 Installing Claude Code Adapter (Full Automation)\n');
-
-    // Ensure .claude directory exists
-    const claudeDir = path.join(options.projectPath, '.claude');
-    await fs.ensureDir(claudeDir);
-
-    // Create subdirectories
-    await fs.ensureDir(path.join(claudeDir, 'skills'));
-    await fs.ensureDir(path.join(claudeDir, 'agents'));
-    await fs.ensureDir(path.join(claudeDir, 'commands'));
-    await fs.ensureDir(path.join(claudeDir, 'hooks'));
-
-    // Copy README
-    await super.install(options);
-
-    console.log('\n✨ Claude adapter structure created!');
-    console.log('\n📋 Next steps:');
-    console.log('   1. Install skills: npm run install:skills');
-    console.log('   2. Install agents: npm run install:agents');
-    console.log('   3. Skills will auto-activate when relevant');
-    console.log('   4. Use slash commands: /create-increment, /review-docs, etc.');
+    console.log('\n📦 Installing Claude Code Adapter (Native Plugin System)\n');
+
+    // Create .specweave/ structure (project data only)
+    const specweaveDir = path.join(options.projectPath, '.specweave');
+    await fs.ensureDir(specweaveDir);
+    await fs.ensureDir(path.join(specweaveDir, 'increments'));
+    await fs.ensureDir(path.join(specweaveDir, 'increments', '_backlog'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'internal', 'strategy'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'internal', 'architecture', 'adr'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'internal', 'architecture', 'rfc'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'internal', 'architecture', 'diagrams'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'internal', 'delivery'));
+    await fs.ensureDir(path.join(specweaveDir, 'docs', 'public', 'guides'));
+    await fs.ensureDir(path.join(specweaveDir, 'logs'));
+
+    console.log('\n✅ Created .specweave/ structure');
+    console.log('\n📋 Next steps - Install SpecWeave plugins:');
+    console.log('\n  1️⃣  Add SpecWeave marketplace:');
+    console.log('     /plugin marketplace add anton-abyzov/specweave');
+    console.log('\n  2️⃣  Install SpecWeave core:');
+    console.log('     /plugin install specweave@specweave');
+    console.log('\n  3️⃣  (Optional) Install GitHub plugin:');
+    console.log('     /plugin install specweave-github@specweave');
+    console.log('\n  4️⃣  Start using SpecWeave:');
+    console.log('     /specweave.inc "create a todo app"');
+    console.log('\n💡 Tip: Plugins load natively - no file copying needed!');
   }
 
   /**
@@ -167,6 +163,130 @@ For complete documentation, see: .claude/README.md
     return true;
   }
 
+  /**
+   * Check if Claude Code native plugin system is available
+   *
+   * Detects if /plugin commands are supported in current Claude Code version
+   *
+   * @returns boolean True if native plugin commands available
+   */
+  async supportsNativePlugins(): Promise<boolean> {
+    // Check if .claude/plugins directory exists (indicates native plugin support)
+    const projectPath = process.cwd();
+    const nativePluginsDir = path.join(projectPath, '.claude', 'plugins');
+
+    if (await fs.pathExists(nativePluginsDir)) {
+      return true;
+    }
+
+    // Check if plugin.json format is present in any installed plugins
+    const claudeDir = path.join(projectPath, '.claude');
+    if (await fs.pathExists(claudeDir)) {
+      const entries = await fs.readdir(claudeDir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const pluginJsonPath = path.join(claudeDir, entry.name, '.claude-plugin', 'plugin.json');
+          if (await fs.pathExists(pluginJsonPath)) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Get installation instructions based on available plugin system
+   *
+   * Returns instructions for either:
+   * - Native /plugin commands (if supported)
+   * - SpecWeave CLI fallback (always available)
+   *
+   * @param pluginName Name of plugin to install
+   * @returns Installation instructions
+   */
+  async getPluginInstallInstructions(pluginName: string): Promise<string> {
+    const hasNativePlugins = await this.supportsNativePlugins();
+
+    if (hasNativePlugins) {
+      return `
+Installation Options:
+
+Option 1 (Recommended): Native Claude Code
+  /plugin marketplace add specweave/marketplace
+  /plugin install ${pluginName}@specweave
+
+Option 2: SpecWeave CLI
+  specweave plugin install ${pluginName}
+
+Both methods install the same plugin - choose based on preference!
+      `.trim();
+    }
+
+    return `
+Installation:
+  specweave plugin install ${pluginName}
+
+Note: Native /plugin commands not detected in your Claude Code version.
+Using SpecWeave CLI for plugin management.
+    `.trim();
+  }
+
+  /**
+   * Read language configuration from project config
+   *
+   * @returns Language setting from config, defaults to 'en'
+   */
+  private async getLanguageConfig(): Promise<SupportedLanguage> {
+    const projectPath = process.cwd();
+    const configPath = path.join(projectPath, '.specweave', 'config.json');
+
+    if (!(await fs.pathExists(configPath))) {
+      return 'en'; // Default to English if no config
+    }
+
+    try {
+      const config = await fs.readJson(configPath);
+      return (config.language as SupportedLanguage) || 'en';
+    } catch (error) {
+      console.warn('⚠️  Could not read language from config, defaulting to English');
+      return 'en';
+    }
+  }
+
+  /**
+   * Inject system prompt for non-English languages
+   *
+   * Prepends language instruction to markdown content if language !== 'en'
+   *
+   * @param content Original markdown content
+   * @param language Target language
+   * @returns Modified content with system prompt (or unchanged if English)
+   */
+  private injectSystemPrompt(content: string, language: SupportedLanguage): string {
+    if (language === 'en') {
+      return content; // No changes for English - preserve default behavior
+    }
+
+    // Get system prompt for target language
+    const systemPrompt = getSystemPromptForLanguage(language);
+
+    // Inject system prompt at the top (after YAML frontmatter if present)
+    if (content.startsWith('---')) {
+      // Has YAML frontmatter - inject after closing ---
+      const endOfFrontmatter = content.indexOf('---', 3);
+      if (endOfFrontmatter !== -1) {
+        const frontmatter = content.substring(0, endOfFrontmatter + 3);
+        const body = content.substring(endOfFrontmatter + 3);
+        return `${frontmatter}\n\n${systemPrompt}\n${body}`;
+      }
+    }
+
+    // No frontmatter - inject at the very top
+    return `${systemPrompt}\n\n${content}`;
+  }
+
   /**
    * Compile and install a plugin for Claude Code
    *
@@ -175,6 +295,12 @@ For complete documentation, see: .claude/README.md
    * - Copy agents to .claude/agents/{plugin-name}/{agent-name}/
    * - Copy commands to .claude/commands/
    *
+   * Supports both:
+   * - Native /plugin install (if Claude Code supports it)
+   * - SpecWeave CLI fallback (always available)
+   *
+   * NEW: Injects system prompts for non-English languages
+   *
    * @param plugin Plugin to install
    */
   async compilePlugin(plugin: Plugin): Promise<void> {
@@ -183,6 +309,21 @@ For complete documentation, see: .claude/README.md
 
     console.log(`\n📦 Installing plugin: ${plugin.manifest.name}`);
 
+    // Get language configuration for system prompt injection
+    const language = await this.getLanguageConfig();
+    if (language !== 'en') {
+      console.log(`   🌐 Language: ${language} (system prompts will be injected)`);
+    }
+
+    // Check for native plugin support
+    const hasNativePlugins = await this.supportsNativePlugins();
+    if (hasNativePlugins) {
+      console.log('   💡 Tip: You can also use native /plugin commands:');
+      console.log(`      /plugin marketplace add specweave/marketplace`);
+      console.log(`      /plugin install ${plugin.manifest.name.replace('specweave-', '')}@specweave`);
+      console.log('');
+    }
+
     // Ensure base directories exist
     await fs.ensureDir(path.join(claudeDir, 'skills'));
     await fs.ensureDir(path.join(claudeDir, 'agents'));
@@ -193,10 +334,12 @@ For complete documentation, see: .claude/README.md
       const targetPath = path.join(claudeDir, 'skills', skill.name);
       await fs.ensureDir(targetPath);
 
-      // Copy SKILL.md
+      // Copy SKILL.md (with language injection if needed)
       const skillMdPath = path.join(skill.path, 'SKILL.md');
       if (await fs.pathExists(skillMdPath)) {
-        await fs.copy(skillMdPath, path.join(targetPath, 'SKILL.md'));
+        const content = await fs.readFile(skillMdPath, 'utf-8');
+        const modifiedContent = this.injectSystemPrompt(content, language);
+        await fs.writeFile(path.join(targetPath, 'SKILL.md'), modifiedContent, 'utf-8');
       }
 
       // Copy test cases if they exist
@@ -213,10 +356,12 @@ For complete documentation, see: .claude/README.md
       const targetPath = path.join(claudeDir, 'agents', agent.name);
       await fs.ensureDir(targetPath);
 
-      // Copy AGENT.md
+      // Copy AGENT.md (with language injection if needed)
       const agentMdPath = path.join(agent.path, 'AGENT.md');
       if (await fs.pathExists(agentMdPath)) {
-        await fs.copy(agentMdPath, path.join(targetPath, 'AGENT.md'));
+        const content = await fs.readFile(agentMdPath, 'utf-8');
+        const modifiedContent = this.injectSystemPrompt(content, language);
+        await fs.writeFile(path.join(targetPath, 'AGENT.md'), modifiedContent, 'utf-8');
       }
 
       console.log(`   ✓ Agent: ${agent.name}`);
@@ -229,7 +374,9 @@ For complete documentation, see: .claude/README.md
       const targetPath = path.join(claudeDir, 'commands', fileName);
 
       if (await fs.pathExists(command.path)) {
-        await fs.copy(command.path, targetPath);
+        const content = await fs.readFile(command.path, 'utf-8');
+        const modifiedContent = this.injectSystemPrompt(content, language);
+        await fs.writeFile(targetPath, modifiedContent, 'utf-8');
       }
 
       console.log(`   ✓ Command: /${command.name}`);