zygiu-zygis/basecoat-ui-mcp/basecoat

Claude Code and agent skill by zygiu-zygis/basecoat-ui-mcp

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

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 contracts).

Install

npx vskill@latest install zygiu-zygis/basecoat-ui-mcp/basecoat

SKILL.md

Basecoat UI Master Protocol

Basecoat UI is a lightweight, headless component library built on pure Basecoat CSS and Tailwind CSS v4. It delivers the refined aesthetic of shadcn/ui with ZERO React runtime dependencies, ZERO client-side JavaScript framework bloat, and strict semantic HTML5.

When to Use This Skill

  • Use this skill whenever building, refactoring, or reviewing web interfaces with Basecoat UI.
  • Use this skill for pure HTML, Astro, Next.js, SvelteKit, Vite, or HTMX applications targeting the Basecoat / shadcn design language.
  • Trigger on keywords: basecoat, basecoat-ui, basecoat-css, tailwind v4, kanso, shadcn aesthetic.

Zero-Tolerance Guardrails

  1. Zero DaisyUI Classes: DaisyUI class names (daisyui, card-body, form-control, stat-value, btn-primary, table-pin-rows) are STRICTLY FORBIDDEN. All classes must follow Basecoat CSS (.card, .btn, .input, .select, .dialog, .badge) + Tailwind CSS v4 utilities.
  2. Zero React Runtime in HTML: Markup examples must be pure semantic HTML5. Do NOT include React JSX, React hooks (useState), or client component pragmas ('use client') in Basecoat HTML templates.
  3. Card 1px Ring Contract: The .card class intrinsically provides a 1px ring shadow. Adding border or border-border to .card is FORBIDDEN as it causes double-border rendering.
  4. Mandatory FSM State Contracts: All interactive components must declare explicit Finite State Machine attributes (data-state, data-fsm-recipe, aria-*).
  5. Deterministic Class Ordering: Elements must order utilities: Basecoat Class -> Layout -> Position -> Alignment -> Sizing -> Spacing -> Typography -> Background -> Border/Ring -> Effects -> States.

4-Stage Intent-Driven Tooling Sequence

Before authoring custom markup, execute the 4-stage basecoat-ui-mcp workflow:

  1. Stage 1: Layout Scaffold (`basecoat_page_architect`): Search and retrieve structural scaffolds (e.g. workspace-dashboard, auth-split-flow, workspace-detail, workspace-settings).
  2. Stage 2a: Technical Rules (`basecoat_rules_enforcer`): Retrieve Tailwind v4 constraints, FSM contracts, semantic token pairings, and HTML landmark requirements.
  3. Stage 2b: Creative Direction (`basecoat_creative_director`): Apply typography ladders, optical spacing rhythm (4px/8px), style packs (Vega, Nova, Maia, Lyra, Mira), and Kanso minimalism.
  4. Stage 3: Component Syntax (`basecoat_component_syntax`): Retrieve copy-pasteable component markup pre-configured with FSM state variants.
  5. Stage 4: Quality Inspection (`basecoat_quality_inspector`): Audit markup for accessibility, syntax compliance, and token integrity (target score: 90+).

Master Directives & Guides

TopicDocumentFocus
Design System & Tokensdesign-system.mdOKLCH tokens, color pairings, typography ladder, 4px/8px rhythm
Customization & Style Packscustomization.md@theme inline, single dark mode resolver, Vega/Nova/Maia/Lyra/Mira
Installation & Setupinstall.mdTailwind v4 @import, Astro, Next.js, SvelteKit, Vite, HTMX
MCP Tools Referencemcp.mdComprehensive reference to all 21 MCP tools and resources
Registry Architectureregistry.mdOffline component and macro block schemas and integrity
Styling Rulesrules/styling.mdSemantic tokens, zero raw colors, zero space-x/y, size-* utility
Composition Rulesrules/composition.mdGroup wrappers, semantic primitives, modal headers, spinner icons
Form Controlsrules/forms.mdFieldGroup, Field, InputGroup, ToggleGroup, dual validation
Icon Guidelinesrules/icons.mddata-icon placement, zero sizing classes on icons, aria-hidden

Full 57-Component Index

