{"id":"5b19f0a5-5dca-4a0a-b5f8-05253273da23","shortId":"NXaebv","kind":"skill","title":"doodle","tagline":"Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Doodle Design System Skill (Universal)\n\n## Mission\n\nYou are an expert design-system guideline author for Doodle.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\na creative, playful, and informal style that utilizes doodles, sketches, handwritten fonts, and imperfect lines to foster emotional connection and a raw, artistic feel\n\n## Style Foundations\n\n- Visual style: playful\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Delius Swash Caps, display=Delius Swash Caps, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#49B6E5, secondary=#263D5B, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\n\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\n\nconcise, confident, helpful\n\n## Rules: Do\n\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\n\n## Expected Behavior\n\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\n\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\n\nWhen generating design-system guidance, use this structure:\n\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\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\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\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":["doodle","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-doodle","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/doodle","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,365 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:52.957Z","embedding":null,"createdAt":"2026-04-18T22:11:17.558Z","updatedAt":"2026-05-02T12:53:52.957Z","lastSeenAt":"2026-05-02T12:53:52.957Z","tsv":"'1':219 '100':99 '111827':130 '14/16/18/24/32/40':85 '16a34a':122 '2':230 '2.2':136 '200':100 '263d5b':120 '3':241 '300':101 '4':250 '4/8/12/16/24/32':133 '400':102 '49b6e5':118 '5':260 '500':103 '6':272 '600':104 '700':105 '800':106 '900':107 'aa':137 'accept':253,317 'access':134,191,252,313,398,419,422 'activ':344 'add':261 'adject':386 'aesthet':417 'alon':387 'altern':205 'ambigu':177,385 'anatomi':244,308 'anchor':388 'anti':263,326 'anti-pattern':262,325 'artist':76 'author':35,217 'avoid':168,172,176 'behavior':180,249,312,352,369 'brand':53 'cap':90,94 'case':372 'checklist':277,332 'clariti':193 'code':283 'color':108,363 'color-token':362 'compon':186,238,243,305,333,461 'component-level':237,304 'concis':147,211 'concret':197,446 'confid':148 'conflict':415 'connect':72 'consist':187,407 'constraint':235,424 'content':257,319 'content-writ':256 'context':297 'contrast':170 'creat':38 'creativ':55 'criteria':254,318 'd97706':124 'danger':115,125 'dc2626':126 'default':198,339 'defin':231,336 'delius':88,92 'depend':383 'describ':350 'design':22,32,52,222,291,300 'design-system':31,290 'direct':47 'disabl':345 'display':91 'do-rul':439 'doodl':1,10,21,37,62 'drawn':4 'edg':371 'emot':71 'empti':375 'end':273 'engin':50 'error':347 'everi':397,438 'exampl':324,396,423,450 'execut':281 'exist':269,460 'expect':179,259,335 'expert':30 'explain':200 'explicit':164,366 'feel':20,77 'ffffff':128 'first':140,184 'flag':414 'focus':143,215,342 'focus-vis':341 'follow':181 'font':12,65,86 'foster':70 'foundat':79,183,234,303 'gate':379 'generat':289 'goal':299 'guidanc':43,209,240,293,458 'guidelin':34,216 'hand':3 'hand-drawn':2 'handwritten':11,64 'help':149 'hierarchi':160 'hover':340 'imperfect':14,67 'implement':41,214,330,404 'implementation-focus':213 'implementation-readi':40 'includ':251,367,456 'inconsist':173,270 'inform':19,58 'intent':223 'interact':141,162,248,351 'introduc':452 'jetbrain':96 'keep':161,208 'keyboard':139,354 'keyboard-first':138 'label':178,374 'languag':425 'least':444 'level':239,306 'like':7 'line':15,68 'load':346 'local':412 'long':373 'low':169 'migrat':266,457 'mission':26 'mono':95,97 'must':400,427 'negoti':431 'neutral':112 'new':454 'non':430 'non-negoti':429 'note':267 'novelti':195 'off':203 'one':225,410,445 'one-off':409 'opinion':210 'optim':413 'output':286 'overflow':377 'pair':437 'palett':109 'pattern':264,327,455 'play':18,56,82 'pointer':355 'possibl':207 'practic':39 'prefer':152,405 'preserv':158 'primari':87,110,117 'priorit':190,421 'prohibit':329 'propos':228 'provid':196 'qa':276,331 'qualiti':378 'raw':75,156 'readi':42 'recommend':436 'relev':349 'requir':285,314,337 'respons':311,368 'restat':220 'review':284 'rhythm':175 'rule':150,165,229,307,334,381,390,432,441 'scale':84,132 'secondari':111,119 'semant':153 'sentenc':226 'sketch':6,63 'sketch-lik':5 'skill':24 'skill-doodle' 'source-bergside' 'space':131,174,359 'specifi':242 'standard':322 'state':144,163,245,310,338,358,376 'statement':399 'structur':287,296 'style':8,59,78,81 'success':113,121 'surfac':127 'swash':89,93 'system':23,33,292,406 't-exampl':448 'testabl':316,402 'text':129,171 'threshold':394 'token':116,154,232,301,364,393 'tone':146,321 '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':357 'trade':202 'trade-off':201 'typographi':83,360 'ui':271 'uncertain':189 'univers':25 'usag':365 'use':48,294,426 'util':61 'valu':157 'variant':246,309 'visibl':142,343 'visual':80,159 'warn':114,123 'wcag':135 'weight':98 'workflow':218 'write':145,258","prices":[{"id":"e4c964e5-b86a-49e3-bfb7-672c7bce2c98","listingId":"5b19f0a5-5dca-4a0a-b5f8-05253273da23","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:17.558Z"}],"sources":[{"listingId":"5b19f0a5-5dca-4a0a-b5f8-05253273da23","source":"github","sourceId":"bergside/awesome-design-skills/doodle","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/doodle","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:17.558Z","lastSeenAt":"2026-05-02T12:53:52.957Z"}],"details":{"listingId":"5b19f0a5-5dca-4a0a-b5f8-05253273da23","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"doodle","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":"dcb2ba2a5cb78ea4ca7f9c7178f10476558be6f0","skill_md_path":"skills/doodle/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/doodle"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"doodle","license":"MIT","description":"Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/doodle"},"updatedAt":"2026-05-02T12:53:52.957Z"}}