basecoat-charts
Basecoat Charts skill for ApexCharts and SVG data visualization.
Skill by zygiu-zygis
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/zygiu-zygis-basecoat-charts
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, data
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md and code. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/basecoat-charts
What's inside
- Skill name
basecoat-charts- Description
- Basecoat Charts skill for ApexCharts and SVG data visualization. Maps colors to CSS tokens (--chart-1..5) with zero React dependencies and 5-framework mounts.
- License
- MIT
- Instructions
- 27 lines in SKILL.md · view on GitHub
Files (10)
- SKILL.md
- area.md
- SKILL.md · audit/
- checklist.md · audit/
- bar.md
- line.md
- pie.md
- radar.md
- radial.md
- tooltip.md
SKILL.md (first lines)
# Basecoat Charts: Master Visualization Protocol
Basecoat Charts provides robust, theme-aware chart blueprints designed to integrate seamlessly with Basecoat CSS and Tailwind CSS v4.
## Core Directives
1. **Theme-Token Color Mapping**: All series colors must bind directly to CSS variables (`var(--chart-1)` through `var(--chart-5)`) or surface tokens (`var(--foreground)`, `var(--muted-foreground)`, `var(--border)`).
2. **Container Sizing & Responsive Footprint**: Chart viewport wrappers must specify the standard responsive layout footprint: `w-full aspect-[4/3] md:aspect-[16/9] lg:aspect-[2/1] min-h-[240px]`. Outer containers specify `chart-container card p-6 flex flex-col gap-4 w-full` with `role="img"` and descriptive `aria-label`.
3. **Glassmorphic Tooltip Markup**: Interactive chart tooltips must feature Basecoat glassmorphic styling: `<div class="rounded-lg border border-border bg-background/95 p-2.5 text-xs shadow-xl backdrop-blur-sm" data-chart-tooltip>...</div>` with indicator dot/line/dashed/badge and numeric value formatting with `tabular-nums`.
4. **Screen-Reader Data Fallback**: Every chart blueprint embeds an accessible table fallback for assistive technology: `<table class="sr-only"><caption>${title}</caption><thead>...</thead><tbody>...</tbody></table>`.
5. **Zero Framework Wrappers**: Do not require heavy framework wrappers like `react-apexcharts`. Initialize charts directly with client-side vanilla ApexCharts mounts across all 5 supported frameworks (`vanilla`, `astro`, `react`, `vue`, `svelte`).
6. **SVG Fallback & Macro Dashboard Binding**: For offline dashboards without third-party dependencies, declarative Basecoat SVG area charts (`svg-area-chart`) and layout blocks like `dashboard-01` bind directly to `data-chart-id="area-interactive"`.
## Chart Categories
| Type | Guide | Best For |
|---|---|---|
| Area | [area.md](./area.md) | Magnitude, cumulative volume, filled trends |
| Bar | [bar.md](./bar.md) | Leaderboards, discrete rank comparison |
| Line | [line.md](./line.md) | Continuous time-series trends |
| Pie / Donut | [pie.md](./pie.md) | Part-to-whole proportions and shares |
| Radar | [radar.md](./radar.md) | Multi-axis assessment and skill matrices |
| Radial | [radial.md](./radial.md) | Progress percentage dials and gauges |
| Tooltip | [tooltip.md](./tooltip.md) | Custom Basecoat popover tooltip styling |
| Audit | [audit/checklist.md](./audit/checklist.md) | Quality inspection and validation gate |From zygiu-zygis/basecoat-ui-mcp, MIT.
More from zygiu-zygis/basecoat-ui-mcp
- 0.652score
basecoat
zygiu-zygis
Master UI/UX protocol and 57-component reference for Basecoat UI (pure Basecoat CSS, headless Tailwind CSS v4, Kanso minimalism, and mandatory FSM data-state…
SkillAFreshness: A★ 38Claude Code +9 - 0.652score
basecoat-dashboard
zygiu-zygis
Master UI/UX architecture and generation protocol for Basecoat UI (headless Tailwind CSS v4, pure Basecoat CSS, Kanso minimalism, and mandatory FSM data-state…
SkillAFreshness: A★ 38Claude Code +9 - 0.651score
Basecoat UI MCP
zygiu-zygis
Offline Basecoat UI MCP: templates, macro layouts, theming contract, and static validation.
ConnectorAFreshness: ALocal★ 38↓ 73/wkClaude Code +5
Signals
- Stars
- 38
- Forks
- 0
- Open issues
- 0
- Contributors
- 1
- Last commit (this folder)
- Oct 14, 2026 (14 days ago)
- Last release
- Oct 14, 2026 (14 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/zygiu-zygis/basecoat-ui-mcp
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from zygiu-zygis
- 0.652score
basecoat
zygiu-zygis
Master UI/UX protocol and 57-component reference for Basecoat UI (pure Basecoat CSS, headless Tailwind CSS v4, Kanso minimalism, and mandatory FSM data-state…
SkillAFreshness: A★ 38Claude Code +9 - 0.652score
basecoat-dashboard
zygiu-zygis
Master UI/UX architecture and generation protocol for Basecoat UI (headless Tailwind CSS v4, pure Basecoat CSS, Kanso minimalism, and mandatory FSM data-state…
SkillAFreshness: A★ 38Claude Code +9 - 0.651score
Basecoat UI MCP
zygiu-zygis
Offline Basecoat UI MCP: templates, macro layouts, theming contract, and static validation.
ConnectorAFreshness: ALocal★ 38↓ 73/wkClaude Code +5
Cite this page
basecoat-charts skill. Agent Mart. https://agentmart.dev/skills/zygiu-zygis-basecoat-charts (last updated 2026-10-24)