feat: Add comprehensive frontend development support with technology-agnostic rules #88
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add comprehensive frontend development capabilities alongside existing backend support: **Frontend-specific Agents:** - quality-fixer-frontend: Lighthouse performance checks, bundle size verification - task-executor-frontend: React 19 function components, Props-driven design - technical-designer-frontend: React architecture decisions, Props type contracts **Frontend Commands:** - /front-design: Create React/Vite design documents - /front-plan: Generate frontend work plans - /front-build: Execute React component implementation **Frontend Rules:** - docs/rules-en/frontend/typescript.md: React development standards - docs/rules-en/frontend/typescript-testing.md: React Testing Library, MSW - docs/rules-en/frontend/technical-spec.md: Vite, environment variables - docs/rules-en/frontend/ai-development-guide.md: Lighthouse, bundle size optimization **Package Updates:** - Add Vite and React dependencies to devDependencies - Add frontend npm scripts (build:frontend, dev:frontend, preview) - Split conflicting commands (build:backend vs build:frontend) - Remove package-lock.json from tracking (boilerplate best practice) **Documentation:** - Update CLAUDE.en.md: Backend/Frontend quality-fixer usage - Update README.md: Frontend commands, agents, and npm scripts - Update rules-index.yaml: Frontend rule metadata 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
フロントエンド向け専門エージェント、コマンド、ルールの日本語版を追加: Agents (3): - quality-fixer-frontend: フロントエンド品質修正（Lighthouse、Bundle size対応） - task-executor-frontend: フロントエンドタスク実行（React 19、Props-driven） - technical-designer-frontend: フロントエンド設計（React、ADR、Design Doc） Commands (3): - front-build: フロントエンド実装実行 - front-design: フロントエンド設計書作成 - front-plan: フロントエンド作業計画書作成 Rules (4): - typescript.md: React 19関数コンポーネント、Props-drivenアプローチ - typescript-testing.md: React Testing Library、MSW、80%カバレッジ - technical-spec.md: Vite、環境変数、Lighthouse要件 - ai-development-guide.md: アンチパターン、デバッグ、品質チェック Updated: - CLAUDE.ja.md: quality-fixer差別化（Backend/Frontend） - README.ja.md: フロントエンドコマンド、npm scripts、品質チェック追加 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
フロントエンド開発サポート追加によるマイナーバージョンアップ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
フロントエンドコマンドからsub-agents.md参照を削除し、保証されなくなる挙動をsub-agents.mdベースで追記: 変更内容: - sub-agents.md参照削除（バックエンド向けフローのため不適切） - サブエージェント呼び出し方法を追記（Taskツール使用） - 構造化レスポンス仕様を追記（JSON形式） - コミット実行詳細を追記（メインAIがBashで実行） - エージェント連携仕様を追記（acceptance-test-generator → work-planner） 影響範囲: - front-build.md: 自律実行サイクル詳細化 - front-design.md: 実行フロー明確化 - front-plan.md: エージェント連携フロー明確化 - 日本語版も同様に更新 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
shinpr
force-pushed
the
feat/frontend-enhancement
branch
from
f1ccb25 to
4a65a72
Compare
Remove version-specific and tool-specific references to make frontend rules more technology-agnostic: - Replace "React 19" with "React" (modern React standard) - Replace "Vite" references with generic "build tool" - Remove Lighthouse-specific mentions from quality process - Adjust coverage target from 80% to 60% with component-specific targets - Refine Props design guidelines (3-7 props ideal, 50% optional max, 2-level nesting) This improves rule portability across different React versions and build tools while maintaining frontend-specific best practices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
shinpr
changed the title
- Remove npm cache configuration (no longer requires package-lock.json) - Change from `npm ci` to `npm install` for dependency installation This aligns with the boilerplate philosophy where users manage their own dependency lock files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds complete frontend development infrastructure to the AI coding
project boilerplate, enabling React-based web application
development alongside existing backend capabilities. This PR
introduces technology-agnostic rules, specialized agents, and
bilingual support (EN/JA) for frontend workflows.
Key Changes
🎯 Core Features
Frontend-specific agents (3 new agents):
technical-designer-frontend: Component architecture anddesign decisions
task-executor-frontend: TDD-driven implementation with ReactTesting Library
quality-fixer-frontend: Comprehensive quality checks (typesafety, tests, bundle size, coverage)
Frontend slash commands (3 new commands):
/front-design: Requirements analysis → Design Doc creation/front-plan: Design Doc → Work plan generation/front-build: Autonomous task execution modeFrontend-specific rules (4 new rule files):
typescript.md: Props-driven design, function components,type safety
typescript-testing.md: React Testing Library, MSW, coveragetargets
technical-spec.md: Environment variables, buildrequirements, data flow
ai-development-guide.md: Pre-implementation investigation,quality checks
🌍 Bilingual Support
and rules
🔧 Technology-Agnostic Approach
2-level nesting
(Atoms 70%, Molecules 65%, Organisms 60%)
📊 Statistics
🤖 Generated with https://claude.com/claude-code