Discipline UI/UX Spec Generation
Overview
This skill enables DomainForge AI agents to create and update UI/UX specifications for any engineering discipline using parameterized mermaid diagram templates. Instead of hardcoding diagrams in each spec, agents render templates with discipline-specific parameters, ensuring consistency across all specs and enabling automatic updates when templates are refined.
Routing Criteria
Route to this skill when:
- Creating a new UI/UX specification for any discipline — generates the full spec with parameterized diagrams
- Updating an existing UI/UX specification — re-renders diagrams with current template versions
- Adding a new workflow diagram to a spec — selects the appropriate template and renders with discipline parameters
- Cross-referencing diagram usage — queries the registry to find which templates a spec uses
- Validating spec consistency — ensures all diagrams use parameterized templates (not hardcoded)
Capabilities
Spec Generation Workflow
# 1. Create a new UI/UX spec for a discipline
node docs-paperclip/scripts/render-mermaid.js \
--discipline 00860 \
--output-dir docs-paperclip/disciplines/00860-electrical-engineering/diagrams/
# 2. The spec document references rendered diagrams via include directives:
# 
# 
Discipline-Specific Parameters
| Parameter |
01900 Procurement |
00860 Electrical |
02400 Safety |
| discipline |
01900 |
00860 |
02400 |
| complexity |
standard |
complex |
compliance |
| showHITL |
true |
true |
true |
| showPayment |
true |
false |
false |
| appendices |
A, B, C, E |
A, C, D, F |
A, B, C, F |
Template Selection by Discipline
| Discipline |
Required Templates |
| 01900 Procurement |
procurement-lifecycle, three-state-navigation, order-creation-flow, sow-generation, hitl-review, approval-matrix, spec-template-registry, appendix-b-hitl, template-complexity-tree, page-state-flow |
| 00860 Electrical |
procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, page-state-flow |
| 02400 Safety |
procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, spec-template-registry, appendix-b-hitl, page-state-flow |
| 00872 Structural |
procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, page-state-flow |
| 01300 Governance |
three-state-navigation, approval-matrix, page-state-flow |
Template Version Awareness
When a template version bumps, the skill:
- Detects the version change from
registry.yaml
- Identifies all specs that use the updated template
- Re-renders the affected diagrams with current parameters
- Updates the spec document's version history
- Creates a PR with the updated spec
Related Skills
mermaid-diagram-templates (PaperclipForge AI) — Shared template library (prerequisite)construction-domainforge-construction-engineering — Construction engineering domain knowledgecommercial-domainforge-commercial — Commercial domain knowledgeuser-experience-engineering — UI/UX design patterns
Success Metrics
- Template Coverage: ≥90% of diagrams in UI/UX specs use parameterized templates
- Version Compliance: All specs reference the current template version
- Render Accuracy: 100% of rendered diagrams parse without Mermaid syntax errors
- Spec Creation Speed: <30 minutes to generate a complete UI/UX spec for any discipline
This skill routes to DomainForge AI agents for creating and updating discipline-specific UI/UX specifications using parameterized mermaid diagram templates.
1---2name: discipline-ui-ux-spec-generation3description: Routes UI/UX specification creation and updates for any discipline to DomainForge AI agents. Loads the shared mermaid-diagram-templates skill, then renders parameterized diagrams with discipline-specific codes, labels, and complexity levels.4---56# Discipline UI/UX Spec Generation78## Overview910This skill enables DomainForge AI agents to create and update UI/UX specifications for any engineering discipline using parameterized mermaid diagram templates. Instead of hardcoding diagrams in each spec, agents render templates with discipline-specific parameters, ensuring consistency across all specs and enabling automatic updates when templates are refined.1112## Routing Criteria1314Route to this skill when:1516- **Creating a new UI/UX specification** for any discipline — generates the full spec with parameterized diagrams17- **Updating an existing UI/UX specification** — re-renders diagrams with current template versions18- **Adding a new workflow diagram** to a spec — selects the appropriate template and renders with discipline parameters19- **Cross-referencing diagram usage** — queries the registry to find which templates a spec uses20- **Validating spec consistency** — ensures all diagrams use parameterized templates (not hardcoded)2122## Capabilities2324### Spec Generation Workflow2526```bash27# 1. Create a new UI/UX spec for a discipline28node docs-paperclip/scripts/render-mermaid.js \29 --discipline 00860 \30 --output-dir docs-paperclip/disciplines/00860-electrical-engineering/diagrams/3132# 2. The spec document references rendered diagrams via include directives:33# 34# 35```3637### Discipline-Specific Parameters3839| Parameter | 01900 Procurement | 00860 Electrical | 02400 Safety |40|-----------|------------------|-----------------|--------------|41| discipline | 01900 | 00860 | 02400 |42| complexity | standard | complex | compliance |43| showHITL | true | true | true |44| showPayment | true | false | false |45| appendices | A, B, C, E | A, C, D, F | A, B, C, F |4647### Template Selection by Discipline4849| Discipline | Required Templates |50|------------|-------------------|51| 01900 Procurement | procurement-lifecycle, three-state-navigation, order-creation-flow, sow-generation, hitl-review, approval-matrix, spec-template-registry, appendix-b-hitl, template-complexity-tree, page-state-flow |52| 00860 Electrical | procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, page-state-flow |53| 02400 Safety | procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, spec-template-registry, appendix-b-hitl, page-state-flow |54| 00872 Structural | procurement-lifecycle, three-state-navigation, hitl-review, approval-matrix, page-state-flow |55| 01300 Governance | three-state-navigation, approval-matrix, page-state-flow |5657### Template Version Awareness5859When a template version bumps, the skill:60611. Detects the version change from `registry.yaml`622. Identifies all specs that use the updated template633. Re-renders the affected diagrams with current parameters644. Updates the spec document's version history655. Creates a PR with the updated spec6667## Related Skills6869- `mermaid-diagram-templates` (PaperclipForge AI) — Shared template library (prerequisite)70- `construction-domainforge-construction-engineering` — Construction engineering domain knowledge71- `commercial-domainforge-commercial` — Commercial domain knowledge72- `user-experience-engineering` — UI/UX design patterns7374## Success Metrics7576- **Template Coverage**: ≥90% of diagrams in UI/UX specs use parameterized templates77- **Version Compliance**: All specs reference the current template version78- **Render Accuracy**: 100% of rendered diagrams parse without Mermaid syntax errors79- **Spec Creation Speed**: <30 minutes to generate a complete UI/UX spec for any discipline8081---8283*This skill routes to DomainForge AI agents for creating and updating discipline-specific UI/UX specifications using parameterized mermaid diagram templates.*
Construct-AI-primary