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: Routes React component generation from mermaid diagram templates to DevForge AI agents. Loads the shared mermaid-diagram-templates skill, then maps each diagram pattern to its corresponding React component structure (state routers, modals, buttons, HITL queues).4---56# Diagram-Driven Code Generation78## Overview910This 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.1112## Routing Criteria1314Route to this skill when:1516- **Generating React components from UI/UX specifications** — maps diagram patterns to component structure17- **Creating state routers** — generates three-state navigation (Agents/Upserts/Workspace) from `three-state-navigation` template18- **Wiring modals to buttons** — generates button click handlers and modal open/close logic from `page-state-flow` template19- **Building HITL review queues** — generates review queue components from `hitl-review` template20- **Implementing approval matrices** — generates approval routing components from `approval-matrix` template21- **Regenerating code after diagram refinement** — re-renders components when template version bumps2223## Capabilities2425### Component Generation Patterns2627| Template | Generated Component | Key Outputs |28|----------|-------------------|-------------|29| `three-state-navigation` | State router + nav bar | State buttons, active state tracking, transition handlers |30| `page-state-flow` | Page layout with modal wiring | Modal open/close handlers, state-aware rendering |31| `hitl-review` | HITL review queue | Review cards, approve/reject/assign buttons, audit trail |32| `approval-matrix` | Approval routing UI | Approval chain display, threshold-based routing |33| `procurement-lifecycle` | Procurement workflow UI | Step indicators, status tracking, action buttons |34| `order-creation-flow` | Order creation form | Template selector, discipline picker, form validation |35| `sow-generation` | SOW generation interface | Appendix list, AI generation trigger, content preview |36| `spec-template-registry` | Template selector UI | Template list, version display, schema preview |37| `appendix-b-hitl` | Appendix review interface | Dynamic section rendering, confidence indicators, chatbot |38| `template-complexity-tree` | Complexity selector | Radio button group, complexity descriptions, workflow preview |3940### Code Generation Workflow4142```javascript43// 1. Load the diagram template44const template = loadTemplate('three-state-navigation');4546// 2. Generate React component structure47const component = generateComponent(template, {48 discipline: '01900',49 states: ['Agents', 'Upserts', 'Workspace'],50 buttons: [51 { label: 'View Details', modal: 'AgentDetails', gate: 'always' },52 { label: 'Create New', modal: 'CreateRecord', gate: 'editor' },53 { label: 'Approve', modal: 'Approval', gate: 'reviewer' }54 ]55});5657// 3. Output: React component with:58// - State router (useState for active state)59// - Button config array (label, modal, visibility gate)60// - Modal wiring (open/close handlers per button)61// - Nav bar component with active state highlighting62```6364### Template Version Awareness6566When a template version bumps, the skill:67681. Detects the version change from `registry.yaml`692. Compares old vs new diagram structure703. Identifies changed nodes, edges, or parameters714. Regenerates only the affected components725. Creates a PR with the updated code7374## Related Skills7576- `mermaid-diagram-templates` (PaperclipForge AI) — Shared template library (prerequisite)77- `interface-devforge-api-integration` — API integration patterns78- `forge-devforge-system-architecture` — System architecture design79- `devcore-devforge-core-development` — Core development patterns8081## Success Metrics8283- **Code-Diagram Conformance**: 100% of generated components match their source diagram84- **Template Coverage**: ≥90% of UI components generated from diagram templates85- **Regeneration Speed**: <1 second per component regeneration86- **Version Drift**: Zero drift between diagram version and generated code version8788---8990*This skill routes to DevForge AI agents for generating React components from mermaid diagram templates.*
Construct-AI-primary