create-ai-project 1.16.2 → 1.17.0

package/README.md

@@ -139,10 +139,11 @@ This boilerplate provides the principles used in agentic implementation workflow
 | `technical-spec` | Architecture, environment, build commands |
 | `implementation-approach` | Strategy patterns, task decomposition |
 | `integration-e2e-testing` | Integration/E2E test design, ROI-based selection |
+| `frontend-typescript-rules` | React component design, Props-driven patterns |
+| `frontend-typescript-testing` | React Testing Library, MSW, Playwright E2E |
+| `frontend-technical-spec` | React architecture, environment, data flow |
 | `project-context` | Project-specific prerequisites for AI accuracy (set via `/project-inject`) |
 
-**Frontend-specific skills** are also available under `frontend/` (e.g., `frontend/typescript-rules`).
-
 👉 [Learn how Skills work (Claude Code docs)](https://code.claude.com/docs/en/skills)
 
 ## 🎯 Built with This Boilerplate
@@ -185,7 +186,7 @@ Essential commands for Claude Code:
 | `/diagnose` | Root cause analysis workflow | Debugging, troubleshooting |
 | `/reverse-engineer` | Generate PRD/Design Docs from code | Legacy system documentation |
 
-Frontend equivalents (`/front-design`, `/front-build`, `/front-review`, `/front-plan`) and utility commands (`/add-integration-tests`, `/update-doc`) are also available.
+Frontend equivalents (`/front-design` for UI Spec + Design Doc, `/front-build`, `/front-review`, `/front-plan`) and utility commands (`/add-integration-tests`, `/update-doc`) are also available.
 
 [Full command reference →](docs/guides/en/use-cases.md)
 
@@ -228,7 +229,7 @@ graph TB
 ### How It Works
 
 1. **Requirement Analysis**: `/implement` command analyzes task scale
-2. **Document Generation**: Creates necessary docs (PRD, Design Doc, Work Plan)
+2. **Document Generation**: Creates necessary docs (PRD, UI Spec, Design Doc, Work Plan)
 3. **Task Execution**: Specialized agents handle each phase
 4. **Quality Assurance**: Automatic testing, type checking, and fixes
 5. **Commit & Continue**: Clean commits for each completed task
@@ -247,7 +248,9 @@ ai-coding-project-boilerplate/
 │       ├── documentation-criteria/
 │       ├── technical-spec/
 │       ├── project-context/
-│       └── frontend/     # Frontend-specific skills
+│       ├── frontend-typescript-rules/
+│       ├── frontend-typescript-testing/
+│       └── frontend-technical-spec/
 ├── docs/
 │   ├── guides/           # User documentation
 │   ├── adr/              # Architecture decisions
@@ -286,7 +289,7 @@ When you change these, Claude Code will recognize them and execute with the appr
 
 The above are representative examples. The following scripts are referenced in skills and sub-agent definitions. Update them as needed:
 
-`build`, `build:frontend`, `dev`, `preview`, `type-check`, `test`, `test:coverage`, `test:coverage:fresh`, `test:safe`, `cleanup:processes`, `check`, `check:fix`, `check:code`, `check:unused`, `check:deps`, `check:all`, `format`, `format:check`, `lint`, `lint:fix`
+`build`, `dev`, `type-check`, `test`, `test:coverage`, `test:coverage:fresh`, `test:safe`, `cleanup:processes`, `check`, `check:fix`, `check:code`, `check:unused`, `check:deps`, `check:all`, `format`, `format:check`, `lint`, `lint:fix`
 
 ## 🌐 Multilingual Support
 
@@ -328,7 +331,7 @@ A: Through context engineering. Each sub-agent runs in its own context window fo
 
 ## 🤖 Sub Agents
 
-20+ specialized sub-agents covering the full development lifecycle: requirement analysis, design, planning, implementation, quality assurance, code review, debugging, and reverse engineering. Each agent runs in its own context window for focused execution.
+20+ specialized sub-agents covering the full development lifecycle: requirement analysis, UI specification, design, planning, implementation, quality assurance, code review, debugging, and reverse engineering. Each agent runs in its own context window for focused execution.
 
 [Full agent list →](.claude/agents-en/)
 

package/bin/create-project.js

@@ -1,34 +1,33 @@
 #!/usr/bin/env node
 
-const { spawn } = require('child_process');
-const path = require('path');
-const fs = require('fs');
+import { spawn } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 // Parse command line arguments
-const args = process.argv.slice(2);
+const args = process.argv.slice(2)
 
 // Route to update subcommand
 if (args[0] === 'update') {
-  const updateScript = path.join(__dirname, '..', 'scripts', 'update-project.js');
-  const updateArgs = args.slice(1);
+  const updateScript = path.join(__dirname, '..', 'scripts', 'update-project.js')
+  const updateArgs = args.slice(1)
   const updateProcess = spawn('node', [updateScript, ...updateArgs], {
     stdio: 'inherit',
-    cwd: process.cwd()
-  });
+    cwd: process.cwd(),
+  })
 
   updateProcess.on('close', (code) => {
-    process.exit(code || 0);
-  });
+    process.exit(code || 0)
+  })
 
   updateProcess.on('error', (err) => {
-    console.error(`\n❌ Failed to execute update script: ${err.message}`);
-    process.exit(1);
-  });
-
-  return;
-}
-
-if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
+    console.error(`\n❌ Failed to execute update script: ${err.message}`)
+    process.exit(1)
+  })
+} else if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
   console.log(`
 🚀 AI Coding Project Boilerplate
 
@@ -55,65 +54,67 @@ Examples:
   npx create-ai-project update
   npx create-ai-project update --dry-run
   npx create-ai-project update --ignore skills project-context
-  `);
-  process.exit(0);
-}
-
-const projectName = args[0];
-const options = args.slice(1);
-
-// Parse language option
-let language = 'en'; // default
-for (const opt of options) {
-  if (opt.startsWith('--lang=')) {
-    language = opt.split('=')[1];
-    if (!['ja', 'en'].includes(language)) {
-      console.error(`❌ Invalid language: ${language}. Supported languages are: ja, en`);
-      process.exit(1);
+  `)
+  process.exit(0)
+} else {
+  const projectName = args[0]
+  const options = args.slice(1)
+
+  // Parse language option
+  let language = 'en' // default
+  for (const opt of options) {
+    if (opt.startsWith('--lang=')) {
+      language = opt.split('=')[1]
+      if (!['ja', 'en'].includes(language)) {
+        console.error(`❌ Invalid language: ${language}. Supported languages are: ja, en`)
+        process.exit(1)
+      }
     }
   }
-}
-
-// Validate project name
-const validNamePattern = /^[a-z0-9-._]+$/;
-if (!validNamePattern.test(projectName)) {
-  console.error(`❌ Invalid project name: ${projectName}`);
-  console.error('   Project name must contain only lowercase letters, numbers, hyphens, dots, and underscores.');
-  process.exit(1);
-}
 
-// Check if directory already exists
-const projectPath = path.resolve(process.cwd(), projectName);
-if (fs.existsSync(projectPath)) {
-  console.error(`❌ Directory already exists: ${projectPath}`);
-  process.exit(1);
-}
+  // Validate project name
+  const validNamePattern = /^[a-z0-9-._]+$/
+  if (!validNamePattern.test(projectName)) {
+    console.error(`❌ Invalid project name: ${projectName}`)
+    console.error(
+      '   Project name must contain only lowercase letters, numbers, hyphens, dots, and underscores.'
+    )
+    process.exit(1)
+  }
 
-console.log(`\n🎉 Creating new AI coding project: ${projectName}`);
-console.log(`📍 Location: ${projectPath}`);
-console.log(`🌐 Language: ${language}\n`);
-
-// Run setup script
-const setupScript = path.join(__dirname, '..', 'scripts', 'setup-project.js');
-const setupProcess = spawn('node', [setupScript, projectName, language], {
-  stdio: 'inherit',
-  cwd: process.cwd()  // 現在の作業ディレクトリを使用
-});
-
-setupProcess.on('close', (code) => {
-  if (code !== 0) {
-    console.error(`\n❌ Setup failed with exit code ${code}`);
-    process.exit(code);
+  // Check if directory already exists
+  const projectPath = path.resolve(process.cwd(), projectName)
+  if (fs.existsSync(projectPath)) {
+    console.error(`❌ Directory already exists: ${projectPath}`)
+    process.exit(1)
   }
-  
-  console.log(`\n✅ Project created successfully!`);
-  console.log(`\n📖 Next steps:`);
-  console.log(`   cd ${projectName}`);
-  console.log(`   npm install`);
-  console.log(`   npm run dev\n`);
-});
-
-setupProcess.on('error', (err) => {
-  console.error(`\n❌ Failed to execute setup script: ${err.message}`);
-  process.exit(1);
-});
+
+  console.log(`\n🎉 Creating new AI coding project: ${projectName}`)
+  console.log(`📍 Location: ${projectPath}`)
+  console.log(`🌐 Language: ${language}\n`)
+
+  // Run setup script
+  const setupScript = path.join(__dirname, '..', 'scripts', 'setup-project.js')
+  const setupProcess = spawn('node', [setupScript, projectName, language], {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+  })
+
+  setupProcess.on('close', (code) => {
+    if (code !== 0) {
+      console.error(`\n❌ Setup failed with exit code ${code}`)
+      process.exit(code)
+    }
+
+    console.log(`\n✅ Project created successfully!`)
+    console.log(`\n📖 Next steps:`)
+    console.log(`   cd ${projectName}`)
+    console.log(`   npm install`)
+    console.log(`   npm run dev\n`)
+  })
+
+  setupProcess.on('error', (err) => {
+    console.error(`\n❌ Failed to execute setup script: ${err.message}`)
+    process.exit(1)
+  })
+}

package/biome.json

@@ -1,8 +1,6 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
+  "$schema": "https://biomejs.dev/schemas/2.4.6/schema.json",
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,
@@ -27,7 +25,7 @@
   },
   "overrides": [
     {
-      "include": ["**/__tests__/**/*.ts", "**/*.test.ts", "**/*.spec.ts"],
+      "includes": ["**/__tests__/**/*.ts", "**/*.test.ts", "**/*.spec.ts"],
       "linter": {
         "rules": {
           "suspicious": {
@@ -45,7 +43,6 @@
     }
   },
   "files": {
-    "include": ["src/**/*.ts", "src/**/*.js"],
-    "ignore": ["node_modules/**", "dist/**"]
+    "includes": ["**/src/**/*.ts", "**/src/**/*.js", "!**/node_modules/**", "!**/dist/**"]
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ai-project",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "packageManager": "npm@10.8.2",
   "description": "TypeScript boilerplate with skills and sub-agents for Claude Code. Prevents context exhaustion through role-based task splitting.",
   "keywords": [
@@ -22,6 +22,7 @@
   ],
   "author": "Shinsuke Kagawa",
   "license": "MIT",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/shinpr/ai-coding-project-boilerplate.git"
@@ -32,11 +33,8 @@
   "scripts": {
     "build": "tsc && tsc-alias",
     "build:backend": "tsc && tsc-alias",
-    "build:frontend": "vite build",
     "dev": "tsx src/index.ts",
-    "dev:frontend": "vite",
     "watch": "tsx watch src/index.ts",
-    "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "test:ui": "vitest --ui",
@@ -51,8 +49,7 @@
     "lint:fix": "biome lint --write src",
     "check": "biome check src",
     "check:fix": "biome check --write src",
-    "check:unused": "node scripts/check-unused-exports.js",
-    "check:unused:all": "ts-prune --project tsconfig.json --ignore 'src/index.ts|__tests__|test|vitest'",
+    "check:unused": "knip --include exports",
     "check:deps": "madge --circular --extensions ts src",
     "check:deps:graph": "madge --extensions ts --image graph.svg src",
     "check:code": "npm run check && npm run check:unused && npm run check:deps && npm run build",
@@ -66,30 +63,20 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "c8": "^10.1.3",
-    "fast-check": "^4.3.0",
+    "@biomejs/biome": "^2.4.6",
+    "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "@vitest/ui": "^4.0.0",
+    "fast-check": "^3.23.2",
     "husky": "^9.1.7",
-    "jsdom": "^25.0.0",
+    "knip": "^5.0.0",
     "lint-staged": "^16.1.0",
     "madge": "^8.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "ts-node": "^10.9.1",
-    "ts-prune": "^0.10.3",
     "tsc-alias": "^1.8.7",
     "tsx": "^4.19.4",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^3.2.4"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.0"
   },
   "engines": {
     "node": ">=20"

package/scripts/post-setup.js

@@ -1,25 +1,27 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
+import { execSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
 
 /**
  * Initialize git repository
  */
 function initGit() {
   try {
-    console.log('🔧 Initializing git repository...');
-    execSync('git init', { stdio: 'inherit' });
-    
-    console.log('📝 Creating initial commit...');
-    execSync('git add -A', { stdio: 'inherit' });
-    execSync('git commit -m "Initial commit from AI Coding Project Boilerplate"', { stdio: 'inherit' });
-    
-    return true;
-  } catch (error) {
-    console.warn('⚠️  Git initialization skipped (git might not be installed)');
-    return false;
+    console.log('🔧 Initializing git repository...')
+    execSync('git init', { stdio: 'inherit' })
+
+    console.log('📝 Creating initial commit...')
+    execSync('git add -A', { stdio: 'inherit' })
+    execSync('git commit -m "Initial commit from AI Coding Project Boilerplate"', {
+      stdio: 'inherit',
+    })
+
+    return true
+  } catch (_error) {
+    console.warn('⚠️  Git initialization skipped (git might not be installed)')
+    return false
   }
 }
 
@@ -27,35 +29,32 @@ function initGit() {
  * Clean up files that shouldn't be in the user's project
  */
 function cleanupFiles() {
-  console.log('🧹 Cleaning up setup files...');
-  
+  console.log('🧹 Cleaning up setup files...')
+
   const filesToRemove = [
     'bin/create-project.js',
     'templates/.gitignore.template',
     'scripts/setup-project.js',
-    'scripts/post-setup.js'
-  ];
-  
-  const dirsToRemove = [
-    'bin',
-    'templates'
-  ];
-  
+    'scripts/post-setup.js',
+  ]
+
+  const dirsToRemove = ['bin', 'templates']
+
   // Remove files
   for (const file of filesToRemove) {
-    const filePath = path.join(process.cwd(), file);
+    const filePath = path.join(process.cwd(), file)
     if (fs.existsSync(filePath)) {
-      fs.unlinkSync(filePath);
+      fs.unlinkSync(filePath)
     }
   }
-  
+
   // Remove empty directories
   for (const dir of dirsToRemove) {
-    const dirPath = path.join(process.cwd(), dir);
+    const dirPath = path.join(process.cwd(), dir)
     if (fs.existsSync(dirPath)) {
       try {
-        fs.rmdirSync(dirPath);
-      } catch (e) {
+        fs.rmdirSync(dirPath)
+      } catch (_e) {
         // Directory might not be empty, ignore
       }
     }
@@ -66,23 +65,23 @@ function cleanupFiles() {
  * Show next steps to the user
  */
 function showNextSteps() {
-  const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-  const projectName = packageJson.name;
-  
-  console.log('\n🎉 Project setup completed successfully!\n');
-  console.log('📋 Next steps:\n');
-  console.log(`   cd ${projectName}`);
-  console.log('   npm install');
-  console.log('   npm run dev\n');
-  console.log('🌐 Language switching:\n');
-  console.log('   npm run lang:ja   # Switch to Japanese');
-  console.log('   npm run lang:en   # Switch to English\n');
-  console.log('📖 Available commands:\n');
-  console.log('   npm run dev         # Start development');
-  console.log('   npm run build       # Build for production');
-  console.log('   npm run test        # Run tests');
-  console.log('   npm run check:all   # Run all quality checks\n');
-  console.log('Happy coding! 🚀\n');
+  const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))
+  const projectName = packageJson.name
+
+  console.log('\n🎉 Project setup completed successfully!\n')
+  console.log('📋 Next steps:\n')
+  console.log(`   cd ${projectName}`)
+  console.log('   npm install')
+  console.log('   npm run dev\n')
+  console.log('🌐 Language switching:\n')
+  console.log('   npm run lang:ja   # Switch to Japanese')
+  console.log('   npm run lang:en   # Switch to English\n')
+  console.log('📖 Available commands:\n')
+  console.log('   npm run dev         # Start development')
+  console.log('   npm run build       # Build for production')
+  console.log('   npm run test        # Run tests')
+  console.log('   npm run check:all   # Run all quality checks\n')
+  console.log('Happy coding! 🚀\n')
 }
 
 /**
@@ -91,20 +90,18 @@ function showNextSteps() {
 function main() {
   try {
     // Initialize git repository
-    initGit();
-    
+    initGit()
+
     // Clean up setup-specific files
-    cleanupFiles();
-    
+    cleanupFiles()
+
     // Show next steps
-    showNextSteps();
+    showNextSteps()
   } catch (error) {
-    console.error(`❌ Post-setup failed: ${error.message}`);
-    process.exit(1);
+    console.error(`❌ Post-setup failed: ${error.message}`)
+    process.exit(1)
   }
 }
 
 // Run post-setup
-if (require.main === module) {
-  main();
-}
+main()