design-system-componentsPatterns for building design system components using Surface primitives, CVA variants, and consistent styling. Use when building reusable UI components that follow design token architecture. Triggers on Surface component, CVA, class-variance-authority, component variants, design tokens.
Install via ClawdBot CLI:
clawdbot install wpank/design-system-componentsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/design-systems/design-system-componAudited Apr 16, 2026 · audit v1.0
Generated Mar 22, 2026
Develop a dashboard for a SaaS platform requiring consistent, reusable UI components like cards, metrics, and buttons. Use Surface primitives for layered panels and CVA for variant-based styling to ensure design token adherence across different sections.
Design an interface for financial analytics with metric displays, interactive tiles, and status badges. Leverage CVA variants for buttons and badges to handle different states like success or warning, ensuring type-safe APIs for data visualization components.
Construct a comprehensive design system library for a tech company, using Surface primitives for consistent surfaces and CVA for scalable component variants. This enables teams to build reusable UI elements with design tokens, improving development efficiency.
Create product pages for an e-commerce site with interactive cards, buttons, and badges for product variants. Use CVA for button styles like cyber or outline and Surface for layered components to enhance user engagement and visual consistency.
Develop a dashboard for healthcare monitoring with metric displays for patient data, interactive panels, and status chips. Utilize CVA variants for trend indicators and Surface primitives for glass or deep layers to ensure clarity and accessibility.
Offer this skill as part of a SaaS platform targeting businesses needing design system components. Revenue is generated through monthly or annual subscriptions, with tiered pricing based on usage or advanced features like custom variants.
Release the skill as open source with basic components free to use, while monetizing premium features like advanced variants, support, or enterprise integrations. Revenue comes from paid upgrades, consulting, or sponsorship.
Provide design and development services using this skill to build custom UI components for clients. Revenue is generated through project-based fees or retainer models, focusing on industries like finance or e-commerce.
💬 Integration Tip
Integrate by installing CVA and Surface primitives, then customize design tokens in a central configuration file to maintain consistency across projects.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Build design systems with tokens, components, and documentation that scale across teams and products.