Will this skill overwrite my existing design files?

No, the skill is idempotent. It checks for the existence of design_guidelines.md and will skip creation if the file already exists to protect your manual changes.

Does it support accessibility compliance?

Yes, it specifically generates documentation that references and enforces WCAG 2.1 Level AA accessibility standards for your frontend project.

How does it identify my project's design tokens?

The skill analyzes your project context, including CSS variables, Tailwind configs, and component library themes (like Material-UI or Ant Design) to extract colors and typography.

When is the Frontend Documentation Creator invoked?

It is triggered conditionally by the project coordinator whenever a frontend framework (React, Vue, Angular, or Svelte) is detected in the project root.

Frontend Design Guidelines Creator

Name: Frontend Design Guidelines Creator
Author: levnikolaevich

bylevnikolaevich

•

Design Tools

Automates the creation of comprehensive design guidelines and accessibility documentation for frontend projects.

About

The Frontend Design Guidelines Creator is a specialized L3 worker designed to standardize UI/UX documentation within the Claude Code ecosystem. It automatically generates a detailed design_guidelines.md file whenever a frontend framework such as React, Vue, Angular, or Svelte is detected. This skill ensures that design systems, typography, and color palettes are accurately documented while enforcing WCAG 2.1 Level AA accessibility compliance. By extracting design tokens from CSS variables, Tailwind configurations, or theme files, it provides developers with a consistent and accessible reference for maintaining visual integrity.

Key Features

Extracts design tokens from CSS variables and theme configurations
12 GitHub stars
Automatic detection of major frontend frameworks (React, Vue, Angular, Svelte)
Generates comprehensive typography and color palette references
Ensures WCAG 2.1 Level AA accessibility compliance documentation
Idempotent execution to prevent overwriting existing documentation

Use Cases

Ensuring accessibility standards are documented and met for web applications
Standardizing UI/UX documentation for new or inherited frontend repositories
Creating a single source of truth for design tokens across development teams

About

Key Features

Extracts design tokens from CSS variables and theme configurations
12 GitHub stars
Automatic detection of major frontend frameworks (React, Vue, Angular, Svelte)
Generates comprehensive typography and color palette references
Ensures WCAG 2.1 Level AA accessibility compliance documentation
Idempotent execution to prevent overwriting existing documentation

Use Cases

Ensuring accessibility standards are documented and met for web applications
Standardizing UI/UX documentation for new or inherited frontend repositories
Creating a single source of truth for design tokens across development teams