chiaroscuro
CommunityTurn UI into distinctive, implementable direction.
Design & Creative#accessibility#design system#ui design#wireframes#componentization#tailwind v4#visual polish
Authorhowells
Version1.0.0
Installs0
System Documentation
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
@themetokens, 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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: chiaroscuro Download link: https://github.com/howells/skills/archive/main.zip#chiaroscuro Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.