What problem does it solve?
This Skill solves the problem of inconsistent Kiva UI implementation, incorrect design token usage, and misalignment between Figma design specs and production code by centralizing access to all Kiva design system sub-skills in a single entry point. Users no longer need to hunt for the correct token, utility class, or design rule across scattered documentation.
Core Features & Use Cases
- Intelligent sub-skill routing: Automatically directs users to the relevant design system sub-skill (color, typography, spacing, radius, border, elevation, layout, color-themes) based on their task, loading only what is needed to avoid context bloat.
- Design compliance auditing: Provides step-by-step guidance for scanning components for hardcoded values, incorrect token usage, and misaligned utility classes, with specific corrected replacements and notes for known code-spec sync gaps.
- Design token and Figma handoff support: Answers specific token selection questions, maps Figma design tokens to Tailwind utility classes, and provides per-theme token values for accurate design-to-code translation.
- New UI generation guidance: Enforces correct use of semantic Kiva tokens and Tailwind utilities when building new components, preventing bespoke styles and ensuring alignment with the Figma-canonical design system.
Quick Start
Ask the kiva-design-system skill to audit your loan card component for Kiva design compliance and receive a list of any incorrect token or utility class usage with specific corrected replacements.
