dramatic
CommunityShip bold, theatrical UI systems
Design & Creative#typography#accessibility#design system#design tokens#visual hierarchy#ui guidelines#component states
AuthorPiercingXX
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Dramatic turns vague “make it feel theatrical” requests into consistent, implementation-ready design-system guidance that teams can apply without guessing.
Core Features & Use Cases
- High-contrast foundations: defines tokens for typography, spacing rhythm, and color (primary, neutral, success, warning, danger) to keep visuals bold while remaining coherent.
- Component-ready rules: provides authoring structure for consistent anatomy, variants, and explicit interaction states (hover, focus-visible, active, disabled, loading, error as relevant).
- Accessibility and QA gates: enforces testable WCAG 2.2 AA principles, clear tone/content standards, anti-patterns, and a review-ready checklist.
Quick Start
Ask the AI to generate a Dramatic design-system specification for a button component, including tokens, states, accessibility acceptance criteria, anti-patterns, and a QA checklist.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: dramatic Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#dramatic 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.