ComponentDescription & Link
accordionBasecoat accordion component reference, anatomy, FSM states, and anti-patterns.
alertBasecoat alert component reference, anatomy, FSM states, and anti-patterns.
alert-dialogBasecoat alert-dialog component reference, anatomy, FSM states, and anti-patterns.
aspect-ratioBasecoat aspect-ratio component reference, anatomy, FSM states, and anti-patterns.
avatarBasecoat avatar component reference, anatomy, FSM states, and anti-patterns.
badgeBasecoat badge component reference, anatomy, FSM states, and anti-patterns.
breadcrumbBasecoat breadcrumb component reference, anatomy, FSM states, and anti-patterns.
buttonBasecoat button component reference, anatomy, FSM states, and anti-patterns.
button-groupBasecoat button-group component reference, anatomy, FSM states, and anti-patterns.
calendarBasecoat calendar component reference, anatomy, FSM states, and anti-patterns.
cardBasecoat card component reference, anatomy, FSM states, and anti-patterns.
carouselBasecoat carousel component reference, anatomy, FSM states, and anti-patterns.
chartBasecoat chart component reference, anatomy, FSM states, and anti-patterns.
checkboxBasecoat checkbox component reference, anatomy, FSM states, and anti-patterns.
collapsibleBasecoat collapsible component reference, anatomy, FSM states, and anti-patterns.
comboboxBasecoat combobox component reference, anatomy, FSM states, and anti-patterns.
commandBasecoat command component reference, anatomy, FSM states, and anti-patterns.
context-menuBasecoat context-menu component reference, anatomy, FSM states, and anti-patterns.
data-tableBasecoat data-table component reference, anatomy, FSM states, and anti-patterns.
date-pickerBasecoat date-picker component reference, anatomy, FSM states, and anti-patterns.
dialogBasecoat dialog component reference, anatomy, FSM states, and anti-patterns.
drawerBasecoat drawer component reference, anatomy, FSM states, and anti-patterns.
dropdown-menuBasecoat dropdown-menu component reference, anatomy, FSM states, and anti-patterns.
emptyBasecoat empty component reference, anatomy, FSM states, and anti-patterns.
fieldBasecoat field component reference, anatomy, FSM states, and anti-patterns.
formBasecoat form component reference, anatomy, FSM states, and anti-patterns.
hover-cardBasecoat hover-card component reference, anatomy, FSM states, and anti-patterns.
inputBasecoat input component reference, anatomy, FSM states, and anti-patterns.
input-groupBasecoat input-group component reference, anatomy, FSM states, and anti-patterns.
input-otpBasecoat input-otp component reference, anatomy, FSM states, and anti-patterns.
itemBasecoat item component reference, anatomy, FSM states, and anti-patterns.
kbdBasecoat kbd component reference, anatomy, FSM states, and anti-patterns.
labelBasecoat label component reference, anatomy, FSM states, and anti-patterns.
menubarBasecoat menubar component reference, anatomy, FSM states, and anti-patterns.
navigation-menuBasecoat navigation-menu component reference, anatomy, FSM states, and anti-patterns.
paginationBasecoat pagination component reference, anatomy, FSM states, and anti-patterns.
popoverBasecoat popover component reference, anatomy, FSM states, and anti-patterns.
progressBasecoat progress component reference, anatomy, FSM states, and anti-patterns.
radio-groupBasecoat radio-group component reference, anatomy, FSM states, and anti-patterns.
resizableBasecoat resizable component reference, anatomy, FSM states, and anti-patterns.
scroll-areaBasecoat scroll-area component reference, anatomy, FSM states, and anti-patterns.
selectBasecoat select component reference, anatomy, FSM states, and anti-patterns.
separatorBasecoat separator component reference, anatomy, FSM states, and anti-patterns.
sheetBasecoat sheet component reference, anatomy, FSM states, and anti-patterns.
sidebarBasecoat sidebar component reference, anatomy, FSM states, and anti-patterns.
skeletonBasecoat skeleton component reference, anatomy, FSM states, and anti-patterns.
sliderBasecoat slider component reference, anatomy, FSM states, and anti-patterns.
sonnerBasecoat sonner component reference, anatomy, FSM states, and anti-patterns.
spinnerBasecoat spinner component reference, anatomy, FSM states, and anti-patterns.
switchBasecoat switch component reference, anatomy, FSM states, and anti-patterns.
tableBasecoat table component reference, anatomy, FSM states, and anti-patterns.
tabsBasecoat tabs component reference, anatomy, FSM states, and anti-patterns.
textareaBasecoat textarea component reference, anatomy, FSM states, and anti-patterns.
toastBasecoat toast component reference, anatomy, FSM states, and anti-patterns.
toggleBasecoat toggle component reference, anatomy, FSM states, and anti-patterns.
toggle-groupBasecoat toggle-group component reference, anatomy, FSM states, and anti-patterns.
tooltipBasecoat tooltip component reference, anatomy, FSM states, and anti-patterns.

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
46
7-day trend score
0

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/zygiu-zygis/basecoat-ui-mcp/basecoat/badge)](https://verified-skill.com/skills/zygiu-zygis/basecoat-ui-mcp/basecoat)

Something wrong with this skill or its page? Tell us.