{"id":"5ec8ff5c-fee6-4dcd-a586-eac60eb2d397","shortId":"FR2eSr","kind":"skill","title":"neobrutalism","tagline":"Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# neobrutalism Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for neobrutalism design.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\n\n## Style Foundations\n- Visual style: modern, clean, high-contrast\n- Typography scale: 13/15/17/21/27/35 | Fonts: primary=Inter, display=Inter, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#FDC800, secondary=#432DD7, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FBFBF9, text=#1C293C\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":["neobrutalism","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-neobrutalism","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/neobrutalism","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,189 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:54.474Z","embedding":null,"createdAt":"2026-04-18T22:11:32.641Z","updatedAt":"2026-05-02T12:53:54.474Z","lastSeenAt":"2026-05-02T12:53:54.474Z","tsv":"'1':195 '100':76 '13/15/17/21/27/35':66 '16a34a':98 '1c293c':106 '2':206 '2.2':112 '200':77 '3':217 '300':78 '4':226 '4/8/12/16/24/32':109 '400':79 '432dd7':96 '5':236 '500':80 '6':248 '600':81 '700':82 '800':83 '900':84 'aa':113 'accent':10 'accept':229,293 'access':110,167,228,289,374,395,398 'activ':320 'add':237 'adject':362 'aesthet':393 'alon':363 'altern':181 'ambigu':153,361 'anatomi':220,284 'anchor':364 'anti':239,302 'anti-pattern':238,301 'author':35,193 'avoid':144,148,152 'behavior':156,225,288,328,345 'bold':7 'border':8 'brand':54 'brutal':5 'case':348 'checklist':253,308 'clariti':169 'clean':60 'code':259 'color':11,85,339 'color-token':338 'compon':162,214,219,281,309,437 'component-level':213,280 'concis':123,187 'concret':173,422 'confid':124 'conflict':391 'consist':163,383 'constraint':211,400 'content':233,295 'content-writ':232 'context':273 'contrast':16,63,146 'creat':39 'criteria':230,294 'd97706':100 'danger':91,101 'dc2626':102 'default':174,315 'defin':207,312 'depend':359 'describ':326 'design':22,32,38,53,198,267,276 'design-system':31,266 'direct':48 'disabl':321 'display':70 'do-rul':415 'edg':347 'empti':351 'end':249 'engin':51 'error':323 'everi':373,414 'exampl':300,372,399,426 'execut':257 'exist':245,436 'expect':155,235,311 'expert':30 'explain':176 'explicit':140,342 'fbfbf9':104 'fdc800':94 'first':116,160 'flag':390 'focus':119,191,318 'focus-vis':317 'follow':157 'font':67 'foundat':56,159,210,279 'gate':355 'generat':265 'goal':275 'guidanc':44,185,216,269,434 'guidelin':34,192 'help':125 'hierarchi':136 'high':15,62 'high-contrast':14,61 'hover':316 'implement':42,190,306,380 'implementation-focus':189 'implementation-readi':41 'includ':227,343,432 'inconsist':149,246 'intent':199 'inter':69,71 'interact':117,138,224,327 'introduc':428 'jetbrain':73 'keep':137,184 'keyboard':115,330 'keyboard-first':114 'label':154,350 'languag':401 'layout':17 'least':420 'level':215,282 'load':322 'local':388 'long':349 'low':145 'migrat':242,433 'mission':26 'modern':2,59 'mono':72,74 'must':376,403 'negoti':407 'neobrut':1,21,37 'neutral':88 'new':430 'non':406 'non-negoti':405 'note':243 'novelti':171 'off':179 'one':201,386,421 'one-off':385 'opinion':186 'optim':389 'output':262 'overflow':353 'pair':413 'palett':86 'pattern':240,303,431 'pointer':331 'possibl':183 'practic':40 'prefer':128,381 'preserv':134 'primari':68,87,93 'priorit':166,397 'prohibit':305 'propos':204 'provid':172 'qa':252,307 'qualiti':354 'raw':13,132 'readi':43 'recommend':412 'relev':325 'requir':261,290,313 'respons':287,344 'restat':196 'review':260 'rhythm':151 'rule':126,141,205,283,310,357,366,408,417 'scale':65,108 'secondari':95 'semant':129 'sentenc':202 'skill':24 'skill-neobrutalism' 'source-bergside' 'space':107,150,335 'specifi':218 'standard':298 'state':120,139,221,286,314,334,352 'statement':375 'structur':263,272 'style':55,58 'success':89,97 'surfac':20,103 'system':23,33,268,382 't-exampl':424 'take':3 'testabl':292,378 'text':105,147 'threshold':370 'token':92,130,208,277,340,369 'tone':122,297 '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':333 'trade':178 'trade-off':177 'typographi':64,336 'ui':247 'uncertain':165 'univers':25 'usag':341 'use':49,270,402 'valu':133 'variant':222,285 'visibl':118,319 'visual':57,135 'vivid':9 'warm':19 'warn':90,99 'wcag':111 'weight':75 'workflow':194 'write':121,234","prices":[{"id":"93786e24-4001-4161-a49b-e3bb862d0b00","listingId":"5ec8ff5c-fee6-4dcd-a586-eac60eb2d397","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:32.641Z"}],"sources":[{"listingId":"5ec8ff5c-fee6-4dcd-a586-eac60eb2d397","source":"github","sourceId":"bergside/awesome-design-skills/neobrutalism","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/neobrutalism","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:32.641Z","lastSeenAt":"2026-05-02T12:53:54.474Z"}],"details":{"listingId":"5ec8ff5c-fee6-4dcd-a586-eac60eb2d397","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"neobrutalism","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":"8b5d84479363a517ca450fefa7b2086123477ab1","skill_md_path":"skills/neobrutalism/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/neobrutalism"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"neobrutalism","license":"MIT","description":"Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/neobrutalism"},"updatedAt":"2026-05-02T12:53:54.474Z"}}