{"id":"5302bdee-9846-474d-b242-8dcfbc2c8d4f","shortId":"BuFG2d","kind":"skill","title":"ant","tagline":"Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Ant Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Ant.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nAnt Design follows a structured, enterprise-focused design system that emphasizes clarity, consistency, and efficiency in complex web applications.\n\n## Style Foundations\n- Visual style: data-dense, enterprise\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#1677ff, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\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, 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":["ant","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-ant","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/ant","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,618 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.755Z","embedding":null,"createdAt":"2026-04-18T22:11:05.583Z","updatedAt":"2026-05-02T12:53:51.755Z","lastSeenAt":"2026-05-02T12:53:51.755Z","tsv":"'1':250 '100':96 '111827':126 '12/14/16/20/24/32':82 '1677ff':114 '16a34a':118 '2':261 '2.2':132 '200':97 '3':272 '300':98 '4':281 '4/8/12/16/24/32':129 '400':99 '5':291 '500':100 '6':303 '600':101 '700':102 '800':103 '8b5cf6':116 '900':104 'aa':133 'accept':284,348 'access':130,180,222,283,344,429,450,453 'action':150 'action-ori':149 'activ':375 'add':292 'adject':417 'aesthet':448 'alon':418 'altern':236 'ambigu':199,416 'anatomi':275,339 'anchor':419 'ant':1,19,35,52 'anti':294,357 'anti-pattern':293,356 'applic':18,71 'area':209 'author':33,248 'avoid':185,189,193,198,201,206 'behavior':176,211,280,343,383,400 'brand':51 'case':403 'checklist':308,363 'clariti':9,64,224 'clear':146 'code':314 'color':105,394 'color-token':393 'complex':69 'compon':217,269,274,336,364,492 'component-level':268,335 'concis':143,242 'concret':228,477 'confid':144 'conflict':446 'consist':10,65,218,438 'constraint':266,455 'content':288,350 'content-writ':287 'context':328 'contrast':187 'creat':36 'criteria':285,349 'd97706':120 'danger':111,121 'data':15,77 'data-dens':14,76 'dc2626':122 'decor':194 'default':178,229,370 'defin':262,367 'dens':16,78 'depend':414 'describ':381 'design':6,20,30,50,53,60,170,253,322,331 'design-system':29,321 'direct':45 'disabl':376 'display':88 'do-rul':470 'document':179 'edg':402 'effici':12,67 'emphas':8,63 'empti':406 'empty/loading/error':172 'end':304 'engin':48 'ensur':174 'enterpris':4,58,79 'enterprise-focus':3,57 'error':378 'everi':428,469 'exampl':355,427,454,481 'execut':312 'exist':300,491 'expect':210,290,366 'expert':28 'explain':231 'explicit':169,397 'ffffff':124 'first':136,215 'flag':445 'focus':5,59,139,246,373 'focus-vis':372 'follow':54,212 'font':83 'foundat':73,214,265,334 'friend':147 'gate':410 'generat':320 'goal':330 'guidanc':41,240,271,324,489 'guidelin':32,247 'help':145 'hierarchi':165 'hit':208 'hover':371 'implement':39,245,361,435 'implementation-focus':244 'implementation-readi':38 'inaccess':207 'includ':282,398,487 'inconsist':190,301 'intent':254 'interact':137,167,279,382 'introduc':483 'jakarta':86,90 'jargon':154 'jetbrain':93 'keep':166,239 'keyboard':135,385 'keyboard-first':134 'label':200,405 'languag':456 'least':475 'level':270,337 'load':377 'local':443 'long':404 'low':153,186 'low-jargon':152 'metaphor':205 'migrat':297,488 'mission':24 'mix':202 'mono':92,94 'motion':195 'multipl':203 'must':431,458 'negoti':462 'neutral':108 'new':485 'non':461 'non-negoti':460 'note':298 'novelti':226 'off':234 'one':256,441,476 'one-off':440 'opinion':241 'optim':444 'orient':151 'output':317 'overflow':408 'pair':468 'palett':106 'pattern':295,358,486 'plus':85,89 'pointer':386 'possibl':238 'practic':37 'prefer':157,436 'preserv':163 'primari':84,107,113 'priorit':221,452 'profession':148 'prohibit':360 'propos':259 'provid':227 'purpos':197 'qa':307,362 'qualiti':409 'rational':181 'raw':161 'readi':40 'recommend':467 'relev':380 'requir':316,345,368 'respons':175,342,399 'restat':251 'review':315 'rhythm':192 'rule':155,182,260,338,365,412,421,463,472 'san':87,91 'scale':81,128 'secondari':115 'semant':158 'sentenc':257 'skill':22 'skill-ant' 'source-bergside' 'space':127,191,390 'specifi':273 'standard':353 'state':140,168,173,276,341,369,389,407 'statement':430 'structur':2,56,318,327 'style':72,75 'success':109,117 'surfac':123 'system':7,21,31,61,323,437 't-exampl':479 'testabl':347,433 'text':125,188 'threshold':425 'token':112,159,263,332,395,424 'tone':142,352 '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':388 'trade':233 'trade-off':232 'typographi':80,391 'ui':302 'uncertain':220 'univers':23 'usag':396 'use':46,325,457 'valu':162 'variant':277,340 'visibl':138,374 'visual':74,164,204 'warn':110,119 'wcag':131 'web':17,70 'weight':95 'without':196 'workflow':249 'write':141,289","prices":[{"id":"c2c67d04-6497-4ca0-ae16-54eda045a327","listingId":"5302bdee-9846-474d-b242-8dcfbc2c8d4f","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:05.583Z"}],"sources":[{"listingId":"5302bdee-9846-474d-b242-8dcfbc2c8d4f","source":"github","sourceId":"bergside/awesome-design-skills/ant","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/ant","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:05.583Z","lastSeenAt":"2026-05-02T12:53:51.755Z"}],"details":{"listingId":"5302bdee-9846-474d-b242-8dcfbc2c8d4f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"ant","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":"f4f248c081b839a92698f69161e58d478a1f626f","skill_md_path":"skills/ant/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/ant"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"ant","license":"MIT","description":"Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/ant"},"updatedAt":"2026-05-02T12:53:51.755Z"}}