skills.rest
vinhnxv
vinhnxvCOMMUNITY
Explore all skills by this author →
𝕏@vinhnxvGitHub

design-system-discovery

Detect frontend libraries, token formats, and variant frameworks to generate design-system-profile.yaml.

6|3|Updated Feb 11, 2026
Search Tags:#tokens#design-system#workflow-integration#frontend-detection#library-discovery
One-click install
npx skills add https://github.com/vinhnxv/rune --skill design-system-discovery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-discovery
Source: https://github.com/vinhnxv/rune/tree/main/plugins/rune/skills/design-system-discovery
Command: npx skills add https://github.com/vinhnxv/rune --skill design-system-discovery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-system discovery automates the detection of libraries, tokens, and variant frameworks within a repository to standardize UI governance and tooling.

Core Features & Use Cases

  • Detects primary design library (e.g., untitled_ui, shadcn_ui) and token system (Tailwind v4, Style Dictionary) from repo signals.
  • Generates a design-system-profile.yaml representing the project's frontend stack for downstream workflows.
  • Enables informed adapter selection and UI builder planning across Claude Code workflows.

Quick Start

Run the design-system-discovery skill to emit a session-scoped design-system-profile.yaml.

Frequently Asked Questions about design-system-discovery

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

FAQPage Schema
How do I detect a repository's design system and frontend library?▼

You can detect design-system signals by running the discovery skill to analyze repository files. It identifies the primary frontend library and token system, generating a structured design-system-profile.yaml representing your project's frontend stack.

What is a design-system-profile.yaml used for in frontend workflows?▼

A design-system-profile.yaml standardizes UI governance by representing a project's detected frontend stack. It enables informed adapter selection and UI builder planning across downstream Claude Code workflows like devise, strive, and arc.

How do I generate a design system profile for token formats like Style Dictionary?▼

To generate a design system profile, run the discovery skill to scan repository signals for token formats like Style Dictionary or Tailwind v4. It outputs a session-scoped design-system-profile.yaml and returns a profile object to the caller.

Can I use design system detection across different Claude Code workflows?▼

Yes, design system detection applies across Claude Code workflows such as devise, strive, and arc. It determines the primary frontend library, token format, and variant framework, returning a profile object for downstream workflow integration.

Does design system discovery work with shadcn_ui and Tailwind v4 tokens?▼

Yes, design system discovery detects primary design libraries like shadcn_ui and token systems like Tailwind v4 by analyzing repository signals. It uses these signals to generate a structured profile representing your project's frontend stack.

Related Skills

Explore More Software Engineering Skills→
Nero-kkNero-kk

wiki-setup

Initialize an Obsidian vault with directories, configuration files, and sanity checks.

Community
Intermediate
senpapi69senpapi69

i-extract

Identify and consolidate reusable UI patterns, components, and design tokens into a centralized design system.

Community
Advanced
vzcovzco
15

probe-bridge

Automate ARC Probe GUI memory inspection via the Claude Bridge HTTP API.

Official
Advanced
gaiastudio-aigaiastudio-ai
2

deprecated-gaia-test-framework

Automates test framework setup and generates configuration files and directory structures based on the detected project stack.

Official
Advanced