Files
bi-agents/_bmad/wds/workflows/7-design-system/workflow-view.md
Cassel 647cbec54f docs: update all documentation and add AI tooling configs
- Rewrite README.md with current architecture, features and stack
- Update docs/API.md with all current endpoints (corporate, BI, client 360)
- Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL
- Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente)
- Add docs/INDEX.md documentation index
- Add PROJETO.md comprehensive project reference
- Add BI-CCC-Implementation-Guide.md
- Include AI agent configs (.claude, .agents, .gemini, _bmad)
- Add netbird VPN configuration
- Add status report

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 13:29:03 -04:00

1.7 KiB

name, description
name description
view-components Preview selected design system components rendered in localhost

View Components

Goal: Render selected components in a localhost preview so the user can see them visually with all states and variants.


INITIALIZATION

Design Log

Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.

Steps

Step 1: Select Components

Present the component catalog and let the user choose what to view:

Available components:
1. Button (4 variants)
2. Card (3 variants)
3. Input (5 variants)
...

Select components to preview (comma-separated, or "all"):

Step 2: Generate Preview App

Build a minimal localhost application that renders the selected components:

  1. Read component specifications from {output_folder}/D-Design-System/components/
  2. Read design tokens from {output_folder}/D-Design-System/design-tokens.md
  3. Generate HTML/CSS that renders each component with:
    • All variants side by side
    • All interactive states (default, hover, active, disabled, focus)
    • Responsive breakpoints
    • Dark/light mode (if defined)
  4. Serve on localhost

Step 3: Interactive Review

With the preview running:

  • User inspects components visually
  • User can request changes → routes to [E] Edit Components or [C] Create (update)
  • User can flag issues → logged for later

Step 4: Capture Feedback

If the user notes issues or desired changes:

  1. Log each item with component name, issue description, severity
  2. Suggest next action: edit in Figma, update via Create, or defer

AFTER COMPLETION

  1. Update design log
  2. Stop localhost server
  3. Return to Phase 7 Activity Menu