{"id":"e0a7c7a0-29e1-49e0-acc4-cc28282f6eb7","shortId":"U8eD65","kind":"skill","title":"ui-page","tagline":"Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.","description":"# UI Page\n\n## Overview\n\nPart of [StyleSeed](https://github.com/bitjaru/styleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.\n\n## When to Use\n- Use when you need a new page in a Toss-seed app\n- Use when you want a consistent page shell, spacing, and navigation structure\n- Use when you are adding a new product flow and need a solid starting layout\n- Use when you want to stay mobile-first even if the project later expands to larger breakpoints\n\n## How It Works\n\n### Step 1: Inspect the Existing Shell\n\nRead the current page scaffolding patterns first, especially:\n- page shell\n- top bar\n- bottom navigation\n- representative pages using the same route family\n\n### Step 2: Define the Page Purpose\n\nClarify:\n- the page name\n- the primary user question the screen answers\n- the top one or two actions the user should take\n\nEvery screen should have one dominant purpose.\n\n### Step 3: Use the Information Pyramid\n\nLay out the page from highest importance to lowest:\n1. Hero or top summary\n2. KPI or key actions\n3. detail cards or supporting modules\n4. lists, history, or secondary content\n\nAvoid repeating the same section type mechanically from top to bottom.\n\n### Step 4: Apply the Toss Layout Rules\n\nDefault layout choices:\n- mobile viewport width around `max-w-[430px]`\n- page background on `bg-background`\n- horizontal padding around `px-6`\n- section rhythm with `space-y-6`\n- generous bottom padding if a bottom nav is present\n- cards using semantic surface tokens, rounded corners, and light shadows\n\n### Step 5: Compose Instead of Rebuilding\n\nUse existing `ui/` and `patterns/` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.\n\n### Step 6: Account for Real Device Constraints\n\n- handle safe-area insets\n- avoid horizontal overflow\n- keep interactive clusters thumb-friendly\n- ensure long content scrolls cleanly without clipping the bottom navigation\n\n## Output\n\nReturn:\n1. The page scaffold\n2. The chosen section structure\n3. Reused components and any newly required components\n4. Empty, loading, and error states that the page will need next\n\n## Best Practices\n\n- Keep the first version structurally correct before adding decoration\n- Use one strong hero instead of multiple competing highlights\n- Preserve navigation consistency across sibling screens\n- Prefer reusable section components when the page will likely repeat\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-page/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":["page","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-page","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-page","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,125 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.229Z","embedding":null,"createdAt":"2026-04-18T21:46:41.256Z","updatedAt":"2026-04-22T06:52:04.229Z","lastSeenAt":"2026-04-22T06:52:04.229Z","tsv":"'-6':273 '/bitjaru/styleseed)':429 '/bitjaru/styleseed),':30 '/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/skill.md)':434 '1':137,212,358 '2':164,217,362 '3':198,222,367 '4':228,246,375 '430px':262 '5':301 '6':280,326 'account':327 'across':410 'action':185,221 'ad':104,396 'addit':423 'answer':179 'app':87 'appli':247 'area':335 'around':258,271 'ask':468 'avoid':234,337 'background':264,268 'bar':61,153 'best':387 'bg':267 'bg-background':266 'block':321 'bottom':62,154,244,282,286,354 'boundari':476 'breakpoint':132 'build':55,320 'card':65,224,290 'choic':254 'chosen':364 'clarif':470 'clarifi':169 'clean':350 'clear':443 'clip':352 'cluster':342 'compet':405 'complet':35 'compon':21,311,369,374,416 'compos':302 'composit':47 'consist':53,93,409 'constraint':331 'content':233,348 'corner':296 'correct':394 'criteria':479 'current':144 'decor':397 'default':252 'defin':165 'describ':447 'detail':223 'devic':330 'disconnect':70 'domin':195 'empti':376 'ensur':346 'environ':459 'environment-specif':458 'error':379 'especi':149 'even':124 'everi':190 'exist':19,58,140,307,319 'expand':129 'expert':464 'famili':162 'first':9,46,123,148,391 'flow':108 'friend':345 'generous':281 'github.com':29,428,433 'github.com/bitjaru/styleseed)':427 'github.com/bitjaru/styleseed),':28 'github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/skill.md)':432 'handl':332 'hero':213,401 'highest':208 'highlight':406 'histori':230 'horizont':269,338 'import':209 'inform':201 'input':473 'inset':336 'inspect':138 'instead':67,303,402 'interact':341 'keep':50,340,389 'key':220 'kpi':218 'larger':131 'later':128 'lay':203 'layout':14,114,250,253 'light':298 'like':421 'limit':435 'list':229 'load':377 'long':347 'lowest':211 'match':444 'max':260 'max-w':259 'mechan':240 'miss':481 'mobil':8,45,122,255 'mobile-first':7,44,121 'modul':227 'multipl':404 'name':172 'nav':287 'navig':63,98,155,355,408 'need':78,110,385 'new':6,80,106,314 'newli':372 'next':386 'one':182,194,399 'orchestr':318 'output':356,453 'overflow':339 'overview':24 'pad':270,283 'page':3,10,23,36,51,81,94,145,150,157,167,171,206,263,315,360,383,419 'part':25 'pattern':15,147,310 'permiss':474 'possibl':313 'practic':388 'prefer':413 'present':289 'preserv':407 'primari':174 'primarili':317 'produc':69 'product':107 'project':127 'purpos':168,196 'px':272 'pyramid':202 'question':176 'read':142 'real':329 'rebuild':305 'recreat':323 'repeat':235,422 'repositori':426 'repres':156 'requir':373,472 'resourc':424 'return':357 'reus':368 'reusabl':414 'review':465 'rhythm':17,66,275 'round':295 'rout':161 'rule':48,251 'safe':334 'safe-area':333 'safeti':475 'scaffold':4,33,146,361 'scope':446 'screen':38,178,191,412 'scroll':349 'secondari':232 'section':16,71,238,274,365,415 'seed':42,86 'semant':292 'shadow':299 'shell':20,59,95,141,151 'sibl':411 'skill':32,431,438 'skill-ui-page' 'solid':112 'sourc':430 'source-sickn33' 'space':96,278 'space-i':277 'specif':460 'start':113 'state':380 'stay':120 'step':136,163,197,245,300,325 'stop':466 'strong':400 'structur':52,99,366,393 'stylese':12,27,425 'substitut':456 'success':478 'summari':216 'support':226 'surfac':293 'take':189 'task':442 'test':462 'thumb':344 'thumb-friend':343 'token':294 'top':60,152,181,215,242 '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':13,41,85,249 'toss-se':84 'treat':451 'two':184 'type':239 'ui':2,22,308 'ui-pag':1 'use':11,39,74,75,88,100,115,158,199,291,306,398,436 'user':175,187 'valid':461 'version':392 'viewport':256 'w':261 'want':91,118 'wherev':312 'width':257 'without':351 'work':135 'y':279","prices":[{"id":"d008d84f-9dab-4a91-a77b-da38e06dbef8","listingId":"e0a7c7a0-29e1-49e0-acc4-cc28282f6eb7","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:41.256Z"}],"sources":[{"listingId":"e0a7c7a0-29e1-49e0-acc4-cc28282f6eb7","source":"github","sourceId":"sickn33/antigravity-awesome-skills/ui-page","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-page","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:41.256Z","lastSeenAt":"2026-04-22T06:52:04.229Z"}],"details":{"listingId":"e0a7c7a0-29e1-49e0-acc4-cc28282f6eb7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"ui-page","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":"8ae56ba93020b70a3f6b177971c829411578b515","skill_md_path":"skills/ui-page/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-page"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"ui-page","description":"Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/ui-page"},"updatedAt":"2026-04-22T06:52:04.229Z"}}