{"id":"e0e7e655-7821-4af4-a0af-9f69d5213a76","shortId":"StbmAe","kind":"skill","title":"fiction","tagline":"A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Fiction Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Fiction.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes, flat surfaces with almost no shadows, and decorative hand-drawn-feeling illustrations in every section.\n\n## Style Foundations\n- Visual style: playful\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Cossette Texte, display=Cossette Texte, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#222222, secondary=#FFE9CE, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\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":["fiction","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-fiction","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/fiction","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.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 826 github stars · SKILL.md body (3,508 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-18T18:53:21.914Z","embedding":null,"createdAt":"2026-05-06T12:54:21.484Z","updatedAt":"2026-05-18T18:53:21.914Z","lastSeenAt":"2026-05-18T18:53:21.914Z","tsv":"'1':251 '100':132 '111827':162 '12/14/16/20/24/32':120 '16a34a':154 '2':262 '2.2':168 '200':133 '222222':150 '3':273 '300':134 '4':282 '4/8/12/16/24/32':165 '400':135 '5':292 '500':136 '6':304 '600':137 '700':138 '800':139 '900':140 'aa':169 'accept':285,349 'access':166,223,284,345,430,451,454 'activ':376 'add':293 'adject':418 'aesthet':449 'almost':100 'alon':419 'altern':237 'ambigu':209,417 'anatomi':276,340 'anchor':420 'anti':295,358 'anti-pattern':294,357 'author':47,249 'avoid':200,204,208 'background':17,81 'behavior':212,281,344,384,401 'big':18,82 'black':28,92 'block':26,90 'bold':19,83 'book':13,77 'brand':24,65,88 'cartoonesqu':5,69 'case':404 'checklist':309,364 'children':10,74 'clariti':225 'code':315 'color':25,89,141,395 'color-token':394 'compon':218,270,275,337,365,493 'component-level':269,336 'concis':179,243 'concret':229,478 'confid':180 'conflict':447 'consist':219,439 'constraint':267,456 'content':289,351 'content-writ':288 'context':329 'contrast':202 'cossett':123,126 'cream':16,80 'creat':50 'criteria':286,350 'custom':20,84 'd97706':156 'danger':147,157 'dc2626':158 'decor':104 'default':230,371 'defin':263,368 'depend':415 'describ':382 'design':34,44,64,254,323,332 'design-system':43,322 'direct':59 'disabl':377 'display':21,85,125 'do-rul':471 'drawn':107 'edg':403 'empti':407 'end':305 'energet':4,68 'engin':62 'error':379 'everi':111,429,470 'exampl':356,428,455,482 'execut':313 'exist':301,492 'expect':211,291,367 'expert':42 'explain':232 'explicit':196,398 'feel':108 'ffe9ce':152 'ffffff':160 'fiction':1,33,49 'first':172,216 'flag':446 'flat':97 'focus':175,247,374 'focus-vis':373 'follow':213 'font':121 'foundat':114,215,266,335 'friend':9,73 'gate':411 'generat':321 'generous':30,94 'goal':331 'guidanc':55,241,272,325,490 'guidelin':46,248 'hand':106 'hand-drawn-feel':105 'help':181 'hierarchi':192 'hover':372 'illustr':14,78,109 'implement':53,246,362,436 'implementation-focus':245 'implementation-readi':52 'includ':283,399,488 'inconsist':205,302 'inspir':7,71 'intent':255 'interact':173,194,280,383 'interfac':6,70 'introduc':484 'jetbrain':129 'keep':193,240 'keyboard':171,386 'keyboard-first':170 'label':210,406 'languag':457 'least':476 'level':271,338 'load':378 'local':444 'long':405 'low':201 'migrat':298,489 'mission':38 'mono':128,130 'must':432,459 'negoti':463 'neutral':144 'new':486 'non':462 'non-negoti':461 'note':299 'novelti':227 'off':235 'one':257,442,477 'one-off':441 'opinion':242 'optim':445 'outlin':29,93 'output':318 'overflow':409 'pair':469 'palett':142 'pattern':296,359,487 'play':3,67,117 'pointer':387 'possibl':239 'practic':51 'prefer':184,437 'preserv':190 'primari':122,143,149 'priorit':222,453 'prohibit':361 'propos':260 'provid':228 'qa':308,363 'qualiti':410 'raw':188 'readi':54 'recommend':468 'relev':381 'requir':317,346,369 'respons':343,400 'restat':252 'review':316 'rhythm':207 'round':31,95 'rule':182,197,261,339,366,413,422,464,473 's-book':11,75 'satur':23,87 'scale':119,164 'secondari':151 'section':112 'semant':185 'sentenc':258 'shadow':102 'shape':32,96 'skill':36 'skill-fiction' 'source-bergside' 'space':163,206,391 'specifi':274 'standard':354 'state':176,195,277,342,370,390,408 'statement':431 'structur':319,328 'style':113,116 'success':145,153 'surfac':98,159 'system':35,45,324,438 't-exampl':480 'testabl':348,434 'text':124,127,161,203 'thick':27,91 'threshold':426 'token':148,186,264,333,396,425 'tone':178,353 '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':389 'trade':234 'trade-off':233 'typographi':22,86,118,392 'ui':303 'uncertain':221 'univers':37 'usag':397 'use':60,326,458 'valu':189 'variant':278,341 'visibl':174,375 'visual':115,191 'warm':15,79 'warn':146,155 'wcag':167 'weight':131 'workflow':250 'write':177,290","prices":[{"id":"ce436ccd-3e45-4ea4-b628-45ba9b2dbdc8","listingId":"e0e7e655-7821-4af4-a0af-9f69d5213a76","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-05-06T12:54:21.484Z"}],"sources":[{"listingId":"e0e7e655-7821-4af4-a0af-9f69d5213a76","source":"github","sourceId":"bergside/awesome-design-skills/fiction","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/fiction","isPrimary":false,"firstSeenAt":"2026-05-06T12:54:21.484Z","lastSeenAt":"2026-05-18T18:53:21.914Z"}],"details":{"listingId":"e0e7e655-7821-4af4-a0af-9f69d5213a76","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"fiction","github":{"repo":"bergside/awesome-design-skills","stars":826,"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-06T18:26:50Z","description":"List of 67 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":"e448b8440f3f1b2419dcc6e603223be3843855c1","skill_md_path":"skills/fiction/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/fiction"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"fiction","description":"A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes"},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/fiction"},"updatedAt":"2026-05-18T18:53:21.914Z"}}