skills.rest
roanbrasil
roanbrasilCOMMUNITY
Explore all skills by this author →
Website𝕏@roanbrasilGitHub

design-systems

Builds W3C-compliant design token systems and accessible component libraries with Storybook documentation.

5|1|Updated Jun 17, 2026
Search Tags:#theming#accessibility#frontend#storybook#design-tokens#design-systems#component-library
One-click install
npx skills add https://github.com/roanbrasil/engineer-grade-agent-skills --skill design-systems-roanbrasil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/roanbrasil/engineer-grade-agent-skills/tree/main/skills/design-systems
Command: npx skills add https://github.com/roanbrasil/engineer-grade-agent-skills --skill design-systems-roanbrasil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent user interfaces, duplicated component development work, and accessibility gaps across product teams when building or maintaining shared design system infrastructure.

Core Features & Use Cases

  • Three-tier design token architecture: Implement primitive, semantic, and component-scoped tokens using W3C standard format, with Style Dictionary for cross-platform generation to CSS, JavaScript, and other formats.
  • Production-grade component APIs: Build composable, polymorphic, and compound components with proper controlled/uncontrolled interfaces, className extension points, and full accessibility support.
  • End-to-end design system workflow: Cover theming with CSS custom properties, Storybook documentation, semantic versioning with Changesets, and distribution as a reusable npm package.
  • Use Case: A company with 10+ product teams can use this Skill to build a shared design system that reduces UI development time by 40% and ensures WCAG AA compliance across all customer-facing products.

Quick Start

Use the design-systems skill to create a new accessible Card compound component with Header, Body, and Footer slots, plus corresponding design tokens and Storybook documentation.

Frequently Asked Questions about design-systems

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure design tokens for a cross-platform component library?▼

Structure design tokens using a three-tier architecture of primitive, semantic, and component-scoped tokens in W3C standard format. Style Dictionary then generates these tokens across CSS, JavaScript, and other platform-specific formats to maintain UI consistency.

How do I build an accessible compound component with proper API design?▼

Build accessible compound components by creating composable, polymorphic structures with controlled and uncontrolled interfaces. Include className extension points and full WCAG AA accessibility support to ensure reusable, compliant UI elements across product teams.

What is the best way to theme a design system using CSS custom properties?▼

The best way to theme a design system is using CSS custom properties mapped to semantic design tokens, enabling dynamic theming with system preference support. This approach standardizes visual consistency while allowing runtime theme switching.

Can I use Storybook to document a design system with semantic versioning?▼

Yes, Storybook documents design system components while Changesets manages semantic versioning. This combination ensures tracked, version-controlled releases of your component library alongside interactive UI documentation.

Does this design system workflow support W3C-compliant token generation and distribution?▼

Yes, the workflow generates W3C-compliant design tokens and distributes them as a reusable npm package. Style Dictionary handles cross-platform format generation, while CSS custom properties manage theming infrastructure with system preference support.

Related Skills

Explore More Software Engineering Skills→
AlexHramovichAlexHramovich

agntcms-update-skills

Update the @agntcms/skills npm package while preserving custom skills.

Community
Basic
primeincprimeinc

publish-package-cicd

Automate npm publishing for monorepos with Changesets and OIDC.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced
nilecuinilecui
27

using-shadcn-ui

Integrate shadcn/ui components and shadcnblocks.com blocks into React projects.

Community
Intermediate