create-claude-webapp 1.0.0 → 1.0.1

package/.claude/skills/task-analyzer/references/skills-index.yaml

@@ -0,0 +1,375 @@
+# Skills Metadata Index
+# Used to select appropriate skills based on task analysis
+
+skills:
+  coding-standards:
+    skill: "coding-standards"
+    tags: [universal, anti-patterns, refactoring, type-safety, testing, code-deletion, rule-of-three, fail-fast, impact-analysis]
+    typical-use: "Universal coding principles applicable across all domains, foundational standards for all developers"
+    size: large
+    key-references:
+      - "Rule of Three - Martin Fowler"
+      - "Single Responsibility Principle - Clean Code"
+      - "DRY Principle - The Pragmatic Programmer"
+      - "YAGNI Principle - Kent Beck"
+      - "5 Whys - Toyota Production System"
+      - "Red-Green-Refactor - Kent Beck"
+      - "AAA Pattern - Arrange-Act-Assert"
+    sections:
+      - "Technical Anti-patterns (Red Flag Patterns)"
+      - "Basic Principles"
+      - "Comment Writing Rules"
+      - "Error Handling Fundamentals"
+      - "Rule of Three - Criteria for Code Duplication"
+      - "Common Failure Patterns and Avoidance Methods"
+      - "Debugging Techniques"
+      - "Type Safety Fundamentals"
+      - "Refactoring Techniques"
+      - "Situations Requiring Technical Decisions"
+      - "Continuous Improvement Mindset"
+      - "Implementation Completeness Assurance"
+      - "Red-Green-Refactor Process (Test-First Development)"
+      - "Test Design Principles"
+      - "Test Helper Utilization Rules"
+      - "Test Granularity Principles"
+      - "Continuity Test Scope"
+
+  typescript-rules:
+    skill: "typescript-rules"
+    tags: [implementation, type-safety, async, refactoring, coding-style, functional-programming, dependency-injection, branded-types, backend]
+    typical-use: "Backend TypeScript code creation, modification, refactoring, modern type features utilization"
+    size: small
+    key-references:
+      - "YAGNI Principle - Kent Beck"
+      - "Clean Code - Robert C. Martin"
+      - "DRY Principle - The Pragmatic Programmer"
+      - "Refactoring - Martin Fowler"
+      - "TypeScript 4.9 satisfies Operator - Microsoft"
+      - "Branded Types - TypeScript Community"
+      - "Effect-TS / fp-ts - Functional Programming"
+      - "Dependency Injection - Martin Fowler"
+      - "Avoiding fallback in distributed systems - AWS Builders' Library"
+    sections:
+      - "Type Safety in Backend Implementation"
+      - "Coding Conventions"
+      - "Error Handling"
+      - "Performance Optimization"
+
+  typescript-testing:
+    skill: "typescript-testing"
+    tags: [quality, testing, tdd, coverage, vitest, implementation, debugging, refactoring, backend]
+    typical-use: "Backend test creation, quality checks, test quality criteria, development steps for code/bug fixes, refactoring, and new feature implementation"
+    size: small
+    key-references:
+      - "Test-Driven Development - Kent Beck"
+      - "Rule of Three - Martin Fowler"
+      - "Red-Green-Refactor - Kent Beck"
+      - "AAA Pattern - Arrange-Act-Assert"
+    sections:
+      - "Test Framework"
+      - "Basic Testing Policy"
+      - "Test Implementation Conventions"
+      - "Test Quality Criteria"
+      - "Mock Type Safety Enforcement"
+      - "Basic Vitest Example"
+
+  technical-spec:
+    skill: "technical-spec"
+    tags: [architecture, design, documentation, environment, data-flow, implementation, quality-commands, testing, build]
+    typical-use: "Technical design, environment configuration, documentation creation process, implementation policy decisions, quality check commands, build and test execution"
+    size: medium
+    key-references:
+      - "ADR Format - Michael Nygard"
+      - "Single Data Source Principle - Single Source of Truth"
+    sections:
+      - "Basic Technology Stack Policy"
+      - "Environment Variable Management and Security"
+      - "Architecture Design"
+      - "Architecture Patterns"
+      - "Unified Data Flow Principles"
+      - "Build and Testing"
+
+  project-context:
+    skill: "project-context"
+    tags: [context, project-specific, implementation]
+    typical-use: "Project-specific information, understanding implementation principles"
+    size: small
+    key-references:
+      - "Project-specific (empirical)"
+    sections:
+      - "Basic Configuration"
+      - "Implementation Principles"
+      - "Customization Guide"
+
+  documentation-criteria:
+    skill: "documentation-criteria"
+    tags: [documentation, adr, prd, design-doc, work-plan, decision-matrix]
+    typical-use: "Implementation start scale assessment, document creation decisions, ADR/PRD/Design Doc/work plan creation criteria"
+    size: medium
+    key-references:
+      - "ADR Methodology - Michael Nygard"
+      - "Design Doc Culture - Google Engineering Practices"
+      - "Single Source of Truth"
+    sections:
+      - "Creation Decision Matrix"
+      - "ADR Creation Conditions (Required if Any Apply)"
+      - "Detailed Document Definitions"
+      - "Creation Process"
+      - "Storage Locations"
+      - "ADR Status"
+      - "AI Automation Rules"
+      - "Diagram Requirements"
+      - "Common ADR Relationships"
+
+  implementation-approach:
+    skill: "implementation-approach"
+    tags: [architecture, implementation, task-decomposition, strategy-patterns, strangler-pattern, facade-pattern, design, planning, confirmation-levels]
+    typical-use: "Implementation strategy selection, task decomposition, design decisions, large-scale change planning"
+    size: medium
+    key-references:
+      - "Strangler Fig Pattern - Martin Fowler"
+      - "Feature Slicing - Martin Fowler"
+      - "Walking Skeleton - Alistair Cockburn"
+      - "Facade Pattern - Gang of Four"
+    sections:
+      - "Meta-cognitive Strategy Selection Process"
+      - "Verification Level Definitions"
+      - "Integration Point Definitions"
+      - "Anti-patterns"
+      - "Guidelines for Meta-cognitive Execution"
+
+  integration-e2e-testing:
+    skill: "integration-e2e-testing"
+    tags: [testing, integration-test, e2e-test, property-based-testing, fast-check, test-skeleton, test-review, quality]
+    typical-use: "Integration and E2E test skeleton generation, test implementation, test review, Property-Based Test implementation"
+    size: small
+    key-references:
+      - "fast-check - Property-based testing for TypeScript"
+      - "Node.js Testing Best Practices - Yoni Goldberg"
+      - "Property-Based Testing - 2025 Practices"
+    sections:
+      - "Test Types and Limits"
+      - "Behavior-First Principle"
+      - "Skeleton Specification"
+      - "Implementation Rules"
+      - "Review Criteria"
+
+  subagents-orchestration-guide:
+    skill: "subagents-orchestration-guide"
+    tags: [orchestration, subagents, workflow, scale-determination, document-requirements, autonomous-execution]
+    typical-use: "Coordinating subagents through implementation workflows, scale determination, document requirements"
+    size: medium
+    key-references:
+      - "Workflow Orchestration Patterns"
+      - "Agent Coordination Patterns"
+    sections:
+      - "Scale Determination"
+      - "Document Requirements"
+      - "Stop Points"
+      - "Autonomous Execution Mode"
+
+  # Frontend-specific Skills
+  frontend/typescript-rules:
+    skill: "frontend/typescript-rules"
+    tags: [frontend, react, implementation, type-safety, function-components, props-driven, async, refactoring, coding-style]
+    typical-use: "React component creation, Props type definitions, frontend TypeScript development"
+    size: small
+    key-references:
+      - "React Function Components - React Official"
+      - "Props-driven Design - React Best Practices"
+      - "YAGNI Principle - Kent Beck"
+      - "Clean Code - Robert C. Martin"
+      - "TypeScript satisfies Operator - Microsoft"
+    sections:
+      - "Frontend-Specific Anti-patterns"
+      - "Type Safety in Frontend Implementation"
+      - "Coding Conventions"
+      - "Error Handling"
+      - "Performance Optimization"
+
+  frontend/typescript-testing:
+    skill: "frontend/typescript-testing"
+    tags: [frontend, react, quality, testing, tdd, coverage, vitest, react-testing-library, msw, implementation]
+    typical-use: "React component testing, React Testing Library tests, MSW API mocking, frontend test creation"
+    size: small
+    key-references:
+      - "React Testing Library - Kent C. Dodds"
+      - "MSW (Mock Service Worker) - MSW Team"
+      - "Test-Driven Development - Kent Beck"
+      - "Red-Green-Refactor - Kent Beck"
+      - "User-Observable Behavior Testing - Testing Library"
+    sections:
+      - "Test Framework"
+      - "Basic Testing Policy"
+      - "Test Implementation Conventions"
+      - "Mock Type Safety Enforcement"
+      - "Basic React Testing Library Example"
+
+  frontend/technical-spec:
+    skill: "frontend/technical-spec"
+    tags: [frontend, react, vite, architecture, design, environment, data-flow, implementation, performance]
+    typical-use: "React technical design, Vite configuration, frontend environment setup, component architecture decisions"
+    size: medium
+    key-references:
+      - "React Official Documentation"
+      - "Build Tool Best Practices"
+      - "Single Source of Truth"
+    sections:
+      - "Basic Technology Stack Policy"
+      - "Environment Variable Management and Security"
+      - "Architecture Design"
+      - "Unified Data Flow Principles"
+      - "Build and Testing"
+      - "Quality Check Requirements"
+      - "Coverage Requirements"
+      - "Non-functional Requirements"
+
+  # Supabase Skills
+  supabase:
+    skill: "supabase"
+    tags: [database, backend, supabase, rls, type-generation, postgresql, security, realtime]
+    typical-use: "Supabase database design, RLS policies, type generation, client usage, realtime subscriptions"
+    size: medium
+    key-references:
+      - "Supabase Documentation"
+      - "PostgreSQL Best Practices"
+      - "Row Level Security - Supabase"
+    sections:
+      - "Database Design Principles"
+      - "Type Generation"
+      - "Row Level Security (RLS)"
+      - "Client Usage Patterns"
+      - "Common Anti-Patterns"
+      - "Environment Variables"
+      - "Realtime Subscriptions"
+      - "Migration Naming Convention"
+
+  supabase-local:
+    skill: "supabase-local"
+    tags: [database, supabase, local-dev, cli, docker, migrations, troubleshooting]
+    typical-use: "Local Supabase development, CLI commands, migrations, seeding, troubleshooting"
+    size: small
+    key-references:
+      - "Supabase CLI Documentation"
+      - "Local Development Guide"
+    sections:
+      - "CLI Commands Reference"
+      - "Local Configuration"
+      - "Migration Workflow"
+      - "Seeding Data"
+      - "Local vs Production Parity"
+      - "Common Local Development Tasks"
+      - "Troubleshooting"
+
+  supabase-edge-functions:
+    skill: "supabase-edge-functions"
+    tags: [serverless, supabase, deno, edge, functions, webhooks, deployment]
+    typical-use: "Supabase Edge Functions with Deno, webhooks, authentication"
+    size: medium
+    key-references:
+      - "Deno Documentation"
+      - "Supabase Edge Functions Guide"
+    sections:
+      - "Function Structure"
+      - "Type Safety in Deno"
+      - "Authentication in Edge Functions"
+      - "CORS Handling"
+      - "Local Development"
+      - "Deployment"
+      - "Webhooks Pattern"
+      - "Environment Variables"
+      - "Error Handling Best Practices"
+
+  supabase-testing:
+    skill: "supabase-testing"
+    tags: [testing, supabase, vitest, integration-test, rls, factories]
+    typical-use: "Testing Supabase, RLS policy testing, test factories"
+    size: small
+    key-references:
+      - "Vitest Documentation"
+      - "Testing Best Practices"
+    sections:
+      - "Test Database Setup"
+      - "Mocking Strategies"
+      - "RLS Testing"
+      - "Integration Test Patterns"
+      - "CI/CD Integration"
+      - "Test Utilities"
+
+  # Vercel Skills
+  vercel-deployment:
+    skill: "vercel-deployment"
+    tags: [deployment, vercel, ci-cd, hosting, environment, domains, monitoring]
+    typical-use: "Vercel deployment, environment variables, builds, monitoring, troubleshooting"
+    size: medium
+    key-references:
+      - "Vercel Documentation"
+      - "Next.js Deployment Guide"
+    sections:
+      - "Configuration"
+      - "Environment Variables"
+      - "Build Configuration"
+      - "Deployment Types"
+      - "Build Optimization"
+      - "Function Configuration"
+      - "Domain Configuration"
+      - "Deployment Protection"
+      - "Monitoring and Logs"
+      - "CI/CD Integration"
+      - "Troubleshooting"
+      - "Best Practices"
+
+  vercel-edge:
+    skill: "vercel-edge"
+    tags: [edge, vercel, middleware, serverless, caching, geo-routing]
+    typical-use: "Vercel Edge Functions, middleware, caching, geo-routing"
+    size: small
+    key-references:
+      - "Vercel Edge Runtime"
+      - "Next.js Middleware"
+    sections:
+      - "Edge Runtime Constraints"
+      - "Middleware Patterns"
+      - "Edge Functions"
+      - "Edge Config"
+      - "Caching at the Edge"
+      - "Best Practices"
+
+  # Authentication Skills
+  stack-auth:
+    skill: "stack-auth"
+    tags: [authentication, stack-auth, mcp, oauth, security, magic-link, error-handling]
+    typical-use: "Stack-auth integration, MCP server, auth flows, OAuth, magic links"
+    size: medium
+    key-references:
+      - "Stack-auth Documentation"
+      - "MCP Server: https://mcp.stack-auth.com/"
+    sections:
+      - "Overview"
+      - "Setup"
+      - "Authentication Flows"
+      - "User Management"
+      - "Security Best Practices"
+      - "Integration with Supabase"
+      - "MCP Server Usage"
+      - "Sign Out"
+      - "Error Handling"
+
+  # Integration Skills
+  fullstack-integration:
+    skill: "fullstack-integration"
+    tags: [architecture, integration, supabase, vercel, stack-auth, fullstack, deployment, schema]
+    typical-use: "Cross-service integration patterns, deployment checklists, database schema patterns"
+    size: medium
+    key-references:
+      - "Fullstack Architecture Patterns"
+      - "Service Integration Best Practices"
+    sections:
+      - "Architecture Overview"
+      - "Authentication Flow Integration"
+      - "Environment Configuration"
+      - "Error Handling Patterns"
+      - "Performance Patterns"
+      - "Database Schema Pattern"
+      - "Deployment Checklist"
+      - "Common Integration Issues"

