{"id":"14bfde1a-8245-4618-b1f7-f93ffe1d40e9","shortId":"kzHB2U","kind":"skill","title":"agentic","tagline":"Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Agentic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Agentic.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nThe agentic design style emphasizes conversational interactions, clear outcomes, and minimal controls, allowing users to delegate tasks to AI instead of manually managing complex workflows.\n\n## Style Foundations\n- Visual style: modern, bold\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Playfair Display, display=Playfair Display, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: surface/subtle layers | Tokens: primary=#FF5701, secondary=#F6F6F1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 8pt baseline grid\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support\n\n## Writing Tone\nconcise, confident, helpful, clear, friendly, professional, action-oriented, low-jargon\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n- design for empty/loading/error states\n- ensure responsive behavior by default\n- document accessibility rationale\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid decorative motion without purpose\n- avoid ambiguous labels\n- avoid mixing multiple visual metaphors\n- avoid inaccessible hit areas\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":["agentic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-agentic","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/agentic","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,761 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:51.679Z","embedding":null,"createdAt":"2026-04-18T22:11:04.815Z","updatedAt":"2026-05-02T12:53:51.679Z","lastSeenAt":"2026-05-02T12:53:51.679Z","tsv":"'1':270 '100':97 '111827':124 '14/16/18/24/32/40':85 '16a34a':116 '2':281 '2.2':132 '200':98 '3':292 '300':99 '4':301 '400':100 '44px':154 '5':311 '500':101 '6':323 '600':102 '700':103 '800':104 '8pt':127 '900':105 'aa':133 'accept':304,368 'access':130,200,242,303,364,449,470,473 'action':170 'action-ori':169 'activ':395 'add':312 'adject':437 'aesthet':468 'agent':1,17,19,35,53 'ai':4,70 'ai-first':3 'allow':64 'alon':438 'altern':256 'ambigu':219,436 'anatomi':295,359 'anchor':439 'anti':314,377 'anti-pattern':313,376 'area':229 'aria':144 'author':33,268 'avoid':205,209,213,218,221,226 'baselin':128 'behavior':196,231,300,363,403,420 'bold':82 'brand':51 'case':423 'checklist':328,383 'clariti':244 'clear':10,59,166 'code':334 'color':106,414 'color-token':413 'complex':75 'compon':237,289,294,356,384,512 'component-level':288,355 'concis':163,262 'concret':248,497 'confid':164 'conflict':466 'consist':238,458 'constraint':286,475 'content':308,370 'content-writ':307 'context':348 'contrast':159,207 'control':9,63 'convers':2,57 'creat':36 'criteria':305,369 'd97706':118 'danger':119 'dc2626':120 'decor':214 'default':198,249,390 'defin':282,387 'deleg':13,67 'depend':434 'describ':401 'design':20,30,50,54,190,273,342,351 'design-system':29,341 'direct':45 'disabl':396 'display':89,90,92 'do-rul':490 'document':199 'edg':422 'emphas':56 'empti':426 'empty/loading/error':192 'end':324 'engin':48 'ensur':194 'error':398 'everi':448,489 'exampl':375,447,474,501 'execut':332 'exist':320,511 'expect':230,310,386 'expert':28 'explain':251 'explicit':189,417 'f6f6f1':114 'ff5701':112 'ffffff':122 'first':5,136,235 'flag':465 'flow':15 'focus':139,266,393 'focus-vis':392 'follow':232 'font':86 'foundat':78,234,285,354 'friend':167 'gate':430 'generat':340 'goal':350 'grid':129 'guidanc':41,260,291,344,509 'guidelin':32,267 'help':165 'hierarchi':185 'high':158 'high-contrast':157 'hit':228 'hover':391 'html':142 'implement':39,265,381,455 'implementation-focus':264 'implementation-readi':38 'inaccess':227 'includ':302,418,507 'inconsist':210,321 'instead':71 'intent':274 'interact':58,137,187,299,402 'interfac':6 'introduc':503 'jargon':174 'jetbrain':94 'keep':186,259 'keyboard':135,405 'keyboard-first':134 'label':149,220,425 'languag':476 'layer':109 'least':495 'level':290,357 'load':397 'local':463 'long':424 'low':173,206 'low-jargon':172 'manag':74 'manual':73 'metaphor':225 'migrat':317,508 'minim':8,62 'mission':24 'mix':222 'modern':81 'mono':93,95 'motion':152,215 'multipl':223 'must':451,478 'negoti':482 'new':505 'non':481 'non-negoti':480 'note':318 'novelti':246 'off':254 'one':276,461,496 'one-off':460 'opinion':261 'optim':464 'orient':171 'outcom':11,60 'output':337 'overflow':428 'pair':488 'palett':107 'pattern':315,378,506 'playfair':88,91 'pointer':406 'possibl':258 'practic':37 'prefer':177,456 'preserv':183 'primari':87,111 'priorit':241,472 'profession':168 'prohibit':380 'propos':279 'provid':247 'purpos':217 'qa':327,382 'qualiti':429 'rational':201 'raw':181 'reader':147 'readi':40 'recommend':487 'reduc':151 'reduced-mot':150 'relev':400 'requir':336,365,388 'respons':195,362,419 'restat':271 'review':335 'rhythm':212 'rule':175,202,280,358,385,432,441,483,492 'scale':84,126 'screen':146 'screen-read':145 'secondari':113 'semant':141,178 'sentenc':277 'skill':22 'skill-agentic' 'source-bergside' 'space':125,211,410 'specifi':293 'standard':373 'state':140,188,193,296,361,389,409,427 'statement':450 'structur':338,347 'style':55,77,80 'success':115 'support':153,160 'surfac':121 'surface/subtle':108 'system':21,31,343,457 't-exampl':499 'target':156 'task':14,68 'test':148 'testabl':367,453 'text':123,208 'threshold':445 'token':110,179,283,352,415,444 'tone':162,372 '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':155,408 'trade':253 'trade-off':252 'typographi':83,411 'ui':322 'uncertain':240 'univers':23 'usag':416 'use':46,345,477 'user':65 'valu':182 'variant':297,360 'visibl':138,394 'visual':79,184,224 'warn':117 'wcag':131 'weight':96 'without':216 'workflow':18,76,269 'write':161,309","prices":[{"id":"df2ff531-3f36-4f0f-bf4c-7cf3eb283d15","listingId":"14bfde1a-8245-4618-b1f7-f93ffe1d40e9","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:04.815Z"}],"sources":[{"listingId":"14bfde1a-8245-4618-b1f7-f93ffe1d40e9","source":"github","sourceId":"bergside/awesome-design-skills/agentic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/agentic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:04.815Z","lastSeenAt":"2026-05-02T12:53:51.679Z"}],"details":{"listingId":"14bfde1a-8245-4618-b1f7-f93ffe1d40e9","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"agentic","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":"fdd00607852bae8374057c38efb4c95736bef7e6","skill_md_path":"skills/agentic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/agentic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"agentic","license":"MIT","description":"Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/agentic"},"updatedAt":"2026-05-02T12:53:51.679Z"}}