How this skill is triggered — by the user, by Claude, or both
Slash command
/kiva-design-system:kiva-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
---
@kiva/kv-tokens utilities).
Trigger phrases: "design system", "kiva token", "tw- class", "which token",
"audit", "design compliance", "Figma handoff", "color theme", "type style",
"spacing token", "border radius", "layout grid", "breakpoint".This file is the entry point and router for the Kiva design system knowledge base. It does not contain token values itself — those live in the sub-skills below, sourced directly from the Figma Kiva Ecosystem 2026 file. Each sub-skill is Figma-canonical: the values, token names, and utility classes recorded there reflect design intent, and the shipped code in @kiva/kv-tokens may temporarily lag those specs while the token sync is in progress.
Always read the relevant sub-skill before advising on or generating design-system code. Do not rely on memory for token names, class names, or hex values — load the sub-skill and quote from it.
Load only the sub-skill(s) relevant to the current task. Do not load all six unless the task genuinely spans all categories.
| Sub-skill | File | What it covers |
|---|---|---|
| color | color.md | Primitive palettes, the five themes (Default, Green Light, Green Dark, Marigold, Stone Light), the role/slot/state token grammar, accessibility levels per pairing, and decision rules for picking a token by purpose. |
| color-themes | color-themes.md | Full per-theme token tables (name → hex → primitive source → description) for every text, background, border, underline, and shadow slot. Load alongside color when you need canonical token data for a specific theme. |
| typography | typography.md | Type scale (Display → Caption), heading hierarchy, font families (Dovetail MVB / Kiva Post Grotesk), pairing rules, and Tailwind utility class mappings (tw-text-*). |
| layout | layout.md | Breakpoint tiers (XS/SM/MD/LG/XL), column/gutter/margin specs, content max-width rules, nested grids, and rules for aligning content on the grid. |
| spacing | spacing.md | Semantic spacing categories (Structure, Component Gap, Component Inset, Micro), the 4px-grain ramp, responsive per-tier values, and the "between vs. inside" decision for picking a token. |
| radius | radius.md | Border-radius token scale (none → full), per-component use cases, the inner = outer − gap concentric formula, and the tw-rounded = 16px gotcha. |
| Task | Load these sub-skills |
|---|---|
| Audit component for design compliance | color + typography + spacing + radius (the four most commonly violated) |
| Audit layout / responsive breakpoints | layout |
| Generate a new component | Load the sub-skills that match the component's visual categories (color + typography is almost always needed; add spacing, radius, layout as the component requires) |
| Answer a token question about color | color (+ color-themes if a specific theme's values are needed) |
| Answer a token question about type | typography |
| Answer a token question about space | spacing |
| Answer a token question about corners | radius |
| Answer a question about the grid / breakpoints | layout |
| Figma-to-code handoff involving color | color + color-themes |
| Figma-to-code handoff involving a full component | All sub-skills that the component's design touches |
Goal: Identify violations — hardcoded values, wrong tokens, missing classes — and recommend the correct replacement.
Steps:
px sizes, or font-* properties instead of token-backed utilities.text-lg, font-bold without the tw- prefix).text/secondary for an interactive link instead of text/action).px instead of tw-rounded-* utilities.eco-green/3) used directly in a component instead of the semantic layer.Goal: Produce HTML/Vue/Tailwind code that uses the correct Kiva tokens and utility classes from the first line.
Steps:
tw-text-* utilities (e.g. tw-text-headline, tw-text-body); never set font-family, font-size, font-weight, line-height, or letter-spacing by hand.tw-bg-* / tw-text-* / tw-border-* utilities backed by @kiva/kv-tokens; never use a hex value or a primitive token name in a component.tw-rounded-* utilities — reach for the radius sub-skill to match the component family to the correct token.Goal: Give a specific, correct answer about which token to use and why — no guessing from memory.
Steps:
Goal: Map Figma token names and theme values to the @kiva/kv-tokens Tailwind utilities a developer will actually write.
Steps:
text/action)tw-text-action)tw-text-* utility.text/action). Primitives (e.g. eco-green/3) are only for defining semantics — never in component code.style attributes or custom CSS to set color, typography, spacing, or radius values. Always use the token-backed utility class. If no class fits, that is a signal for the design system team.base (radius). In code: default → generates tw-rounded. Both refer to the same token. When bridging surfaces, use the name native to each surface.@kiva/kv-tokens/configs/tailwind.config.js or the dist output before depending on a class name in production code.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub kiva/kv-ui-elements --plugin kiva-design-system