{"id":"34cdcfd1-e32e-415b-8ad8-8b3aa93e3643","shortId":"xUgEz5","kind":"skill","title":"terracotta","tagline":"A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Terracotta Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Terracotta.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent. Earthy, human, and content-first — tuned for long-form reading, blogs, storytelling, and editorial layouts where readability and visual rhythm matter.\n\n## Style Foundations\n- Visual style: modern, clean, high-contrast, playful\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=DM Serif Display, display=DM Serif Display, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#C56A3C, secondary=#F3E9D8, 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, 44px+ touch targets, high-contrast support\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":["terracotta","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-terracotta","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/terracotta","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,552 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.532Z","embedding":null,"createdAt":"2026-05-06T18:54:31.408Z","updatedAt":"2026-05-18T18:53:24.532Z","lastSeenAt":"2026-05-18T18:53:24.532Z","tsv":"'1':266 '100':140 '111827':170 '14/16/18/24/32/40':126 '16a34a':162 '2':277 '2.2':176 '200':141 '3':288 '300':142 '4':297 '4/8/12/16/24/32':173 '400':143 '44px':185 '5':307 '500':144 '6':319 '600':145 '700':146 '800':147 '900':148 'aa':177 'accent':29,90 'accept':300,364 'access':174,238,299,360,445,466,469 'activ':391 'add':308 'adject':433 'aesthet':464 'alon':434 'altern':252 'ambigu':224,432 'anatomi':291,355 'anchor':435 'anti':310,373 'anti-pattern':309,372 'author':44,264 'avoid':215,219,223 'bake':5,66 'behavior':227,296,359,399,416 'blog':103 'brand':62 'brown':18,79 'built':11,72 'c56a3c':158 'case':419 'checklist':324,379 'clariti':240 'clay':7,68 'clay-ton':6,67 'clean':119 'code':330 'color':149,410 'color-token':409 'compon':233,285,290,352,380,508 'component-level':284,351 'concis':194,258 'concret':244,493 'confid':195 'conflict':462 'consist':234,454 'constraint':282,471 'content':95,304,366 'content-first':94 'content-writ':303 'context':344 'contrast':122,190,217 'cream':14,75 'creat':47 'criteria':301,365 'd97706':164 'danger':155,165 'dc2626':166 'default':245,386 'defin':278,383 'depend':430 'describ':397 'design':31,41,61,269,338,347 'design-system':40,337 'direct':56 'disabl':392 'display':23,84,131,132,135 'dm':129,133 'do-rul':486 'earthi':91 'edg':418 'editori':9,70,106 'empti':422 'end':320 'engin':59 'error':394 'everi':444,485 'exampl':371,443,470,497 'execut':328 'exist':316,507 'expect':226,306,382 'expert':39 'explain':247 'explicit':211,413 'f3e9d8':160 'ffffff':168 'first':96,180,231 'flag':461 'focus':183,262,389 'focus-vis':388 'follow':228 'font':127 'form':101 'foundat':115,230,281,350 'gate':426 'generat':336 'goal':346 'guidanc':52,256,287,340,505 'guidelin':43,263 'headlin':19,80 'help':196 'hierarchi':207 'high':121,189 'high-contrast':120,188 'hover':387 'human':92 'implement':50,261,377,451 'implementation-focus':260 'implementation-readi':49 'includ':298,414,503 'inconsist':220,317 'ink':17,78 'ink-brown':16,77 'intent':270 'interact':181,209,295,398 'interfac':10,71 'introduc':499 'jetbrain':137 'keep':208,255 'keyboard':179,401 'keyboard-first':178 'label':225,421 'languag':472 'layout':107 'least':491 'level':286,353 'load':393 'local':459 'long':100,420 'long-form':99 'low':216 'matter':113 'migrat':313,504 'mission':35 'modern':118 'mono':136,138 'must':447,474 'negoti':478 'neutral':152 'new':501 'non':477 'non-negoti':476 'note':314 'novelti':242 'off':250 'one':272,457,492 'one-off':456 'opinion':257 'optim':460 'output':333 'overflow':424 'pair':484 'palett':150 'pattern':311,374,502 'play':123 'pointer':402 'possibl':254 'practic':48 'prefer':199,452 'preserv':205 'primari':128,151,157 'priorit':237,468 'prohibit':376 'propos':275 'provid':243 'qa':323,378 'qualiti':425 'raw':203 'read':102 'readabl':109 'readi':51 'recommend':483 'relev':396 'requir':332,361,384 'respons':358,415 'restat':267 'review':331 'rhythm':112,222 'rule':197,212,276,354,381,428,437,479,488 'scale':125,172 'secondari':159 'semant':200 'sentenc':273 'serif':24,85,130,134 'set':20,81 'singl':27,88 'skill':33 'skill-terracotta' 'source-bergside' 'space':171,221,406 'specifi':289 'standard':369 'state':184,210,292,357,385,405,423 'statement':446 'storytel':104 'structur':334,343 'style':114,117 'success':153,161 'sun':4,65 'sun-bak':3,64 'support':191 'surfac':15,76,167 'system':32,42,339,453 't-exampl':495 'target':187 'terracotta':1,28,30,46,89 'testabl':363,449 'text':169,218 'threshold':441 'token':156,201,279,348,411,440 'tone':8,69,193,368 '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':186,404 'trade':249 'trade-off':248 'tune':97 'typographi':124,407 'ui':318 'uncertain':236 'univers':34 'usag':412 'use':57,341,473 'valu':204 'variant':293,356 'visibl':182,390 'visual':111,116,206 'warm':13,74 'warn':154,163 'wcag':175 'weight':139 'workflow':265 'write':192,305","prices":[{"id":"dee72e54-a965-4cb3-91c7-61d5be5ffa4b","listingId":"34cdcfd1-e32e-415b-8ad8-8b3aa93e3643","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-06T18:54:31.408Z"}],"sources":[{"listingId":"34cdcfd1-e32e-415b-8ad8-8b3aa93e3643","source":"github","sourceId":"bergside/awesome-design-skills/terracotta","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/terracotta","isPrimary":false,"firstSeenAt":"2026-05-06T18:54:31.408Z","lastSeenAt":"2026-05-18T18:53:24.532Z"}],"details":{"listingId":"34cdcfd1-e32e-415b-8ad8-8b3aa93e3643","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"terracotta","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":"37474a74a9326fc33dff2c6e5dacc9fafc943943","skill_md_path":"skills/terracotta/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/terracotta"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"terracotta","description":"A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/terracotta"},"updatedAt":"2026-05-18T18:53:24.532Z"}}