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

create-utilities

Convert visual intent into utility-class strings for React/TSX styling.

Updated Apr 21, 2026
Search Tags:#accessibility#tailwind#bootstrap#framework detection#utility classes#css generation#acss-kit
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill create-utilities
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-utilities
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/style-agent/skills/create-utilities
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill create-utilities

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

create-utilities removes the guesswork of converting a design description into the exact utility-class string your codebase can use, so you can style components faster and more consistently.

Core Features & Use Cases

  • Framework detection to choose the correct utility vocabulary for acss-kit, Tailwind, Bootstrap, or a Tailwind-compatible fallback.
  • Intent-to-classes mapping that translates layout, spacing, color, typography, borders/radius, shadow, and states into an ordered class list.
  • Accessibility-aware output that adds focus styling where supported or warns when the detected framework’s utilities lack focus-ring support.
  • Use case: generate a class string for a “centered hero card with padding, rounded corners, subtle shadow, and a primary accent,” then apply it directly in the returned HTML.

Quick Start

Ask the AI to create utility classes for the UI described as: "a centered flex row with 1rem padding, subtle shadow, rounded corners, and primary background."

Frequently Asked Questions about create-utilities

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

FAQPage Schema
How do I convert plain-language visual intent into utility classes for styling React components?▼

Convert visual intent into utility classes by mapping plain-language descriptions of layout, spacing, color, typography, borders, and shadows into ordered class strings for React/TSX projects.

Can I generate Tailwind utility classes from a natural language design description?▼

Yes, natural language design descriptions are mapped to Tailwind utility classes. The tool detects the active framework and translates visual intent into ordered, ready-to-use class strings.

Does this utility class generator support Bootstrap and acss-kit frameworks?▼

Yes, Bootstrap and acss-kit are supported. The tool uses deterministic framework detection to select the correct utility vocabulary, applying a Tailwind-compatible fallback when necessary.

How does the tool handle accessibility focus-visible styling when generating CSS utility classes?▼

Accessibility handling adds focus styling where supported. If the detected framework lacks focus-ring utilities, it warns the user about missing focus-visible behavior.

What is the best way to style a centered hero card with padding and a subtle shadow using utility classes?▼

Describe the visual intent — e.g., a centered hero card with padding, rounded corners, subtle shadow, and a primary accent — and apply the generated class string directly to the returned HTML.

Why does the generated class string sometimes ask for clarification when describing UI states?▼

It asks for clarification via AskUserQuestion when the visual intent for layout, spacing, or states is ambiguous, ensuring accurate ordered class mapping before generating the final string.

Related Skills

Explore More Design & Creative Skills→
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
benshapyrobenshapyro
9

tailwind-conventions

Enforces Tailwind CSS class organization and responsive patterns for React/Next.js components.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

tailwind-utility-classes

Compose Tailwind CSS utility classes for responsive component styling.

Official
Intermediate