Diagram-Driven Code Generation
Overview
This skill enables DevForge AI agents to generate React components directly from parameterized mermaid diagram templates. The templates serve as the single source of truth — when a diagram is refined, the generated code updates automatically.
Routing Criteria
Route to this skill when:
- Generating React components from UI/UX specifications — maps diagram patterns to component structure
- Creating state routers — generates three-state navigation (Agents/Upserts/Workspace) from
three-state-navigation template
- Wiring modals to buttons — generates button click handlers and modal open/close logic from
page-state-flow template
- Building HITL review queues — generates review queue components from
hitl-review template
- Implementing approval matrices — generates approval routing components from
approval-matrix template
- Regenerating code after diagram refinement — re-renders components when template version bumps
Capabilities
Component Generation Patterns
| Template |
Generated Component |
Key Outputs |
three-state-navigation |
State router + nav bar |
State buttons, active state tracking, transition handlers |
page-state-flow |
Page layout with modal wiring |
Modal open/close handlers, state-aware rendering |
hitl-review |
HITL review queue |
Review cards, approve/reject/assign buttons, audit trail |
approval-matrix |
Approval routing UI |
Approval chain display, threshold-based routing |
procurement-lifecycle |
Procurement workflow UI |
Step indicators, status tracking, action buttons |
order-creation-flow |
Order creation form |
Template selector, discipline picker, form validation |
sow-generation |
SOW generation interface |
Appendix list, AI generation trigger, content preview |
spec-template-registry |
Template selector UI |
Template list, version display, schema preview |
appendix-b-hitl |
Appendix review interface |
Dynamic section rendering, confidence indicators, chatbot |
template-complexity-tree |
Complexity selector |
Radio button group, complexity descriptions, workflow preview |
Code Generation Workflow
// 1. Load the diagram template
const template = loadTemplate('three-state-navigation');
// 2. Generate React component structure
const component = generateComponent(template, {
discipline: '01900',
states: ['Agents', 'Upserts', 'Workspace'],
buttons: [
{ label: 'View Details', modal: 'AgentDetails', gate: 'always' },
{ label: 'Create New', modal: 'CreateRecord', gate: 'editor' },
{ label: 'Approve', modal: 'Approval', gate: 'reviewer' }
]
});
// 3. Output: React component with:
// - State router (useState for active state)
// - Button config array (label, modal, visibility gate)
// - Modal wiring (open/close handlers per button)
// - Nav bar component with active state highlighting
Template Version Awareness
When a template version bumps, the skill:
- Detects the version change from
registry.yaml
- Compares old vs new diagram structure
- Identifies changed nodes, edges, or parameters
- Regenerates only the affected components
- Creates a PR with the updated code
Related Skills
mermaid-diagram-templates (PaperclipForge AI) — Shared template library (prerequisite)interface-devforge-api-integration — API integration patternsforge-devforge-system-architecture — System architecture designdevcore-devforge-core-development — Core development patterns
Success Metrics
- Code-Diagram Conformance: 100% of generated components match their source diagram
- Template Coverage: ≥90% of UI components generated from diagram templates
- Regeneration Speed: <1 second per component regeneration
- Version Drift: Zero drift between diagram version and generated code version
This skill routes to DevForge AI agents for generating React components from mermaid diagram templates.
1---2name: diagram-driven-code-generation3description: >4 Routes React component generation from mermaid diagram templates to DevForge AI agents.5 Loads the shared mermaid-diagram-templates skill, then maps each diagram pattern6 to its corresponding React component structure (state routers, modals, buttons, HITL queues).7company: devforge-ai8---910# Diagram-Driven Code Generation1112## Overview1314This skill enables DevForge AI agents to generate React components directly from parameterized mermaid diagram templates. The templates serve as the single source of truth — when a diagram is refined, the generated code updates automatically.1516## Routing Criteria1718Route to this skill when:1920- **Generating React components from UI/UX specifications** — maps diagram patterns to component structure21- **Creating state routers** — generates three-state navigation (Agents/Upserts/Workspace) from `three-state-navigation` template22- **Wiring modals to buttons** — generates button click handlers and modal open/close logic from `page-state-flow` template23- **Building HITL review queues** — generates review queue components from `hitl-review` template24- **Implementing approval matrices** — generates approval routing components from `approval-matrix` template25- **Regenerating code after diagram refinement** — re-renders components when template version bumps2627## Capabilities2829### Component Generation Patterns3031| Template | Generated Component | Key Outputs |32|----------|-------------------|-------------|33| `three-state-navigation` | State router + nav bar | State buttons, active state tracking, transition handlers |34| `page-state-flow` | Page layout with modal wiring | Modal open/close handlers, state-aware rendering |35| `hitl-review` | HITL review queue | Review cards, approve/reject/assign buttons, audit trail |36| `approval-matrix` | Approval routing UI | Approval chain display, threshold-based routing |37| `procurement-lifecycle` | Procurement workflow UI | Step indicators, status tracking, action buttons |38| `order-creation-flow` | Order creation form | Template selector, discipline picker, form validation |39| `sow-generation` | SOW generation interface | Appendix list, AI generation trigger, content preview |40| `spec-template-registry` | Template selector UI | Template list, version display, schema preview |41| `appendix-b-hitl` | Appendix review interface | Dynamic section rendering, confidence indicators, chatbot |42| `template-complexity-tree` | Complexity selector | Radio button group, complexity descriptions, workflow preview |4344### Code Generation Workflow4546```javascript47// 1. Load the diagram template48const template = loadTemplate('three-state-navigation');4950// 2. Generate React component structure51const component = generateComponent(template, {52 discipline: '01900',53 states: ['Agents', 'Upserts', 'Workspace'],54 buttons: [55 { label: 'View Details', modal: 'AgentDetails', gate: 'always' },56 { label: 'Create New', modal: 'CreateRecord', gate: 'editor' },57 { label: 'Approve', modal: 'Approval', gate: 'reviewer' }58 ]59});6061// 3. Output: React component with:62// - State router (useState for active state)63// - Button config array (label, modal, visibility gate)64// - Modal wiring (open/close handlers per button)65// - Nav bar component with active state highlighting66```6768### Template Version Awareness6970When a template version bumps, the skill:71721. Detects the version change from `registry.yaml`732. Compares old vs new diagram structure743. Identifies changed nodes, edges, or parameters754. Regenerates only the affected components765. Creates a PR with the updated code7778## Related Skills7980- `mermaid-diagram-templates` (PaperclipForge AI) — Shared template library (prerequisite)81- `interface-devforge-api-integration` — API integration patterns82- `forge-devforge-system-architecture` — System architecture design83- `devcore-devforge-core-development` — Core development patterns8485## Success Metrics8687- **Code-Diagram Conformance**: 100% of generated components match their source diagram88- **Template Coverage**: ≥90% of UI components generated from diagram templates89- **Regeneration Speed**: <1 second per component regeneration90- **Version Drift**: Zero drift between diagram version and generated code version9192---9394*This skill routes to DevForge AI agents for generating React components from mermaid diagram templates.*
Construct-AI-primary