skills.rest
windyroad
windyroadOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wr-style-guide:update-guide

Inspect project CSS architecture, design tokens, and component patterns to generate STYLE-GUIDE.md.

4|1|Updated Apr 7, 2026
Search Tags:#documentation#css#tokens#design-system#style-guide#component-patterns
One-click install
npx skills add https://github.com/windyroad/agent-plugins --skill wr-style-guide-update-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wr-style-guide:update-guide
Source: https://github.com/windyroad/agent-plugins/tree/main/packages/style-guide/skills/update-guide
Command: npx skills add https://github.com/windyroad/agent-plugins --skill wr-style-guide-update-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The style guide helps teams maintain consistent CSS architecture, tokens, and UI patterns by generating and updating a centralized STYLE-GUIDE document.

Core Features & Use Cases

  • Discover and document the project's CSS architecture, including selectors, tokens, and theming approaches.
  • Capture component patterns, layout conventions, and naming strategies to standardize UI implementation.
  • Use cases include onboarding new contributors, refactoring with consistency, and auditing style compliance.

Quick Start

Update or create docs/STYLE-GUIDE.md by analyzing the project's CSS architecture, tokens, and component patterns, then prompt the user for style preferences.

Frequently Asked Questions about wr-style-guide:update-guide

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

FAQPage Schema
How do I generate a style guide for an existing CSS architecture?▼

Generate a style guide by inspecting your project files to identify CSS architecture, design tokens, and component patterns, then compiling the findings into a maintainable STYLE-GUIDE.md document with usage guidelines and a last reviewed date.

What is the best way to document design tokens and component patterns?▼

Document design tokens and component patterns by centralizing them in a STYLE-GUIDE.md file, capturing selectors, theming approaches, and layout conventions to standardize UI implementation for buttons, forms, and cards.

Can I use this to document CSS for frontend projects with existing UI components?▼

Yes, this is designed specifically for frontend projects with existing CSS systems, tokens, and UI components. It analyzes your current architecture to provide guidance on buttons, forms, cards, typography, and layout.

How do I update a style guide to reflect new CSS architecture changes?▼

Update a style guide by re-inspecting project files for CSS architecture, tokens, and component patterns, then applying the changes to docs/STYLE-GUIDE.md while prompting for style preferences to maintain consistency.

Why do I need a centralized style guide for my design system?▼

A centralized style guide helps teams maintain consistent CSS architecture, tokens, and UI patterns. It solves onboarding new contributors, refactoring with consistency, and auditing style compliance across the project.

Related Skills

Explore More Design & Creative Skills→
umairinayatumairinayat
5

tailwind-patterns

Standardize Tailwind CSS v4 CSS-first configuration with design tokens and container queries.

Community
Advanced
aharstad91aharstad91
1

bimverdi-design

Generate frontend UI components and pages for bimverdi.no using the BIM Verdi design system.

Community
Intermediate
paperclipaipaperclipai
76.0k

design-guide

Guide frontend UI component creation within the Paperclip ecosystem.

Official
Intermediate
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced