/ui-a2ui-render - A2UI Component Tree Generation

Generate A2UI (Agent-to-UI) component trees from UI specifications using the Atomic Design methodology.

Usage

# Generate A2UI tree from specification
/ui-a2ui-render "Dashboard with cards, header, and sidebar"

# Generate from specification file
/ui-a2ui-render --spec ./specs/dashboard.yaml

# Generate specific component type
/ui-a2ui-render --type form "User registration form with email, password, confirm"

# Output to file
/ui-a2ui-render "Project list view" --output ./a2ui/project-list.json

# Include data bindings
/ui-a2ui-render "User profile card" --with-bindings

# Generate with specific component library
/ui-a2ui-render "Modal dialog" --library shadcn

Output Format

A2UI TREE GENERATION: Dashboard with cards
═══════════════════════════════════════════════════════════════

Specification Analysis
───────────────────────────────────────────────────────────────
Input: "Dashboard with cards, header, and sidebar"
UI Type: Template (full page layout)
Detected Components:
├─ Header (organism)
├─ Sidebar (organism)
├─ CardGrid (organism)
└─ Card[] (organism, repeating)

A2UI Tree
───────────────────────────────────────────────────────────────
{
  "id": "dashboard-page",
  "type": "template",
  "component": "DashboardGrid",
  "props": {
    "columns": { "sm": 1, "md": 2, "lg": 3 },
    "gap": 24
  },
  "slots": {
    "header": [{
      "id": "main-header",
      "type": "organism",
      "component": "Header",
      "props": { "logo": "/logo.svg" },
      "children": [
        { "id": "nav", "type": "molecule", "component": "NavMenu" },
        { "id": "user", "type": "molecule", "component": "UserMenu" }
      ]
    }],
    "sidebar": [{
      "id": "main-sidebar",
      "type": "organism",
      "component": "Sidebar",
      "props": { "collapsible": true }
    }],
    "content": [
      { "id": "card-1", "type": "organism", "component": "Card" },
      { "id": "card-2", "type": "organism", "component": "Card" },
      { "id": "card-3", "type": "organism", "component": "Card" }
    ]
  },
  "metadata": {
    "source": "user-specification",
    "accessibility": { "role": "main" },
    "responsive": { "breakpoints": ["640px", "768px", "1024px"] }
  }
}

Component Statistics
───────────────────────────────────────────────────────────────
Total Nodes: 18
├─ Templates:  1
├─ Organisms:  5
├─ Molecules:  6
└─ Atoms:      6

Data Bindings: 4
Event Handlers: 3

RESULT: ✅ A2UI TREE GENERATED

A2UI Node Structure

interface A2UINode {
  // Identity
  id: string;
  type: "atom" | "molecule" | "organism" | "template";
  component: string;

  // Props
  props: Record<string, unknown>;
  dynamicProps?: Record<string, DataBinding>;

  // Children
  children?: A2UINode[];
  slots?: Record<string, A2UINode[]>;

  // Events
  events?: Record<string, EventHandler>;

  // Metadata
  metadata: {
    source: string;
    accessibility: AccessibilitySpec;
    responsive?: ResponsiveSpec;
  };
}

Options

Option	Description
--spec <file>	Load specification from YAML/JSON file
--type <type>	Component type (page, form, list, detail, modal)
--output <file>	Output A2UI tree to file
--with-bindings	Include dynamic data bindings
--library <name>	Target component library (shadcn, chakra, mui)
--format <fmt>	Output format (json, yaml)
--validate	Validate tree against schema

Component Types

Type	Description	Example
page	Full page layout	Dashboard, Settings
form	Data entry form	Login, Registration
list	List/grid of items	Project list, User list
detail	Detail view	Project detail, User profile
modal	Dialog/modal	Confirmation, Edit form

Atomic Level Selection

Is it a single, indivisible element?
├── YES → Atom (Button, Input, Icon)
└── NO → Does it combine 2-3 atoms for one purpose?
    ├── YES → Molecule (FormField, StatusIndicator)
    └── NO → Is it a distinct UI section?
        ├── YES → Organism (Card, Modal, Header)
        └── NO → Template (DashboardGrid, FormPage)

Examples

Dashboard

/ui-a2ui-render "Dashboard with:
- Header with logo, nav, user menu
- Sidebar with navigation
- Main area with 3-column card grid
- Cards showing project stats"

Form

/ui-a2ui-render --type form "Contact form with:
- Name (required)
- Email (required, validated)
- Message (textarea)
- Submit button"

List View

/ui-a2ui-render --type list "Project list with:
- Search and filter
- Grid of project cards
- Pagination
- Empty state"

Agent Invoked

Stage	Agent	Purpose
Analysis	generative-ui-intent-analyzer	Parse specification
Architecture	generative-ui-architect	Design component hierarchy
Rendering	moe-ui-a2ui-renderer	Generate A2UI tree
Validation	moe-ui-component-library-curator	Validate components

Exit Codes

Code	Meaning
0	A2UI tree generated successfully
1	Generation complete with warnings
2	Invalid specification
3	Component not found in library
4	Validation failed

Related Commands

• /ui-optimize - Full optimization pipeline
• /ui-design-system - Load design system
• /ui-quality - Run quality gates

Completion Checklist

Before marking complete:

• Specification parsed
• Component hierarchy designed
• Atomic levels assigned
• Props defined
• Accessibility metadata included
• Tree validated

When NOT to Use

Do NOT use when:

• ❌ Need full optimization (use /ui-optimize)
• ❌ Only need code generation
• ❌ Specification unclear (gather requirements first)

---

Command Version: 1.0.0 Created: 2026-01-19 Part of: CODITECT MoE UI/UX Agent System