skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

styles

Generate and update fpkit/acss CSS theme files with OKLCH color roles.

Updated Apr 21, 2026
Search Tags:#accessibility#react#css#theme generation#oklch#wcag 2.2 aa
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill styles-shawn-sandy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/styles
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill styles-shawn-sandy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill generates and updates OKLCH-based CSS theme files for fpkit/acss projects, ensuring semantic color roles meet WCAG 2.2 AA contrast expectations while keeping theme files easy to edit and round-trip safely.

Core Features & Use Cases

  • Create full theme palettes from a seed color: Generate light and/or dark light.css and dark.css with role-based --color-* custom properties and fallbacks.
  • Scaffold brand presets: Produce brand-<name>.css files from either a provided seed color or a template the developer can customize.
  • Update and tune individual theme roles: Edit specific --color-<role> values and re-validate contrast pairings immediately.
  • Extract colors from images or Figma: Derive seed colors from an image/figma flow and generate usable theme CSS from the extraction results.
  • Optional integration verification: After writing theme CSS, confirm the consumer project actually imports the generated theme via an integration verifier.

Quick Start

Use the styles skill to create a new theme by running a theme command such as: /theme-create #4f46e5 --mode=both

Frequently Asked Questions about styles

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

FAQPage Schema
How do I generate an accessible CSS theme from a single seed color?▼

You can generate an accessible CSS theme from a seed color by deriving semantic --color-* custom properties and fallbacks. The styles skill creates light.css and dark.css files using an OKLCH palette that enforces WCAG 2.2 AA contrast expectations.

Can I update individual color roles in an existing CSS theme without breaking contrast?▼

Yes, you can update individual color roles in an existing CSS theme without breaking contrast. The skill edits specific --color-<role> values and immediately re-validates contrast pairings to ensure WCAG 2.2 AA compliance is maintained.

Does this tool work with React and standard CSS custom properties?▼

Yes, the tool works with React and standard CSS custom properties. It generates fpkit/acss CSS theme files using semantic --color-* roles derived from an OKLCH palette seed, ensuring the output integrates smoothly with React component styling.

What is the best way to extract and apply brand colors from a Figma file into a CSS theme?▼

The best way to extract and apply brand colors from a Figma file is to derive seed colors from the image or Figma flow. The skill then generates usable theme CSS files and can scaffold brand-<name>.css presets from the extraction results.

Can I preview CSS theme file edits before they are written to my project?▼

Yes, you can preview CSS theme file edits before they are written by using plan-mode. This mode previews the proposed file edits, performs per-flow validation, and runs an integration verifier to confirm your project imports the generated theme.

Why use OKLCH for CSS theme generation instead of standard hex or RGB values?▼

OKLCH is used for CSS theme generation because it provides perceptually uniform color spaces, making it easier to derive semantic --color-* roles that reliably meet WCAG 2.2 AA contrast expectations across both light and dark modes.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

color-scale

Generate 11-step OKLCH color scales from a base hex color.

Community
Basic
dembrandtdembrandt
33

color-mode-and-theme

Choose light, dark, or combined color mode and theme strategies for product interfaces.

Official
Intermediate
shawn-sandyshawn-sandy

setup

Bootstrap an acss-kit React project by generating configuration, theme files, and CSS/SCSS imports.

Community
Advanced
awieczorkawieczork

rstudio-theming

Generate RStudio dark themes from a primary hex color with OKLCH palettes and WCAG 2.1 AA contrast auditing.

Community
Advanced