dramatic

Generate Dramatic design-system guidelines with WCAG 2.2 AA acceptance criteria.

2.3k|211|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill dramatic-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dramatic
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/dramatic
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill dramatic-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dramatic helps teams implement high-contrast, theatrical design systems consistently without sacrificing accessibility or usability.

Core Features & Use Cases

  • Tokenized foundations: Establishes explicit colors, typography (Outfit + JetBrains Mono), spacing, and rounded corners for predictable UI styling.
  • Component-ready guidance: Defines do/don’t rules and quality gates so engineers can implement consistent states, hierarchy, and interactions.
  • Accessibility-first constraints: Enforces WCAG 2.2 AA thinking, keyboard-first behavior, and testable acceptance criteria for focus and contrast.

Quick Start

Ask the agent to generate Dramatic design-system implementation guidance with token usage, required component states, accessibility acceptance criteria, and a code-review QA checklist.

Frequently Asked Questions about dramatic

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

FAQPage Schema
How do I build a high-contrast design system that meets WCAG 2.2 AA accessibility standards?▼

To build a WCAG 2.2 AA compliant high-contrast design system, define explicit color, typography, and spacing tokens, then enforce keyboard-first behavior and testable acceptance criteria for focus and contrast during component implementation.

What's the best way to document component interaction states for theatrical UIs?▼

Documenting component interaction states for theatrical UIs requires defining explicit do/don't anti-patterns, token grounding rules, and a code-review QA checklist so engineers can execute consistent hierarchy and behavior verification.

How do design tokens fix inconsistent UI styling in high-contrast interfaces?▼

Design tokens fix inconsistent UI styling in high-contrast interfaces by establishing explicit, predictable foundations for colors, typography, spacing, and rounded corners that ground component rules and ensure uniform application across states.

Can I generate accessibility acceptance criteria and a QA checklist for theatrical UI components?▼

You can generate accessibility acceptance criteria and a QA checklist for theatrical UI components by defining testable WCAG 2.2 AA constraints, do/don't anti-patterns, and quality gates that can be directly executed during code review.

Does this design system approach work without external component libraries or dependencies?▼

This design system approach works without external component libraries or dependencies, providing standalone tokenized foundations and component-ready guidance that engineers can apply directly to any high-contrast theatrical UI project.

Why do my high-contrast UI components have unclear behavior and failed accessibility checks?▼

High-contrast UI components often have unclear behavior and fail accessibility checks due to missing explicit token grounding, undefined interaction states, and a lack of testable WCAG 2.2 AA acceptance criteria in the design guidelines.