Cassel
647cbec54f
- 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>
2.6 KiB
2.6 KiB
name, description
| name | description |
|---|---|
| browse-design-system | Generate a disposable localhost app to explore tokens, components, and relationships |
Browse Design System
Goal: Generate and serve an interactive localhost application for exploring the design system — tokens, components, relationships, and intent-based search.
INITIALIZATION
Design Log
Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.
Steps
Step 1: Load Design System Data
Read all design system files:
{output_folder}/D-Design-System/design-tokens.md— All tokens{output_folder}/D-Design-System/components/*.md— All components{output_folder}/D-Design-System/component-library-config.md— Config
Parse into structured data: tokens with categories, components with dependencies, relationship graph.
Step 2: Generate Browser Application
Build a single-page localhost app with four views:
Token Explorer
- Airtable-style table: filterable by category, sortable by name/value
- Live preview column: colors show swatches, spacing shows bars, typography shows rendered text
- Search: filter by name, value, or category
Component Catalog
- Grid of all components with thumbnail previews
- Click to expand: all variants, all states, token dependencies
- Filter by category (navigation, forms, content, layout)
Relationship Viewer
- Interactive graph: nodes are tokens and components
- Click a component → highlight all tokens it uses
- Click a token → highlight all components that reference it
- "Show me what uses --color-primary" → highlights the chain
Intent Search
- Natural language input: "I need a background for warning messages"
- Matches against token names, descriptions, categories, and component usage
- Shows results with live previews and copy-ready token names
Step 3: Serve and Interact
Start the localhost server and present:
Design System Browser running at http://localhost:XXXX
Views:
- /tokens — Token Explorer
- /components — Component Catalog
- /graph — Relationship Viewer
- /search — Intent Search
Press any key to stop the server.
User browses freely. WDS stays available for questions about what they find.
Step 4: Capture Actions
If the user identifies changes while browsing:
- Log desired changes (rename token, add variant, fix inconsistency)
- On exit, present action list
- Route to appropriate activity: [C] Create, [E] Edit, or [V] View
AFTER COMPLETION
- Update design log
- Stop localhost server, discard generated app
- Return to Phase 7 Activity Menu