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

utilities

Generate and manage Tailwind-style atomic CSS utilities for fpkit/acss React projects.

Updated Apr 21, 2026
Search Tags:#css utilities#token bridge#react typescript#fpkit acss#scss atomic css#wcag friendly
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill utilities-shawn-sandy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: utilities
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/utilities
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill utilities-shawn-sandy

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the friction of manually authoring and maintaining Tailwind-style utility classes for fpkit/acss projects by generating a consistent, token-driven atomic CSS bundle.

Core Features & Use Cases

  • Utility-class generation and management for fpkit/acss, including a full atomic suite plus a token-bridge layer.
  • Read-only catalog inspection of families and the exact classes/selectors emitted.
  • Token tuning and regeneration to adjust spacing/breakpoints/family enablement safely, with validation.
  • Token bridge regeneration to alias fpkit-style token names to the active acss-kit theme in both light and dark modes.

Quick Start

Ask the Skill to add the generated utilities to your React project using your detected target directory by running /utility-add.

Frequently Asked Questions about utilities

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

FAQPage Schema
How do I generate atomic CSS utilities for a React TypeScript project?▼

Generate atomic CSS utilities by running the /utility-add command to copy prebuilt bundles or regenerate them from tokens into your detected target directory. This produces a consistent, token-driven atomic CSS suite for fpkit/acss React projects.

What is a token bridge in atomic CSS and how does it work with light and dark themes?▼

A token bridge aliases fpkit-style token names to the active acss-kit theme. The Skill regenerates these bridge aliases to map tokens correctly against both light and dark mode CSS, ensuring theme parity.

Can I tune spacing and breakpoints in my SCSS atomic CSS setup using natural language?▼

Yes, you can tune spacing and breakpoints in your SCSS atomic CSS setup using natural language. The Skill adjusts family enablement and spacing values safely, then validates the changes using validate_utilities.py.

Does this approach work with Tailwind-style utility classes for fpkit and acss projects?▼

Yes, this approach generates and manages Tailwind-style utility classes specifically for fpkit and acss projects. It enforces idempotent regeneration from utilities.tokens.json to maintain bundle integrity and parity.

How do I list available utility families and the exact CSS selectors they emit?▼

You can list available utility families and their exact CSS selectors through read-only catalog inspection. This allows you to audit the exact classes and selectors emitted by the generated atomic CSS bundle.

Why do my generated utility classes fail validation after updating tokens?▼

Generated utility classes fail validation when bundle integrity or parity requirements are not met. The Skill uses validate_utilities.py to enforce idempotent regeneration from utilities.tokens.json, ensuring consistent outputs.

Related Skills

Explore More Software Engineering Skills→
shawn-sandyshawn-sandy

fpkit-developer

Guide React component development with @fpkit/acss primitives and WCAG compliance.

Community
Intermediate
UiPathUiPath
18

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

Official
Intermediate
shawn-sandyshawn-sandy

setup

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

Community
Advanced
shawn-sandyshawn-sandy

css-to-class

Convert multi-class HTML strings into a single semantic CSS class.

Community
Intermediate