skills.rest
howells
howellsCOMMUNITY
Explore all skills by this author →
Website𝕏@howellsGitHub

chiaroscuro

Generate Tailwind v4 UI wireframes and implementation-ready design specs.

2|Updated May 21, 2026
Search Tags:#accessibility#design system#ui design#wireframes#componentization#tailwind v4#visual polish
One-click install
npx skills add https://github.com/howells/skills --skill chiaroscuro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chiaroscuro
Source: https://github.com/howells/skills/tree/main/chiaroscuro
Command: npx skills add https://github.com/howells/skills --skill chiaroscuro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creates non-generic, user-centered Tailwind v4 UI direction that another agent or engineer can implement accurately, while avoiding UI furniture and leaking internal system details.

Core Features & Use Cases

  • Design mode: Produce wireframes and detailed UI design specs (typography, colors, spacing, surface ladder, controls, motion, states) before code.
  • Component fast-path: Rapidly define a single component’s concrete styling and behavior rules when the request is small.
  • Polish mode: Componentize, deduplicate, and tighten existing Tailwind/React UI without changing the intended product direction.
  • Tailwind v4-first systemization: Express decisions as Tailwind v4 @theme tokens, utilities, and component class shapes (with non-negotiable Tailwind v4 target).

Quick Start

Use the chiaroscuro skill to design a memorable app screen with a concrete Tailwind v4 token-based visual system, including wireframes and a change spec, starting from the user’s current UX context.

Frequently Asked Questions about chiaroscuro

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

FAQPage Schema
How do I create distinctive Tailwind v4 UI design specs that engineers can implement accurately?▼

Tailwind v4 UI design direction is produced as structured deliverables including wireframes, detailed styling specs, and a measurable change spec, strictly expressed using `@theme` tokens and utilities for accurate implementation.

What is the best way to componentize and deduplicate existing Tailwind UI without changing product direction?▼

Componentizing and deduplicating existing Tailwind UI is handled through a dedicated polish mode that tightens styling and behavior rules while strictly preserving the intended product direction.

Can I redesign an existing app screen from a screenshot using Tailwind v4 tokens?▼

Yes, redesigning existing UI from screenshots generates Tailwind v4 token-based design specs by extracting visual evidence and producing a concrete visual system, wireframes, and a change spec.

Do I need to use Tailwind v4 `@theme` tokens for wireframes and UI component design?▼

Tailwind v4 `@theme` tokens and utilities are required for UI component design output, ensuring all visual decisions like typography, colors, and spacing are systemized and implementation-ready.

How do I rapidly define concrete styling and behavior rules for a single UI component?▼

Rapidly defining single UI component styling uses a component fast-path mode, which quickly produces concrete Tailwind v4 styling and behavior rules tailored for small requests.

Related Skills

Explore More Design & Creative Skills→
imgamerimgamer

ux-design

Generate guided UX specifications for game screens, flows, or HUDs.

Community
Advanced
chiroro-jrchiroro-jr
21

pencil-design

Convert Pencil .pen designs into React/Next.js and Tailwind v4 code.

Community
Advanced
AlfxjxAlfxjx

design-taste-frontend

Enforce metric-based UI/UX rules and optimize frontend design for React or Next.js projects.

Community
Advanced
howellshowells
2

foundry

Transform brand intent into Tailwind v4 @theme tokens and UI identity rules.

Community
Advanced