{"id":"ab527aaf-1fb7-4a70-8581-22ba7f42728e","shortId":"Qa9HWH","kind":"skill","title":"sketch","tagline":"A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Sketch Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Sketch.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls, dashed card outlines, and chunky offset \"pencil-drawn\" shadows give every surface a tactile, illustrated feel.\n\n## Style Foundations\n- Visual style: modern, clean, high-contrast\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Delicious Handrawn, display=Delicious Handrawn, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#1DAD97, secondary=#F4EDE0, 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":["sketch","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-sketch","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/sketch","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,489 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:24.190Z","embedding":null,"createdAt":"2026-05-06T12:54:25.014Z","updatedAt":"2026-05-18T18:53:24.190Z","lastSeenAt":"2026-05-18T18:53:24.190Z","tsv":"'1':249 '100':129 '111827':160 '12/14/16/20/24/32':117 '16a34a':152 '1dad97':148 '2':260 '2.2':166 '200':130 '3':271 '300':131 '4':280 '4/8/12/16/24/32':163 '400':132 '5':290 '500':133 '6':302 '600':134 '700':135 '800':136 '900':137 'aa':167 'accent':20,80 'accept':283,347 'access':164,221,282,343,428,449,452 'activ':374 'add':291 'adject':416 'aesthet':447 'alon':417 'altern':235 'ambigu':207,415 'anatomi':274,338 'anchor':418 'anti':293,356 'anti-pattern':292,355 'author':43,247 'avoid':198,202,206 'behavior':210,279,342,382,399 'brand':19,61,79 'card':90 'case':402 'checklist':307,362 'chunki':93 'clariti':223 'clean':111 'code':313 'color':138,393 'color-token':392 'compon':216,268,273,335,363,491 'component-level':267,334 'concis':177,241 'concret':227,476 'confid':178 'conflict':445 'consist':217,437 'constraint':265,454 'content':287,349 'content-writ':286 'context':327 'contrast':114,200 'control':28,88 'cream':15,75 'creat':46 'criteria':284,348 'd97706':154 'danger':145,155 'dash':89 'dc2626':156 'default':228,369 'defin':261,366 'delici':120,123 'depend':413 'describ':380 'design':30,40,60,252,321,330 'design-system':39,320 'direct':55 'disabl':375 'display':24,84,122 'do-rul':469 'drawn':6,66,97 'edg':401 'empti':405 'end':303 'engin':58 'error':377 'everi':100,427,468 'exampl':354,426,453,480 'execut':311 'exist':299,490 'expect':209,289,365 'expert':38 'explain':230 'explicit':194,396 'f4ede0':150 'feel':105 'ffffff':158 'first':170,214 'flag':444 'focus':173,245,372 'focus-vis':371 'follow':211 'font':118 'foundat':107,213,264,333 'friend':3,63 'gate':409 'generat':319 'give':99 'goal':329 'guidanc':51,239,270,323,488 'guidelin':42,246 'hand':5,22,65,82 'hand-drawn':4,64 'hand-written':21,81 'handrawn':121,124 'head':25,85 'help':179 'hierarchi':190 'high':113 'high-contrast':112 'hover':370 'illustr':12,72,104 'implement':49,244,360,434 'implementation-focus':243 'implementation-readi':48 'includ':281,397,486 'inconsist':203,300 'inspir':9,69 'intent':253 'interact':171,192,278,381 'interfac':8,68 'introduc':482 'jetbrain':126 'keep':191,238 'keyboard':169,384 'keyboard-first':168 'label':208,404 'languag':455 'least':474 'level':269,336 'load':376 'local':442 'long':403 'low':199 'migrat':296,487 'mission':34 'modern':110 'mono':125,127 'must':430,457 'negoti':461 'neutral':142 'new':484 'non':460 'non-negoti':459 'note':297 'novelti':225 'off':233 'offset':94 'one':255,440,475 'one-off':439 'opinion':240 'optim':443 'outlin':91 'output':316 'overflow':407 'pair':467 'palett':139 'paper':16,76 'pattern':294,357,485 'pencil':11,71,96 'pencil-drawn':95 'pill':27,87 'pointer':385 'possibl':237 'practic':47 'prefer':182,435 'preserv':188 'primari':119,140,147 'priorit':220,451 'prohibit':359 'propos':258 'provid':226 'qa':306,361 'qualiti':408 'raw':186 'readi':50 'recommend':466 'relev':379 'requir':315,344,367 'respons':341,398 'restat':250 'review':314 'rhythm':205 'round':26,86 'rule':180,195,259,337,364,411,420,462,471 'scale':116,162 'secondari':141,149 'semant':183 'sentenc':256 'shadow':98 'sketch':1,7,29,45,67 'skill':32 'skill-sketch' 'soft':17,77 'source-bergside' 'space':161,204,389 'specifi':272 'standard':352 'state':174,193,275,340,368,388,406 'statement':429 'structur':317,326 'style':106,109 'success':143,151 'surfac':101,157 'system':31,41,322,436 't-exampl':478 'tactil':103 'teal':18,78 'testabl':346,432 'text':159,201 'threshold':424 'token':146,184,262,331,394,423 'tone':176,351 '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':387 'trade':232 'trade-off':231 'typographi':115,390 'ui':301 'uncertain':219 'univers':33 'usag':395 'use':56,324,456 'valu':187 'variant':276,339 'visibl':172,373 'visual':108,189 'warm':14,74 'warn':144,153 'wcag':165 'weight':128 'workflow':248 'write':175,288 'written':23,83","prices":[{"id":"6f59e6f2-3ec6-4f58-99b6-7156cddddc60","listingId":"ab527aaf-1fb7-4a70-8581-22ba7f42728e","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:25.014Z"}],"sources":[{"listingId":"ab527aaf-1fb7-4a70-8581-22ba7f42728e","source":"github","sourceId":"bergside/awesome-design-skills/sketch","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/sketch","isPrimary":false,"firstSeenAt":"2026-05-06T12:54:25.014Z","lastSeenAt":"2026-05-18T18:53:24.190Z"}],"details":{"listingId":"ab527aaf-1fb7-4a70-8581-22ba7f42728e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"sketch","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":"a65c87a0bc64d1d6da7b9333ea4fccd667f14684","skill_md_path":"skills/sketch/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/sketch"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"sketch","description":"A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/sketch"},"updatedAt":"2026-05-18T18:53:24.190Z"}}