skills.rest
GGPrompts
GGPromptsCOMMUNITY
Explore all skills by this author →
GitHub

styleguide

Automates creation of a complete CSS design system style guide.

32|6|Updated Feb 1, 2026
Search Tags:#design-system#responsive-design#style-guide#google-fonts#css-variables#semantic-html
One-click install
npx skills add https://github.com/GGPrompts/htmlstyleguides --skill styleguide-ggprompts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styleguide
Source: https://github.com/GGPrompts/htmlstyleguides/tree/main/.claude/skills/styleguide
Command: npx skills add https://github.com/GGPrompts/htmlstyleguides --skill styleguide-ggprompts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly produce a complete, self-contained CSS design system style guide as a single HTML file with inline CSS, CSS variables in :root, and Google Fonts, ensuring design consistency.

Core Features & Use Cases

  • Self-contained HTML style guide with inline CSS and CSS variables in :root for easy reuse.
  • Phase-driven workflow (Plan, Research, Build, Index & Ship) aligned to CLAUDE.md conventions, outputting style guides to styles/{kebab-case-name}.html and updating the Style Guide Catalog.
  • Designed for designers and developers to prototype and ship cohesive design systems across products.

Quick Start

Generate a new style guide by selecting an aesthetic and following the CLAUDE.md template to produce styles/{kebab-case-name}.html.

Frequently Asked Questions about styleguide

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

FAQPage Schema
How do I create a complete CSS design system style guide?▼

To create a CSS design system style guide, you select an aesthetic and follow the CLAUDE.md template to generate a self-contained HTML file with inline CSS, :root variables, and Google Fonts, ensuring consistent UI across projects.

What is included in a self-contained HTML style guide?▼

A self-contained HTML style guide includes inline CSS, :root variables for easy reuse, Google Fonts integration, responsive design rules, and semantic HTML, typically producing a final file between 450 and 2000 lines.

Does generating a style guide require a specific file structure?▼

Yes, generating a style guide requires the CLAUDE.md template in the styles/ directory and 1-2 reference guides for structure, outputting the final file to styles/{kebab-case-name}.html and updating the Style Guide Catalog.

How do I ensure design consistency across multiple front-end projects?▼

You ensure design consistency across front-end projects by automating the creation of a complete CSS design system style guide with standardized :root variables and responsive design rules applied uniformly.

What is the workflow for building a responsive design style guide?▼

The workflow for building a responsive design style guide follows a phase-driven process: Plan, Research, Build, Index, and Ship, aligning with CLAUDE.md conventions to produce and catalog the final HTML file.

Can I use semantic HTML and CSS variables in an automated style guide?▼

Yes, the automated style guide outputs semantic HTML and CSS variables in the :root block, allowing designers and developers to easily reuse and maintain the design system components.

Related Skills

Explore More Design & Creative Skills→
cathrynlaverycathrynlavery
3.7k

diagram-design

Create standalone HTML diagrams with inline SVG and CSS.

Community
Advanced
kurojskurojs
2

tailwind-4

Enforce Tailwind CSS 4 styling rules for class names and colors.

Community
Intermediate
GGPromptsGGPrompts
32

techguide

Generate self-contained HTML tech guides with 1500-4000+ lines and sticky navigation.

Community
Advanced
rakibulismrakibulism
2

web-artifacts-builder

Initialize React, TypeScript, Tailwind CSS, and shadcn/ui projects and bundle them into single-file HTML artifacts.

Community
Advanced