gsp-design-system

Audit codebase design systems and generate markdown reports.

49|4|Updated Feb 20, 2026
One-click install
npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsp-design-system
Source: https://github.com/jubscodes/get-shit-pretty/tree/main/gsp/skills/gsp-design-system
Command: npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many projects lack a clear, up‑to‑date inventory of their design system, making it hard for teams to understand existing components, tokens, and conventions. This Skill automatically scans the workspace and produces comprehensive documentation, keeping the design system visible and maintainable.

Core Features & Use Cases

  • Tech stack detection: Identifies package managers, framework configurations, and styling approaches.
  • Component inventory: Lists up to 30 components with names, paths, and usage patterns.
  • Token and theming extraction: Gathers Tailwind extensions, CSS variables, and theme files.
  • Design conventions summary: Captures naming, export, and file‑organization patterns.
  • Design concerns report: Highlights accessibility gaps, token coverage issues, and other debt.

Quick Start

Run the /gsp-design-system command at the root of your project to generate a full design system audit.

Frequently Asked Questions about gsp-design-system

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

FAQPage Schema
How do I audit and document my existing design system?

To audit a design system, run the command at your project root to scan the workspace. It identifies tech stack, components, tokens, and conventions, then generates comprehensive markdown documentation reports.

How do I extract design tokens and theming configurations from my codebase?

Extract design tokens by scanning your codebase for Tailwind extensions, CSS variables, and theme files. The scan gathers these configurations to produce a comprehensive inventory of your theming setup.

Can I generate a component inventory for a large project?

Yes, you can generate a component inventory for a large project. The scan lists up to 30 components, capturing their names, file paths, and usage patterns to keep your system maintainable.

Does the design system audit detect specific frameworks and styling approaches?

Yes, the design system audit detects frameworks and styling approaches. It identifies package managers, framework configurations, and styling methods used in your workspace automatically.

How do I identify design debt and accessibility gaps in my components?

Identify design debt and accessibility gaps by generating a design concerns report. The scan highlights token coverage issues, accessibility gaps, and other debt within your components.

Do I need read access to project files to document design conventions?

Yes, you need read access to project files to document design conventions. The audit utilizes Bash, Glob, and Grep to scan your workspace and capture naming, export, and file-organization patterns.