{"id":"7e73eda1-19be-46f2-b1d0-5516d7f21a09","shortId":"ZkpNDR","kind":"skill","title":"storytelling","tagline":"Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Storytelling Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Storytelling.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\na narrative techniques to create engaging, intuitive, and emotionally resonant digital experiences. It guides users through a cohesive journey using visuals, copy, and interaction, transforming functional interfaces into memorable experiences.\n\n## Style Foundations\n- Visual style: playful\n- Typography scale: desktop-first expressive scale | Fonts: primary=Inter, display=Abril Fatface, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\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":["storytelling","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-storytelling","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/storytelling","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,425 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:55.688Z","embedding":null,"createdAt":"2026-04-18T22:11:44.640Z","updatedAt":"2026-05-02T12:53:55.688Z","lastSeenAt":"2026-05-02T12:53:55.688Z","tsv":"'1':223 '100':104 '111827':134 '16a34a':126 '2':234 '2.2':140 '200':105 '3':245 '300':106 '3b82f6':122 '4':254 '4/8/12/16/24/32':137 '400':107 '5':264 '500':108 '6':276 '600':109 '700':110 '800':111 '8b5cf6':124 '900':112 'aa':141 'abril':98 'accept':257,321 'access':138,195,256,317,402,423,426 'activ':348 'add':265 'adject':390 'aesthet':421 'alon':391 'altern':209 'ambigu':181,389 'anatomi':248,312 'anchor':392 'anti':267,330 'anti-pattern':266,329 'author':33,221 'avoid':172,176,180 'behavior':184,253,316,356,373 'brand':51 'case':376 'checklist':281,336 'clariti':197 'code':287 'cohes':69 'color':113,367 'color-token':366 'compon':190,242,247,309,337,465 'component-level':241,308 'concis':151,215 'concret':201,450 'confid':152 'conflict':419 'consist':191,411 'constraint':239,428 'content':261,323 'content-writ':260 'context':301 'contrast':174 'copi':8,73 'creat':36,56 'criteria':258,322 'd97706':128 'danger':119,129 'dc2626':130 'default':202,343 'defin':235,340 'depend':387 'describ':354 'design':5,20,30,50,226,295,304 'design-system':29,294 'desktop':90 'desktop-first':89 'digit':62 'direct':45 'disabl':349 'display':97 'do-rul':443 'driven':4 'edg':375 'emot':16,60 'empti':379 'end':277 'engag':15,57 'engin':48 'error':351 'everi':401,442 'exampl':328,400,427,454 'execut':285 'exist':273,464 'expect':183,263,339 'experi':63,81 'expert':28 'explain':204 'explicit':168,370 'express':92 'fatfac':99 'ffffff':132 'first':91,144,188 'flag':418 'focus':147,219,346 'focus-vis':345 'follow':185 'font':94 'foundat':83,187,238,307 'function':77 'gate':383 'generat':293 'goal':303 'guid':12,65 'guidanc':41,213,244,297,462 'guidelin':32,220 'help':153 'hierarchi':164 'hover':344 'implement':39,218,334,408 'implementation-focus':217 'implementation-readi':38 'includ':255,371,460 'inconsist':177,274 'intent':227 'inter':96 'interact':10,75,145,166,252,355 'interfac':78 'introduc':456 'intuit':58 'jetbrain':101 'journey':18,70 'keep':165,212 'keyboard':143,358 'keyboard-first':142 'label':182,378 'languag':429 'least':448 'level':243,310 'load':350 'local':416 'long':377 'low':173 'memor':80 'migrat':270,461 'mission':24 'mono':100,102 'must':404,431 'narrat':3,53 'narrative-driven':2 'negoti':435 'neutral':116 'new':458 'non':434 'non-negoti':433 'note':271 'novelti':199 'off':207 'one':229,414,449 'one-off':413 'opinion':214 'optim':417 'output':290 'overflow':381 'pair':441 'palett':114 'pattern':268,331,459 'play':86 'pointer':359 'possibl':211 'practic':37 'prefer':156,409 'preserv':162 'primari':95,115,121 'priorit':194,425 'prohibit':333 'propos':232 'provid':200 'qa':280,335 'qualiti':382 'raw':160 'readi':40 'recommend':440 'relev':353 'requir':289,318,341 'reson':17,61 'respons':315,372 'restat':224 'review':288 'rhythm':179 'rule':154,169,233,311,338,385,394,436,445 'scale':88,93,136 'secondari':123 'semant':157 'sentenc':230 'skill':22 'skill-storytelling' 'source-bergside' 'space':135,178,363 'specifi':246 'standard':326 'state':148,167,249,314,342,362,380 'statement':403 'storytel':1,19,35 'structur':291,300 'style':82,85 'success':117,125 'surfac':131 'system':21,31,296,410 't-exampl':452 'techniqu':54 'testabl':320,406 'text':133,175 'threshold':398 'token':120,158,236,305,368,397 'tone':150,325 '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':361 'trade':206 'trade-off':205 'transform':76 'typographi':87,364 'ui':275 'uncertain':193 'univers':23 'usag':369 'use':6,46,71,298,430 'user':13,66 'valu':161 'variant':250,313 'visibl':146,347 'visual':7,72,84,163 'warn':118,127 'wcag':139 'weight':103 'workflow':222 'write':149,262","prices":[{"id":"d50a063a-4ec1-4f8c-8896-7a547a166666","listingId":"7e73eda1-19be-46f2-b1d0-5516d7f21a09","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:44.640Z"}],"sources":[{"listingId":"7e73eda1-19be-46f2-b1d0-5516d7f21a09","source":"github","sourceId":"bergside/awesome-design-skills/storytelling","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/storytelling","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:44.640Z","lastSeenAt":"2026-05-02T12:53:55.688Z"}],"details":{"listingId":"7e73eda1-19be-46f2-b1d0-5516d7f21a09","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"storytelling","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":"e6247c8f77539c57b8ba4127281de300c228e327","skill_md_path":"skills/storytelling/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/storytelling"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"storytelling","license":"MIT","description":"Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/storytelling"},"updatedAt":"2026-05-02T12:53:55.688Z"}}