feat(viz-platform): complete Sprint 1 - plugin structure and tests
Sprint 1 - viz-platform Plugin completed (13/13 issues): - Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component) - Agents: 3 files (theme-setup, layout-builder, component-check) - Documentation: README.md, claude-md-integration.md - Tests: 94 tests passing (68-99% coverage) - CHANGELOG updated with completion status Closes: #178, #179, #180, #181, #182 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
144
plugins/viz-platform/claude-md-integration.md
Normal file
144
plugins/viz-platform/claude-md-integration.md
Normal file
@@ -0,0 +1,144 @@
|
||||
# viz-platform CLAUDE.md Integration
|
||||
|
||||
Add this snippet to your project's CLAUDE.md to enable viz-platform capabilities.
|
||||
|
||||
## Integration Snippet
|
||||
|
||||
```markdown
|
||||
## Visualization (viz-platform)
|
||||
|
||||
This project uses viz-platform for Dash Mantine Components dashboards.
|
||||
|
||||
### Available Commands
|
||||
- `/component {name}` - Inspect DMC component props
|
||||
- `/chart {type}` - Create Plotly charts (line, bar, scatter, pie, area, histogram, box, heatmap, sunburst, treemap)
|
||||
- `/dashboard {template}` - Create layouts (basic, sidebar, tabs, split)
|
||||
- `/theme {name}` - Apply a theme
|
||||
- `/theme-new {name}` - Create custom theme
|
||||
- `/theme-css {name}` - Export theme as CSS
|
||||
|
||||
### MCP Tools Available
|
||||
- **DMC**: list_components, get_component_props, validate_component
|
||||
- **Charts**: chart_create, chart_configure_interaction
|
||||
- **Layouts**: layout_create, layout_add_filter, layout_set_grid, layout_add_section, layout_get
|
||||
- **Themes**: theme_create, theme_extend, theme_validate, theme_export_css, theme_list, theme_activate
|
||||
- **Pages**: page_create, page_add_navbar, page_set_auth, page_list, page_get_app_config
|
||||
|
||||
### Component Validation
|
||||
ALWAYS validate DMC components before use:
|
||||
1. Check props with `get_component_props(component_name)`
|
||||
2. Validate usage with `validate_component(component_name, props)`
|
||||
3. Fix any errors before proceeding
|
||||
|
||||
### Project Theme
|
||||
Theme: [YOUR_THEME_NAME or "default"]
|
||||
Color scheme: [light/dark]
|
||||
Primary color: [color name]
|
||||
```
|
||||
|
||||
## Cross-Plugin Configuration
|
||||
|
||||
If using with data-platform, add this section:
|
||||
|
||||
```markdown
|
||||
## Data + Visualization Workflow
|
||||
|
||||
### Data Loading (data-platform)
|
||||
- `/ingest {file}` - Load CSV, Parquet, or JSON
|
||||
- `/schema {table}` - View database schema
|
||||
- `/profile {data_ref}` - Statistical summary
|
||||
|
||||
### Visualization (viz-platform)
|
||||
- `/chart {type}` - Create charts from loaded data
|
||||
- `/dashboard {template}` - Build dashboard layouts
|
||||
|
||||
### Workflow Pattern
|
||||
1. Load data: `read_csv("data.csv")` → returns `data_ref`
|
||||
2. Create chart: `chart_create(data_ref="data_ref", ...)`
|
||||
3. Add to layout: `layout_add_section(chart_ref="...")`
|
||||
4. Apply theme: `theme_activate("my-theme")`
|
||||
```
|
||||
|
||||
## Agent Configuration
|
||||
|
||||
### Using theme-setup agent
|
||||
|
||||
When user mentions theming or brand colors:
|
||||
```markdown
|
||||
Use the theme-setup agent for:
|
||||
- Creating new themes with brand colors
|
||||
- Configuring typography and spacing
|
||||
- Exporting themes as CSS
|
||||
```
|
||||
|
||||
### Using layout-builder agent
|
||||
|
||||
When user wants dashboard structure:
|
||||
```markdown
|
||||
Use the layout-builder agent for:
|
||||
- Creating dashboard layouts
|
||||
- Adding filter components
|
||||
- Configuring responsive grids
|
||||
```
|
||||
|
||||
### Using component-check agent
|
||||
|
||||
For code review and debugging:
|
||||
```markdown
|
||||
Use the component-check agent for:
|
||||
- Validating DMC component usage
|
||||
- Fixing prop errors
|
||||
- Understanding component APIs
|
||||
```
|
||||
|
||||
## Example Project CLAUDE.md
|
||||
|
||||
```markdown
|
||||
# Project: Sales Dashboard
|
||||
|
||||
## Tech Stack
|
||||
- Backend: FastAPI
|
||||
- Frontend: Dash with Mantine Components
|
||||
- Data: PostgreSQL + pandas
|
||||
|
||||
## Data (data-platform)
|
||||
- Database: PostgreSQL with sales data
|
||||
- Key tables: orders, customers, products
|
||||
|
||||
## Visualization (viz-platform)
|
||||
- Theme: corporate (indigo primary, light mode)
|
||||
- Layout: sidebar with date and category filters
|
||||
- Charts: line (trends), bar (comparisons), pie (breakdown)
|
||||
|
||||
### Component Validation
|
||||
ALWAYS use component-check before rendering:
|
||||
- get_component_props first
|
||||
- validate_component after
|
||||
|
||||
### Dashboard Structure
|
||||
```
|
||||
Sidebar: Navigation links
|
||||
Header: Title + date range filter
|
||||
Main:
|
||||
- Row 1: KPI cards
|
||||
- Row 2: Line chart (sales over time)
|
||||
- Row 3: Bar chart (by category) + Pie chart (by region)
|
||||
```
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### MCP tools not available
|
||||
1. Check venv exists: `ls mcp-servers/viz-platform/.venv/`
|
||||
2. Rebuild if needed: `cd mcp-servers/viz-platform && python -m venv .venv && pip install -r requirements.txt`
|
||||
3. Restart Claude Code session
|
||||
|
||||
### Component validation fails
|
||||
1. Check DMC version matches registry
|
||||
2. Use `list_components()` to see available components
|
||||
3. Verify prop names are camelCase
|
||||
|
||||
### Charts not rendering
|
||||
1. Verify data_ref exists with `list_data()`
|
||||
2. Check column names match data
|
||||
3. Validate theme is active
|
||||
Reference in New Issue
Block a user