What is the difference between Mode A and Mode B?

Mode A provides lightweight custom property overrides for theming, while Mode B creates a full design branch with atomic CSS files for specific blocks like heroes, features, and footers.

Does this skill handle web accessibility standards?

Yes, it automatically enforces WCAG AA contrast ratios for all text and UI elements, performing relative luminance calculations and adjusting colors where necessary to ensure compliance.

Can I use this to theme an existing website?

Absolutely. Mode A generates a single CSS override sheet using :root custom properties designed to theme existing sites or templates without altering the underlying HTML structure.

How does it manage Google Fonts?

The skill automatically generates @import rules for required Google Fonts and ensures they are placed at the very top of the CSS file to prevent browser loading issues.

Brand CSS Generator

Name: Brand CSS Generator
Author: paolomoz

bypaolomoz

•

デザインツール

Generates production-ready, WCAG AA-compliant CSS and design systems from brand profiles.

The Brand CSS Generator bridges the gap between brand identity and implementable code by transforming brand profiles into structured CSS. It offers two specialized modes: a lightweight approach for custom property overrides and an enterprise-grade 'Design Branch' mode that generates atomic, responsive CSS files. The skill prioritizes accessibility by automatically enforcing WCAG AA contrast ratios and applies a rigorous design critique pass to ensure professional hierarchy, spacing, and visual consistency across digital products.

主な機能

01Produces atomic design branches with modular CSS files for individual components

02Includes a design critique pass to optimize CTA hierarchy and whitespace

03Creates responsive CSS custom properties for typography, spacing, and layout

04Applies mandatory safety sanitization to prevent common layout and rendering issues

052 GitHub stars

06Generates WCAG AA-compliant color schemes with automatic contrast enforcement

ユースケース

01Generating a production-ready design system from a brand profile

02Theming an existing website or template with a new brand identity

03Creating accessible CSS tokens for enterprise-scale design-to-code pipelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills brand-css-generator

For use in Claude.ai and ChatGPT

主な機能

01Produces atomic design branches with modular CSS files for individual components

02Includes a design critique pass to optimize CTA hierarchy and whitespace

03Creates responsive CSS custom properties for typography, spacing, and layout

04Applies mandatory safety sanitization to prevent common layout and rendering issues

052 GitHub stars

06Generates WCAG AA-compliant color schemes with automatic contrast enforcement

ユースケース

01Generating a production-ready design system from a brand profile

02Theming an existing website or template with a new brand identity

03Creating accessible CSS tokens for enterprise-scale design-to-code pipelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paolomoz/skills brand-css-generator

For use in Claude.ai and ChatGPT