package/.claude/skills/technical-spec/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: technical-spec
+description: Defines environment variables, architecture design, and build/test commands. Use when configuring environment or designing architecture.
+---
+
+# 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 `.env` files 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
+1. **Single Data Source**: Store the same information in only one place
+2. **Structured Data Priority**: Use parsed objects rather than JSON strings
+3. **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 build
+- `type-check` - Type check (no emit)
+
+### Testing Commands
+- `test` - Run tests
+- `test:coverage` - Run tests with coverage
+- `test: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**
+- `check` - Biome (lint + format)
+- `check:unused` - Detect unused exports
+- `check:deps` - Detect circular dependencies
+- `build` - 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 verification
+- `open coverage/index.html` - Check coverage report
+- `format` - Format fixes
+- `lint:fix` - Lint fixes
+
+### Troubleshooting
+- **Port in use error**: Run the `cleanup:processes` script
+- **Cache issues**: Run the `test:coverage:fresh` script
+- **Dependency errors**: Clean reinstall dependencies
+
+### Coverage Requirements
+- **MANDATORY**: Unit test coverage MUST be 70% or higher
+- **Metrics**: Statements, Branches, Functions, Lines

package/.claude/skills/typescript-rules/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: typescript-rules
+description: Applies type safety and error handling rules. Enforces no-any policy and type guards. Use when implementing TypeScript or reviewing types.
+---
+
+# TypeScript Development Rules
+
+## Type Safety in Backend Implementation
+
+**Type Safety in Data Flow**
+Input Layer (`unknown`) -> Type Guard -> Business Layer (Type Guaranteed) -> Output Layer (Serialization)
+
+**Backend-Specific Type Scenarios**:
+- **API Communication**: Always receive responses as `unknown`, validate with type guards
+- **Form Input**: External input as `unknown`, type determined after validation
+- **Legacy Integration**: Stepwise assertion like `window as unknown as LegacyWindow`
+- **Test Code**: Always define types for mocks, utilize `Partial<T>` and `vi.fn<[Args], Return>()`
+
+## Coding Conventions
+
+**Class Usage Criteria**
+- **Recommended: Implementation with Functions and Interfaces**
+  - Rationale: Improves testability and flexibility of function composition
+- **Classes Allowed**:
+  - Framework requirements (NestJS Controller/Service, TypeORM Entity, etc.)
+  - Custom error class definitions
+  - When state and business logic are tightly coupled (e.g., ShoppingCart, Session, StateMachine)
+- **Decision Criterion**: If "Does this data have behavior?" is Yes, consider using a class
+  ```typescript
+  // Functions and interfaces
+  interface UserService { create(data: UserData): User }
+  const userService: UserService = { create: (data) => {...} }
+  ```
+
+**Function Design**
+- **0-2 parameters maximum**: Use object for 3+ parameters
+  ```typescript
+  // Object parameter
+  function createUser({ name, email, role }: CreateUserParams) {}
+  ```
+
+**Dependency Injection**
+- **Inject external dependencies as parameters**: Ensure testability and modularity
+  ```typescript
+  // Receive dependency as parameter
+  function createService(repository: Repository) { return {...} }
+  ```
+
+**Asynchronous Processing**
+- Promise Handling: Always use `async/await`
+- Error Handling: Always handle with `try-catch`
+- Type Definition: Explicitly define return value types (e.g., `Promise<Result>`)
+
+**Format Rules**
+- Semicolon omission (follow Biome settings)
+- Types in `PascalCase`, variables/functions in `camelCase`
+- Imports use absolute paths (`src/`)
+
+**Clean Code Principles**
+- Delete unused code immediately
+- Delete debug `console.log()`
+- No commented-out code (manage history with version control)
+- Comments explain "why" (not "what")
+
+## Error Handling
+
+**Absolute Rule**: Error suppression prohibited. All errors must have log output and appropriate handling.
+
+**Fail-Fast Principle**: Fail quickly on errors to prevent continued processing in invalid states
+```typescript
+// Prohibited: Unconditional fallback
+catch (error) {
+  return defaultValue // Hides error
+}
+
+// Required: Explicit failure
+catch (error) {
+  logger.error('Processing failed', error)
+  throw error // Handle appropriately at higher layer
+}
+```
+
+**Result Type Pattern**: Express errors with types for explicit handling
+```typescript
+type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }
+
+// Example: Express error possibility with types
+function parseUser(data: unknown): Result<User, ValidationError> {
+  if (!isValid(data)) return { ok: false, error: new ValidationError() }
+  return { ok: true, value: data as User }
+}
+```
+
+**Custom Error Classes**
+```typescript
+export class AppError extends Error {
+  constructor(message: string, public readonly code: string, public readonly statusCode = 500) {
+    super(message)
+    this.name = this.constructor.name
+  }
+}
+// Purpose-specific: ValidationError(400), BusinessRuleError(400), DatabaseError(500), ExternalServiceError(502)
+```
+
+**Layer-Specific Error Handling (Backend)**
+- API Layer: Convert to HTTP response, log output excluding sensitive information
+- Service Layer: Detect business rule violations, propagate AppError as-is
+- Repository Layer: Convert technical errors to domain errors
+
+**Structured Logging and Sensitive Information Protection**
+Never include sensitive information (password, token, apiKey, secret, creditCard) in logs
+
+**Asynchronous Error Handling**
+- Global handler setup mandatory: `unhandledRejection`, `uncaughtException`
+- Use try-catch with all async/await
+- Always log and re-throw errors
+
+## Performance Optimization
+
+- Streaming Processing: Process large datasets with streams
+- Memory Leak Prevention: Explicitly release unnecessary objects