From acss-utilities
Generate, list, tune, and bridge Tailwind-style atomic CSS utility classes for fpkit/acss projects. Uses kebab-case class names with hyphen-prefixed responsive variants (`sm-hide`, `md-p-6`, `lg-flex-row`). Pairs with acss-kit via a token-bridge that aliases acss-kit's OKLCH role names to fpkit-style names in both light and dark modes. Use when the developer wants to add utility classes to their project, list which utilities are available, adjust the spacing baseline or breakpoints, or regenerate the bridge after a theme change.
npx claudepluginhub shawn-sandy/agentic-acss-plugins --plugin acss-utilitiesThis skill is limited to using the following tools:
Atomic-CSS utility-class generation and management for **fpkit/acss** projects. Routes between four flows depending on which slash command was invoked. Bundles a single `utilities.css` (full atomic suite) and a `token-bridge.css` (acss-kit ↔ fpkit alias layer).
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Atomic-CSS utility-class generation and management for fpkit/acss projects. Routes between four flows depending on which slash command was invoked. Bundles a single utilities.css (full atomic suite) and a token-bridge.css (acss-kit ↔ fpkit alias layer).
Naming and class catalogue: see references/utility-catalogue.md and references/naming-convention.md.
Breakpoints and responsive syntax: see references/breakpoints.md.
Token bridge mapping: see references/token-bridge.md.
The plugin's atomic suite is generated from assets/utilities.tokens.json. Edits to that file (manual or via /utility-tune) should be followed by python3 ${CLAUDE_PLUGIN_ROOT}/scripts/generate_utilities.py --tokens ${CLAUDE_PLUGIN_ROOT}/assets/utilities.tokens.json --out-dir ${CLAUDE_PLUGIN_ROOT}/assets/ to regenerate the committed bundle.
The committed assets/utilities.css and assets/utilities/<family>.css partials are the canonical artifacts — tests/run.sh enforces idempotency by regenerating and diffing.
/utility-add [--target=<dir>] [--families=<list>] [--no-bridge]Purpose: Copy utilities.css (and token-bridge.css unless --no-bridge) into the user's React project.
${CLAUDE_PLUGIN_ROOT}/scripts/detect_utility_target.py. Capture JSON.
source: "configured" or "default" → use utilitiesDir from result.source: "none" (exit 1) → halt with the reasons array; suggest --target=<dir>.--target=<dir> was passed, override the detected utilitiesDir.--families=<list> was passed:
assets/utilities/.FAMILY_ORDER in generate_utilities.py) plus the bundle header.<target>/utilities.css.${CLAUDE_PLUGIN_ROOT}/assets/utilities.css verbatim to <target>/utilities.css.--no-bridge, copy ${CLAUDE_PLUGIN_ROOT}/assets/token-bridge.css to <target>/token-bridge.css.import "./styles/token-bridge.css"; // first
import "./styles/utilities.css"; // then
references/utility-catalogue.md — full family list, every class, every CSS custom property referenced.references/token-bridge.md — required when --no-bridge is not set, so the assistant can explain the bridge's role./utility-list [family]Purpose: Read-only catalogue printer. No side effects.
/utility-list (no arguments)assets/utilities.tokens.json from ${CLAUDE_PLUGIN_ROOT}/.families with its enabled and responsive status./utility-list <family> for class-level detail./utility-list <family>${CLAUDE_PLUGIN_ROOT}/assets/utilities/<family>.css.var() chain — e.g. .bg-error → var(--color-error, transparent) → resolved via token-bridge.css to var(--color-danger, #dc2626).references/utility-catalogue.md/utility-tune <natural-language>Purpose: Adjust the spacing baseline, breakpoints, or family-enable map via natural language. Edits assets/utilities.tokens.json, regenerates the bundle, runs the validator.
| Phrase | Effect on tokens.json |
|---|---|
| "use a 4px spacing baseline" | spacing.baseline = "0.25rem" |
| "use an 8px spacing baseline" | spacing.baseline = "0.5rem" |
| "add an xs breakpoint at 20rem" | breakpoints.xs = "20rem" (validator extends --prefixes) |
| "disable shadow utilities" | families.shadow.enabled = false |
| "drop responsive variants from spacing" | families.spacing.responsive = false |
| "add a 'soft' radius value at 1rem" | radius.soft = "1rem" |
utilities.tokens.json. If the intent is ambiguous, ask one clarifying question via AskUserQuestion before making edits.${CLAUDE_PLUGIN_ROOT}/assets/utilities.tokens.json. Apply the edits in memory.python3 ${CLAUDE_PLUGIN_ROOT}/scripts/generate_utilities.py --tokens ${CLAUDE_PLUGIN_ROOT}/assets/utilities.tokens.json --out-dir ${CLAUDE_PLUGIN_ROOT}/assets/.python3 ${CLAUDE_PLUGIN_ROOT}/scripts/validate_utilities.py ${CLAUDE_PLUGIN_ROOT}/assets/.
ok: false, print the reasons array and revert the tokens.json edit. The committed bundle should never go out of contract.references/utility-catalogue.md, references/breakpoints.md, references/naming-convention.md/utility-bridge [--theme=<file>]Purpose: Regenerate token-bridge.css aliases against the user's active acss-kit theme. Always emits both :root and [data-theme="dark"] blocks.
--theme=<file> was passed, use that as the source theme. Otherwise look in priority order:
<projectRoot>/src/styles/theme/light.css and dark.css<projectRoot>/src/styles/theme/*.css${CLAUDE_PLUGIN_ROOT}/assets/token-bridge.css defaults and warn the user.--color-danger, --color-primary, --color-success, etc. values for both light and dark modes.--color-error: var(--color-danger, <resolved-hex>), --color-error-bg: color-mix(in oklch, var(--color-danger, <hex>) 12%, var(--color-background, <bg-hex>)), and so on.[data-theme="dark"], fall back to the same values for dark (and warn).<projectRoot>/<utilitiesDir>/token-bridge.css (default src/styles/token-bridge.css).python3 ${CLAUDE_PLUGIN_ROOT}/scripts/validate_utilities.py <bridge-file> to enforce parity.references/token-bridge.md — full alias mapping and rationale.Every flow ends with a contract check. The plugin's hooks and tests/run.sh enforce these automatically; the skill should run them locally too:
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/validate_utilities.py ${CLAUDE_PLUGIN_ROOT}/assets/ exits 0.utilities.tokens.json produces the same bytes as the committed utilities.css.:root is also defined in [data-theme="dark"].If any of these fail, the user-visible flow halts and the assistant reports the reasons array verbatim.
--families provides static filtering./utility-tune is the explicit invocation.dark:bg-primary, etc.) — fpkit doesn't ship these upstream.acss-kit owns components.