{"id":"3d1b89af-c8e5-413b-a80b-d5267ba6a32b","shortId":"6SXtKc","kind":"skill","title":"ui-pattern","tagline":"Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.","description":"# UI Pattern\n\n## Overview\n\nPart of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc.\n\n## When to Use\n- Use when you need a reusable layout pattern rather than a one-off page section\n- Use when a page repeats the same arrangement of cards, rows, filters, or data blocks\n- Use when you want to build from existing StyleSeed primitives instead of copying markup\n- Use when you want a pattern component with props for dynamic content\n\n## How It Works\n\n### Step 1: Identify the Pattern Type\n\nCommon pattern families include:\n- card section\n- two-column grid\n- horizontal scroller\n- list section\n- form section\n- stat grid\n- data table\n- detail card\n- chart card\n- filter bar\n- action sheet\n\n### Step 2: Read the Available Building Blocks\n\nInspect both:\n- `components/ui/` for primitives\n- `components/patterns/` for neighboring patterns that can be extended\n\nThe goal is composition, not duplication.\n\n### Step 3: Apply StyleSeed Layout Rules\n\nKeep the Toss seed defaults intact:\n- card surfaces on semantic tokens\n- rounded corners from the system scale\n- shadow tokens instead of improvised shadow values\n- consistent internal padding\n- section wrappers that align with the page margin system\n\n### Step 4: Make the Pattern Dynamic\n\nExpose data through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small.\n\n### Step 5: Keep the Pattern Reusable Across Pages\n\nAvoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern.\n\n## Output\n\nProvide:\n1. The generated pattern component\n2. The target location\n3. Expected props and usage example\n4. Notes on which existing primitives were reused\n\n## Best Practices\n\n- Start from the smallest existing building block that solves the problem\n- Keep container, section, and item responsibilities separate\n- Use tokens and spacing rules consistently\n- Prefer extending a pattern over adding a near-duplicate sibling\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-pattern/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":["pattern","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-pattern","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-pattern","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 (2,798 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.327Z","embedding":null,"createdAt":"2026-04-18T21:46:42.017Z","updatedAt":"2026-04-22T06:52:04.327Z","lastSeenAt":"2026-04-22T06:52:04.327Z","tsv":"'/bitjaru/styleseed)':373 '/bitjaru/styleseed),':30 '/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/skill.md)':378 '1':136,307 '2':170,312 '3':196,316 '4':238,322 '5':264 'across':60,269 'action':167 'ad':70,361 'addit':367 'align':231 'api':259 'appear':59 'appli':197 'arrang':98 'ask':412 'assumpt':275 'avail':173 'avoid':271 'bar':166 'belong':296 'best':330 'block':52,105,175,338 'boundari':420 'build':33,111,174,337 'card':10,48,100,145,162,164,207 'chart':16,56,163 'clarif':414 'clear':387 'column':149 'common':141 'compon':126,300,311 'components/patterns':181 'components/ui':178 'compos':35 'composit':192 'consist':225,355 'contain':344 'content':131,250 'copi':118 'corner':213 'criteria':423 'data':104,159,244 'default':205 'deliber':67 'describ':391 'detail':161 'duplic':194,365 'dynam':130,242 'environ':403 'environment-specif':402 'exampl':321 'exist':113,326,336 'expect':317 'expert':408 'explicit':260,279 'expos':243 'extend':188,357 'famili':143 'filter':102,165 'form':14,51,155 'generat':4,309 'github.com':29,372,377 'github.com/bitjaru/styleseed)':371 'github.com/bitjaru/styleseed),':28 'github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/skill.md)':376 'goal':190 'grid':12,50,150,158 'hardcod':249 'hoc':71 'horizont':151 'identifi':137 'improvis':222 'includ':144 'input':417 'inspect':176 'instead':116,220,247 'intact':206 'intend':44 'intern':226 'item':347 'keep':201,257,265,343 'layout':81,199 'like':47 'limit':379 'list':13,49,54,153 'locat':315 'look':66 'make':239 'margin':235 'markup':119,288 'match':388 'miss':425 'multipl':61,255 'near':364 'near-dupl':363 'need':64,78 'neighbor':183 'note':323 'one':87,283,292 'one-off':86,282 'output':305,397 'overview':24 'pad':227 'page':62,89,94,234,270,273,299 'page-specif':272 'part':25 'pattern':3,7,23,36,82,125,139,142,184,241,253,267,304,310,359 'permiss':418 'practic':331 'prefer':356 'primit':21,41,115,180,327 'probabl':295 'problem':342 'prop':128,246,318 'provid':306 'rank':53 'rather':68,83 'read':171 'repeat':95 'repositori':370 'requir':416 'resourc':368 'respons':348 'reus':329 'reusabl':5,34,80,268 'review':409 'round':212 'rout':293 'row':101 'rule':200,354 'safeti':419 'scale':217 'scope':390 'scroller':152 'section':11,46,90,146,154,156,228,285,345 'seed':39,204 'semant':210 'separ':349 'shadow':218,223 'share':303 'sheet':168 'sibl':366 'skill':32,375,382 'skill-ui-pattern' 'small':262 'smallest':335 'solv':340 'sourc':374 'source-sickn33' 'space':353 'specif':274,404 'start':332 'stat':157 'step':135,169,195,237,263 'stop':410 'stylese':19,27,114,198,369 'substitut':400 'success':422 'surfac':208 'system':216,236 'tabl':160 'target':314 'task':386 'test':406 'token':211,219,351 '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':20,203 'treat':395 'two':148 'two-column':147 'type':140 'ui':2,6,22 'ui-pattern':1 'unless':276 'usag':320 'use':18,74,75,91,106,120,350,380 'user':278 'valid':405 'valu':224 'variant':256 'want':109,123,280 'work':134,290 'wrapper':17,57,229","prices":[{"id":"e71094f6-e4ea-4a00-8ee7-c2d1299e1dbd","listingId":"3d1b89af-c8e5-413b-a80b-d5267ba6a32b","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:42.017Z"}],"sources":[{"listingId":"3d1b89af-c8e5-413b-a80b-d5267ba6a32b","source":"github","sourceId":"sickn33/antigravity-awesome-skills/ui-pattern","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-pattern","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:42.017Z","lastSeenAt":"2026-04-22T06:52:04.327Z"}],"details":{"listingId":"3d1b89af-c8e5-413b-a80b-d5267ba6a32b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"ui-pattern","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":"9104fdf35f1da2a733184412725aaac038b78756","skill_md_path":"skills/ui-pattern/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-pattern"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"ui-pattern","description":"Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/ui-pattern"},"updatedAt":"2026-04-22T06:52:04.327Z"}}