{"id":"416926d4-876b-4f18-ae0f-23f7cc2def1e","shortId":"mLaqbX","kind":"skill","title":"dramatic","tagline":"High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Dramatic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Dramatic.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nDramatic design style is a trend characterized by high-contrast visuals, bold, unconventional layouts, and immersive, theatrical experiences designed to grab user attention.\n\n## Style Foundations\n- Visual style: modern, clean, high-contrast\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Outfit, display=Outfit, mono=JetBrains Mono | weights=400, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#8B5CF6, secondary=#F43F5E, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#09090B, text=#FAFAFA\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\n\n## Expected Behavior\n- Follow the foundations first, then component consistency.\n- When uncertain, prioritize accessibility and clarity over novelty.\n- Provide concrete defaults and explain trade-offs when alternatives are possible.\n- Keep guidance opinionated, concise, and implementation-focused.\n\n## Guideline Authoring Workflow\n1. Restate the design intent in one sentence before proposing rules.\n2. Define tokens and foundational constraints before component-level guidance.\n3. Specify component anatomy, states, variants, and interaction behavior.\n4. Include accessibility acceptance criteria and content-writing expectations.\n5. Add anti-patterns and migration notes for existing inconsistent UI.\n6. End with a QA checklist that can be executed in code review.\n\n## Required Output Structure\nWhen generating design-system guidance, use this structure:\n- Context and goals\n- Design tokens and foundations\n- Component-level rules (anatomy, variants, states, responsive behavior)\n- Accessibility requirements and testable acceptance criteria\n- Content and tone standards with examples\n- Anti-patterns and prohibited implementations\n- QA checklist\n\n## Component Rule Expectations\n- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).\n- Describe interaction behavior for keyboard, pointer, and touch.\n- State spacing, typography, and color-token usage explicitly.\n- Include responsive behavior and edge cases (long labels, empty states, overflow).\n\n## Quality Gates\n- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.\n- Every accessibility statement must be testable in implementation.\n- Prefer system consistency over one-off local optimizations.\n- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.\n\n## Example Constraint Language\n- Use \"must\" for non-negotiable rules and \"should\" for recommendations.\n- Pair every do-rule with at least one concrete don't-example.\n- If introducing a new pattern, include migration guidance for existing components.\n\n<!-- TYPEUI_SH_MANAGED_END -->","tags":["dramatic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-dramatic","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-agents","topic-ai-agents","topic-ai-tools","topic-awesome","topic-awesome-list","topic-awesome-readme","topic-claude-design","topic-codex","topic-cursor"],"categories":["awesome-design-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/bergside/awesome-design-skills/dramatic","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add bergside/awesome-design-skills","source_repo":"https://github.com/bergside/awesome-design-skills","install_from":"skills.sh"}},"qualityScore":"0.589","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 277 github stars · SKILL.md body (3,314 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T12:53:53.038Z","embedding":null,"createdAt":"2026-04-18T22:11:18.268Z","updatedAt":"2026-05-02T12:53:53.038Z","lastSeenAt":"2026-05-02T12:53:53.038Z","tsv":"'09090b':117 '1':208 '12/14/16/20/24/32':86 '16a34a':111 '2':219 '2.2':125 '3':230 '4':239 '4/8/12/16/24/32':122 '400':96 '5':249 '6':261 '8b5cf6':107 '900':97 'aa':126 'accept':242,306 'access':123,180,241,302,387,408,411 'activ':333 'add':250 'adject':375 'aesthet':406 'alon':376 'altern':194 'ambigu':166,374 'anatomi':233,297 'anchor':377 'anti':252,315 'anti-pattern':251,314 'attent':17,74 'author':32,206 'avoid':157,161,165 'behavior':169,238,301,341,358 'bold':8,63 'brand':50 'case':361 'character':57 'checklist':266,321 'clariti':182 'clean':80 'code':272 'color':98,352 'color-token':351 'command':16 'compon':175,227,232,294,322,450 'component-level':226,293 'composit':14 'concis':136,200 'concret':186,435 'confid':137 'conflict':404 'consist':176,396 'constraint':224,413 'content':246,308 'content-writ':245 'context':286 'contrast':4,61,83,159 'creat':35 'criteria':243,307 'd97706':113 'danger':104,114 'dc2626':115 'default':187,328 'defin':220,325 'depend':372 'describ':339 'design':6,19,29,49,52,70,211,280,289 'design-system':28,279 'direct':44 'disabl':334 'display':90 'do-rul':428 'dramat':1,18,34,51 'edg':360 'empti':364 'end':262 'engin':47 'error':336 'everi':386,427 'exampl':313,385,412,439 'execut':270 'exist':258,449 'expect':168,248,324 'experi':69 'expert':27 'explain':189 'explicit':153,355 'f43f5e':109 'fafafa':119 'first':129,173 'flag':403 'focus':132,204,331 'focus-vis':330 'follow':170 'font':87 'foundat':76,172,223,292 'gate':368 'generat':278 'goal':288 'grab':72 'guidanc':40,198,229,282,447 'guidelin':31,205 'help':138 'hierarchi':149 'high':3,60,82 'high-contrast':2,59,81 'hover':329 'immers':10,67 'implement':38,203,319,393 'implementation-focus':202 'implementation-readi':37 'includ':240,356,445 'inconsist':162,259 'intent':212 'interact':130,151,237,340 'introduc':441 'jetbrain':93 'keep':150,197 'keyboard':128,343 'keyboard-first':127 'label':167,363 'languag':414 'layout':9,65 'least':433 'level':228,295 'load':335 'local':401 'long':362 'low':158 'migrat':255,446 'mission':23 'modern':79 'mono':92,94 'must':389,416 'negoti':420 'neutral':101 'new':443 'non':419 'non-negoti':418 'note':256 'novelti':184 'off':192 'one':214,399,434 'one-off':398 'opinion':199 'optim':402 'outfit':89,91 'output':275 'overflow':366 'pair':426 'palett':99 'pattern':253,316,444 'pointer':344 'possibl':196 'practic':36 'prefer':141,394 'preserv':147 'primari':88,100,106 'priorit':179,410 'prohibit':318 'propos':217 'provid':185 'qa':265,320 'qualiti':367 'raw':145 'readi':39 'recommend':425 'relev':338 'requir':274,303,326 'respons':300,357 'restat':209 'review':273 'rhythm':164 'rule':139,154,218,296,323,370,379,421,430 'scale':85,121 'secondari':108 'semant':142 'sentenc':215 'skill':21 'skill-dramatic' 'source-bergside' 'space':120,163,348 'specifi':231 'standard':311 'state':133,152,234,299,327,347,365 'statement':388 'structur':276,285 'style':53,75,78 'success':102,110 'surfac':116 'system':20,30,281,395 't-exampl':437 'testabl':305,391 'text':118,160 'theatric':5,68 'threshold':383 'token':105,143,221,290,353,382 'tone':135,310 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-agents' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome' 'topic-awesome-list' 'topic-awesome-readme' 'topic-claude-design' 'topic-codex' 'topic-cursor' 'touch':346 'trade':191 'trade-off':190 'trend':56 'typographi':84,349 'ui':260 'uncertain':178 'unconvent':13,64 'univers':22 'usag':354 'use':45,283,415 'user':73 'valu':146 'variant':235,298 'visibl':131,332 'visual':11,62,77,148 'warn':103,112 'wcag':124 'weight':95 'workflow':207 'write':134,247","prices":[{"id":"f583adb8-0748-4ba9-828d-6eb774aacb0e","listingId":"416926d4-876b-4f18-ae0f-23f7cc2def1e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"bergside","category":"awesome-design-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:11:18.268Z"}],"sources":[{"listingId":"416926d4-876b-4f18-ae0f-23f7cc2def1e","source":"github","sourceId":"bergside/awesome-design-skills/dramatic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dramatic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:18.268Z","lastSeenAt":"2026-05-02T12:53:53.038Z"}],"details":{"listingId":"416926d4-876b-4f18-ae0f-23f7cc2def1e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"dramatic","github":{"repo":"bergside/awesome-design-skills","stars":277,"topics":["agent-skills","agentic-ai","agentic-workflow","agents","ai","ai-agents","ai-tools","awesome","awesome-list","awesome-readme","claude-design","codex","cursor","design","design-md","design-system","google-stitch","skills"],"license":"mit","html_url":"https://github.com/bergside/awesome-design-skills","pushed_at":"2026-05-01T09:16:36Z","description":"List of awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools","skill_md_sha":"d7e1084f390480484b969440f18a5dc44d041377","skill_md_path":"skills/dramatic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dramatic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"dramatic","license":"MIT","description":"High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/dramatic"},"updatedAt":"2026-05-02T12:53:53.038Z"}}