{"id":"2ef15ffd-5a34-427a-a1a8-88afd01b1998","shortId":"3evX59","kind":"skill","title":"ui-component","tagline":"Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.","description":"# UI Component\n\n## Overview\n\nPart of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates components that respect the Toss seed's design language instead of improvising ad hoc markup and styling. It emphasizes semantic tokens, predictable typing, reusable variants, and mobile-friendly accessibility defaults.\n\n## When to Use\n- Use when you need a new UI primitive or composed component inside a StyleSeed-based project\n- Use when you want a component to match the existing Toss seed conventions\n- Use when a component should be reusable, typed, and design-token driven\n- Use when the AI might otherwise invent spacing, colors, or interaction patterns\n\n## How It Works\n\n### Step 1: Read the Local Design Context\n\nBefore generating code, inspect the seed's source of truth:\n- `CLAUDE.md` for conventions\n- `css/theme.css` for semantic tokens\n- at least one representative component from `components/ui/`\n\nIf the user already has a better local example, follow the local codebase over a generic template.\n\n### Step 2: Choose the Correct Home\n\nPlace the output where it belongs:\n- `src/components/ui/` for primitives and low-level building blocks\n- `src/components/patterns/` for composed sections or multi-part patterns\n\nDo not create a new primitive if an existing one can be extended safely.\n\n### Step 3: Follow the Structural Rules\n\nUse these defaults unless the host project strongly disagrees:\n- function declaration instead of a `const` component\n- `React.ComponentProps<>` or equivalent native prop typing\n- `className` passthrough support\n- `cn()` or the project's standard class merger\n- `data-slot` for component identification\n- CVA or equivalent only when variants are genuinely needed\n\n### Step 4: Use Semantic Tokens Only\n\nDo not hardcode visual values if the design system has a token for them.\n\nPreferred examples:\n- `bg-card`\n- `text-foreground`\n- `text-muted-foreground`\n- `border-border`\n- `shadow-[var(--shadow-card)]`\n\n### Step 5: Preserve StyleSeed Typography and Spacing\n\n- Use the scale already defined by the seed\n- Prefer multiples of 6px\n- Use logical spacing utilities where supported\n- Keep display and heading text tight, body text readable, captions restrained\n\n### Step 6: Bake in Accessibility\n\n- Touch targets should be at least 44x44px for interactive elements\n- Keyboard focus must be visible\n- Pass through `aria-*` attributes where appropriate\n- Respect reduced-motion preferences for nonessential motion\n\n## Output\n\nProvide:\n1. The generated component\n2. The target path\n3. Any required imports or dependencies\n4. Notes on variants, tokens, or follow-up integration work\n\n## Best Practices\n\n- Compose from existing primitives before inventing new ones\n- Keep the component API small and predictable\n- Prefer semantic layout classes over arbitrary values\n- Export named components unless the host project uses another standard consistently\n\n## Additional Resources\n\n- [StyleSeed repository](https://github.com/bitjaru/styleseed)\n- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/SKILL.md)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["component","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity-skills"],"capabilities":["skill","source-sickn33","skill-ui-component","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/ui-component","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (3,415 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-04-22T06:52:04.109Z","embedding":null,"createdAt":"2026-04-18T21:46:40.494Z","updatedAt":"2026-04-22T06:52:04.109Z","lastSeenAt":"2026-04-22T06:52:04.109Z","tsv":"'/bitjaru/styleseed)':449 '/bitjaru/styleseed),':29 '/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/skill.md)':454 '1':126,383 '2':174,387 '3':218,391 '4':272,397 '44x44px':358 '5':312 '6':348 '6px':329 'access':17,62,351 'ad':45 'addit':443 'ai':113 'alreadi':159,321 'anoth':440 'api':421 'appropri':372 'arbitrari':430 'aria':369 'ask':488 'attribut':370 'bake':349 'base':82 'belong':184 'best':408 'better':162 'bg':294 'bg-card':293 'block':193 'bodi':342 'border':304,305 'border-bord':303 'boundari':496 'build':192 'caption':345 'card':295,310 'choos':175 'clarif':490 'class':254,428 'classnam':245 'claude.md':142 'clear':463 'cn':248 'code':134 'codebas':168 'color':118 'compon':3,8,19,22,33,77,89,100,153,238,260,386,420,434 'components/ui':155 'compos':76,196,410 'consist':442 'const':237 'context':131 'convent':13,96,144 'correct':177 'creat':205 'criteria':499 'css/theme.css':145 'cva':262 'data':257 'data-slot':256 'declar':233 'default':63,225 'defin':322 'depend':396 'describ':467 'design':40,107,130,284 'design-token':106 'disagre':231 'display':337 'driven':109 'element':361 'emphas':51 'environ':479 'environment-specif':478 'equival':241,264 'ergonom':20 'exampl':164,292 'exist':93,211,412 'expert':484 'export':432 'extend':215 'focus':363 'follow':10,165,219,404 'follow-up':403 'foreground':298,302 'friend':61 'function':232 'generat':4,32,133,385 'generic':171 'genuin':269 'github.com':28,448,453 'github.com/bitjaru/styleseed)':447 'github.com/bitjaru/styleseed),':27 'github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/skill.md)':452 'hardcod':279 'head':339 'hoc':46 'home':178 'host':228,437 'identif':261 'import':394 'improvis':44 'input':493 'insid':78 'inspect':135 'instead':42,234 'integr':406 'interact':120,360 'invent':116,415 'keep':336,418 'keyboard':362 'languag':41 'layout':427 'least':150,357 'level':191 'limit':455 'local':129,163,167 'logic':331 'low':190 'low-level':189 'markup':47 'match':91,464 'merger':255 'might':114 'miss':501 'mobil':60 'mobile-friend':59 'motion':376,380 'multi':200 'multi-part':199 'multipl':327 'must':364 'mute':301 'name':433 'nativ':242 'need':70,270 'new':6,72,207,416 'nonessenti':379 'note':398 'one':151,212,417 'otherwis':115 'output':181,381,473 'overview':23 'part':24,201 'pass':367 'passthrough':246 'path':390 'pattern':121,202 'permiss':494 'place':179 'practic':409 'predict':54,424 'prefer':291,326,377,425 'preserv':313 'primit':74,187,208,413 'project':83,229,251,438 'prop':243 'provid':382 'react.componentprops':239 'read':127 'readabl':344 'reduc':375 'reduced-mot':374 'repositori':446 'repres':152 'requir':393,492 'resourc':444 'respect':35,373 'restrain':346 'reusabl':56,103 'review':485 'rule':222 'safe':216 'safeti':495 'scale':320 'scope':466 'section':197 'seed':38,95,137,325 'semant':52,147,274,426 'shadow':306,309 'shadow-card':308 'skill':31,451,458 'skill-ui-component' 'slot':258 'small':422 'sourc':139,450 'source-sickn33' 'space':117,317,332 'specif':480 'src/components/patterns':194 'src/components/ui':185 'standard':253,441 'step':125,173,217,271,311,347 'stop':486 'strong':230 'structur':15,221 'style':49 'stylese':11,26,81,314,445 'styleseed-bas':80 'substitut':476 'success':498 'support':247,335 'system':285 'target':353,389 'task':462 'templat':172 'test':482 'text':297,300,340,343 'text-foreground':296 'text-muted-foreground':299 'tight':341 'token':16,53,108,148,275,288,401 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'toss':12,37,94 'touch':352 'treat':471 'truth':141 'type':55,104,244 'typographi':315 'ui':2,7,21,73 'ui-compon':1 'unless':226,435 'use':66,67,84,97,110,223,273,318,330,439,456 'user':158 'util':333 'valid':481 'valu':281,431 'var':307 'variant':57,267,400 'visibl':366 'visual':280 'want':87 'work':124,407","prices":[{"id":"656f3c19-b48e-433c-8d02-167a9c8c469a","listingId":"2ef15ffd-5a34-427a-a1a8-88afd01b1998","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:40.494Z"}],"sources":[{"listingId":"2ef15ffd-5a34-427a-a1a8-88afd01b1998","source":"github","sourceId":"sickn33/antigravity-awesome-skills/ui-component","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-component","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:40.494Z","lastSeenAt":"2026-04-22T06:52:04.109Z"}],"details":{"listingId":"2ef15ffd-5a34-427a-a1a8-88afd01b1998","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"ui-component","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"b7e1c1251cb95add06d41b2933ce074f15c73f60","skill_md_path":"skills/ui-component/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-component"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"ui-component","description":"Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/ui-component"},"updatedAt":"2026-04-22T06:52:04.109Z"}}