Orchestrator template for creating contact center widgets following the architecture pattern: Widget → Hook → Component → Store → SDK
- Gather Requirements → 01-pre-questions.md
- Generate Code → 02-code-generation.md
- Generate Components (if needed) → 03-component-generation.md
- Integration → 04-integration.md
- Generate Tests → 05-test-generation.md
- Validation → 06-validation.md
Display-Only Widget:
- Modules: 01, 02, 04, 05, 06
- Skip: 03 (use existing components)
Interactive Widget:
- Modules: 01, 02, 04, 05, 06
- Skip: 03 (unless new components needed)
Complex Widget (Store + SDK):
- Modules: 01, 02, 03 (if new components), 04, 05, 06
Step 1: Requirements (01-pre-questions.md)
Gather widget name, design input, and 4 essential technical inputs: high-level user flow, detailed technical sequences, data structure mappings, and required API details.
Step 2: Code Generation (02-code-generation.md)
Generate widget component, custom hook, type definitions, package configuration, and config files.
Step 3: Component Generation (03-component-generation.md)
Conditional: Create presentational components in cc-components if new components are needed.
Step 4: Integration (04-integration.md)
Integrate widget into cc-widgets (React + Web Component exports) and sample apps (React + WC).
Step 5: Test Generation (05-test-generation.md)
Generate widget unit tests, hook unit tests, and optional E2E tests.
Step 6: Validation (06-validation.md)
Verify code quality, tests, documentation, integration, and manual testing.
Generate documentation using reusable templates:
- AGENTS.md: ../documentation/create-agent-md.md
- ARCHITECTURE.md: ../documentation/create-architecture-md.md
- Start with 01-pre-questions.md to gather requirements
- Read modules sequentially based on requirements
- Skip 03-component-generation.md if using existing components
- Generate code as you progress through modules
- Complete validation checklist at the end
Last Updated: 2025-11-26