skills.rest
GenEducation
GenEducationOFFICIAL
Explore all skills by this author →
GitHub

wds-7-design-system

Manage design system components and tokens through guided creation and editing workflows.

Updated Mar 30, 2026
Search Tags:#workflow#components#catalog#figma#design-system#design-tokens
One-click install
npx skills add https://github.com/GenEducation/GenedUIProject --skill wds-7-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wds-7-design-system
Source: https://github.com/GenEducation/GenedUIProject/tree/main/.gemini/skills/wds-7-design-system
Command: npx skills add https://github.com/GenEducation/GenedUIProject --skill wds-7-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams organize, create, browse, and maintain reusable design system components and tokens without losing consistency as the system grows.

Core Features & Use Cases

  • Create and Extend Components: Add new components, update existing ones, or add variants while keeping shared styling and behavior aligned.
  • Explore and Review: Browse tokens, component relationships, and usage patterns through generated localhost views for easier design system discovery.
  • Figma and Library Workflows: Support custom design systems and component-library-based systems with documentation, references, and visual editing paths.
  • Use Case: A designer can review an existing button family, decide whether a new button should be a variant or a separate component, and then update the catalog and usage tracking accordingly.

Quick Start

Ask the Skill to inspect the design system and help you create, browse, or update components based on the current repository structure.

Frequently Asked Questions about wds-7-design-system

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

FAQPage Schema
How do I maintain design system components without losing consistency as the system grows?▼

To maintain design system components, you can use guided workflows to apply validation, duplicate detection, and usage tracking. This keeps shared styling and behavior aligned across your component catalog as you add or update variants.

How do I browse design tokens and component relationships in a repository?▼

You can browse design tokens and component relationships by generating localhost views for design system discovery. These views map usage patterns and references, making it easier to review component families and token hierarchies within your repository.

Can I use this workflow to manage a Figma component library?▼

Yes, the workflow supports both custom design systems and Figma component-library-based systems. It manages references and documentation to help you coordinate updates and maintain visual editing paths for your library components.

How do I decide whether to add a new component or a variant to an existing design system?▼

To decide between a new component or a variant, inspect the existing component family and review its usage patterns. The workflow helps you evaluate shared styling and behavior, then updates the catalog and usage tracking based on your decision.

Do I need structured markdown files to set up the design system catalog?▼

Yes, you need structured markdown skill entry points, workflow files, templates, and supporting design-system documentation. These structured files are required to coordinate validation, duplicate detection, and catalog generation for your system.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-scout

Map legacy project folders, languages, frameworks, dependencies, and entry points.

Community
Intermediate
fcastrillofcastrillo

rai-discover-document

Generate architecture documentation from validated discovery data and governance artifacts.

Community
Advanced
bRRRITSCOLDbRRRITSCOLD
2

react-component-library

Generate a React component library from design tokens and Figma designs.

Community
Advanced
solitasrohsolitasroh
2

phase-5-design-system

Standardizes UI design tokens and components across Web, iOS, Android, and Flutter projects.

Community
Advanced