Agent skill
technical-spec
Defines environment variables, architecture design, and build/test commands. Use when configuring environment or designing architecture.
Install this agent skill to your Project
npx add-skill https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-en/technical-spec
SKILL.md
Technical Design Rules
Basic Technology Stack Policy
TypeScript-based application implementation. Architecture patterns should be selected according to project requirements and scale.
Environment Variable Management and Security
Environment Variable Management
- Centrally manage environment variables and build mechanisms to ensure type safety
- Avoid direct references to
process.env, obtain through configuration management layer - Properly implement default value settings and mandatory checks
Security
- Do not include
.envfiles in Git - Always manage API keys and secrets as environment variables
- Prohibit logging of sensitive information
- Do not include sensitive information in error messages
Architecture Design
Architecture Design Principles
Select appropriate architecture for each project and define clearly:
- Separation of Responsibilities: Clearly define responsibilities for each layer and module, and maintain boundaries
Unified Data Flow Principles
Basic Principles
- Single Data Source: Store the same information in only one place
- Structured Data Priority: Use parsed objects rather than JSON strings
- Clear Responsibility Separation: Clearly define responsibilities for each layer
Data Flow Best Practices
- Validation at Input: Validate data at input layer and pass internally in type-safe form
- Centralized Transformation: Consolidate data transformation logic in dedicated utilities
- Structured Logging: Output structured logs at each stage of data flow
Build and Testing
Use the appropriate run command based on the packageManager field in package.json.
Build Commands
build- TypeScript buildtype-check- Type check (no emit)
Testing Commands
test- Run teststest:coverage- Run tests with coveragetest:coverage:fresh- Run tests with coverage (fresh cache)test:safe- Safe test execution (with auto cleanup)cleanup:processes- Cleanup Vitest processes
Quality Check Requirements
Quality checks are mandatory upon implementation completion:
Phase 1-3: Code Quality Checks
- Auto-detect and execute the following from package.json scripts:
- lint + format check
- Detect unused exports
- Detect circular dependencies
- TypeScript build
Phase 4: Tests
test- Test execution
Phase 5: Code Quality Re-verification
check:code- Re-verify code quality (clean up side effects from test fixes in Phase 4)
Auxiliary Commands
check:all- Overall integrated check (check:code + test) *for manual batch verificationopen coverage/index.html- Check coverage reportformat- Format fixeslint:fix- Lint fixes
Troubleshooting
- Port in use error: Run the
cleanup:processesscript - Cache issues: Run the
test:coverage:freshscript - Dependency errors: Clean reinstall dependencies
Coverage Requirements
- MANDATORY: Unit test coverage MUST be 70% or higher
- Metrics: Statements, Branches, Functions, Lines
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
frontend-typescript-testing
React Testing Library、MSW、Playwright E2Eでテストを設計。コンポーネントテストとE2Eテストパターンを適用。
typescript-testing
Vitestテスト設計と品質基準を適用。カバレッジ要件とモック使用ガイドを提供。ユニットテスト作成時に使用。
implementation-approach
実装戦略(垂直スライス、水平、ハイブリッド)をリスク評価で選択。機能の実装計画時に使用。
task-analyzer
タスクの本質を分析し適切なスキルを選択。規模見積もりとメタデータを返却。タスク開始時、スキル選択時に使用。
technical-spec
環境変数、アーキテクチャ設計、ビルド・テストコマンドを定義。環境設定、アーキテクチャ設計時に使用。
subagents-orchestration-guide
サブエージェントのタスク分担と連携を調整。規模判定と自律実行モードを制御。大規模タスク分割時に使用。
Didn't find tool you were looking for?