{"id":"93fe637a-5263-4ad1-8372-fce5ef9cf861","shortId":"LEJnSD","kind":"skill","title":"baseline-ui","tagline":"Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.","description":"# Baseline UI\n\nEnforces an opinionated UI baseline to prevent AI-generated interface slop.\n\n## When to Use\n- You are building or reviewing Tailwind-based UI and want a strict baseline for accessibility, motion, typography, and layout.\n- The task is to prevent generic or sloppy AI-generated interface decisions before they spread through the codebase.\n- You need concrete UI constraints to apply to a file review or an ongoing frontend implementation.\n\n## How to use\n\n- `/baseline-ui`\n  Apply these constraints to any UI work in this conversation.\n\n- `/baseline-ui <file>`\n  Review the file against all constraints below and output:\n  - violations (quote the exact line/snippet)\n  - why it matters (1 short sentence)\n  - a concrete fix (code-level suggestion)\n\n## Stack\n\n- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested\n- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required\n- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS\n- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic\n\n## Components\n\n- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)\n- MUST use the project’s existing component primitives first\n- NEVER mix primitive systems within the same interaction surface\n- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack\n- MUST add an `aria-label` to icon-only buttons\n- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested\n\n## Interaction\n\n- MUST use an `AlertDialog` for destructive or irreversible actions\n- SHOULD use structural skeletons for loading states\n- NEVER use `h-screen`, use `h-dvh`\n- MUST respect `safe-area-inset` for fixed elements\n- MUST show errors next to where the action happens\n- NEVER block paste in `input` or `textarea` elements\n\n## Animation\n\n- NEVER add animation unless it is explicitly requested\n- MUST animate only compositor props (`transform`, `opacity`)\n- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)\n- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)\n- SHOULD use `ease-out` on entrance\n- NEVER exceed `200ms` for interaction feedback\n- MUST pause looping animations when off-screen\n- SHOULD respect `prefers-reduced-motion`\n- NEVER introduce custom easing curves unless explicitly requested\n- SHOULD avoid animating large images or full-screen surfaces\n\n## Typography\n\n- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs\n- MUST use `tabular-nums` for data\n- SHOULD use `truncate` or `line-clamp` for dense UI\n- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested\n\n## Layout\n\n- MUST use a fixed `z-index` scale (no arbitrary `z-*`)\n- SHOULD use `size-*` for square elements instead of `w-*` + `h-*`\n\n## Performance\n\n- NEVER animate large `blur()` or `backdrop-filter` surfaces\n- NEVER apply `will-change` outside an active animation\n- NEVER use `useEffect` for anything that can be expressed as render logic\n\n## Design\n\n- NEVER use gradients unless explicitly requested\n- NEVER use purple or multicolor gradients\n- NEVER use glow effects as primary affordances\n- SHOULD use Tailwind CSS default shadow scale unless explicitly requested\n- MUST give empty states one clear next action\n- SHOULD limit accent color usage to one per view\n- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones\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":["baseline","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity-skills"],"capabilities":["skill","source-sickn33","skill-baseline-ui","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/baseline-ui","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 · 34928 github stars · SKILL.md body (3,906 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-24T18:50:35.327Z","embedding":null,"createdAt":"2026-04-18T21:33:23.188Z","updatedAt":"2026-04-24T18:50:35.327Z","lastSeenAt":"2026-04-24T18:50:35.327Z","tsv":"'/baseline-ui':113,124 '/react/components)':247 '1':142 '200ms':379 'accent':548 'access':12,70,208 'action':287,320,545 'activ':494 'add':257,332 'afford':527 'ai':48,84 'ai-gener':47,83 'alertdialog':282 'alreadi':161 'anim':5,176,183,190,330,333,340,347,358,386,407,479,495 'anti':17 'anti-pattern':16 'anyth':212,500 'appli':100,114,488 'arbitrari':465 'area':308 'aria':221,260 'aria-label':259 'ask':601 'avoid':357,406 'backdrop':484 'backdrop-filt':483 'background':361 'balanc':420 'base':62,218,243 'base-ui.com':246 'base-ui.com/react/components)':245 'baselin':2,38,44,68 'baseline-ui':1 'behavior':217,272 'block':323 'blur':481 'body/paragraphs':428 'boundari':609 'build':25,57 'button':266 'chang':491 'check':10 'clamp':442 'clarif':603 'class':203 'clear':543,576 'clsx':198 'cn':196 'code':149 'code-level':148 'codebas':93 'color':362,549,562 'compat':252 'compon':11,27,205,209,229 'compositor':342 'concret':96,146 'consist':37 'constraint':98,116,130 'convers':123 'criteria':612 'css':21,29,156,184,193,531,561 'curv':401 'custom':159,399 'data':435 'decis':87 'default':157,532 'dens':444 'describ':580 'design':36,508 'destruct':284 'durat':6 'dvh':303 'eas':373,400 'ease-out':372 'effect':524 'element':312,329,472 'empti':540 'enforc':7,35,40 'entranc':186,376 'environ':592 'environment-specif':591 'error':315 'exact':137 'exceed':378 'except':363 'exist':162,228,557 'expert':597 'explicit':165,276,337,403,453,513,536 'express':504 'feedback':382 'file':103,127 'filter':485 'first':231 'fix':147,311,459 'focus':216,271 'former':170 'framer':172 'framer-mot':171 'frontend':108 'full':412 'full-screen':411 'generat':49,85 'generic':80 'give':539 'glow':523 'gradient':511,520 'h':298,302,476 'h-dvh':301 'h-screen':297 'hand':274 'happen':321 'head':422 'height':351 'icon':264,369 'icon-on':263 'imag':409 'implement':109 'index':462 'input':326,606 'inset':309 'instead':473 'interact':239,278,381 'interfac':50,86 'introduc':398,565 'irrevers':286 'javascript':175 'keyboard':214,269 'label':261 'larg':408,480 'layout':15,74,348,455 'left':353 'letter':449 'letter-spac':448 'level':150 'limit':547,568 'line':441 'line-clamp':440 'line/snippet':138 'load':293 'local':366 'logic':204,507 'loop':385 'margin':354 'match':577 'matter':141 'merg':201 'micro':189 'micro-anim':188 'miss':614 'mix':233 'modifi':447 'motion':71,173,396 'motion/react':169 'multicolor':519 'must':153,167,194,206,223,256,279,304,313,339,383,416,429,456,538 'need':95 'never':232,267,295,322,331,346,377,397,446,478,487,496,509,515,521 'new':249,566 'next':316,544 'num':433 'off-screen':388 'one':542,552,567 'ongo':107 'opac':345 'opinion':42 'output':133,586 'outsid':492 'pad':355 'paint':359 'past':324 'pattern':18 'paus':384 'per':553 'perform':477 'permiss':607 'prefer':242,394 'prefers-reduced-mot':393 'pretti':426 'prevent':14,46,79 'primari':526 'primit':210,230,234,250 'project':22,226 'prop':343 'properti':349,360 'purpl':517 'quot':135 'radix':222 'react':32,220 'rebuild':268 'reduc':395 'render':506 'request':166,277,338,404,454,514,537 'requir':178,605 'respect':305,392 'review':28,59,104,125,598 'safe':307 'safe-area-inset':306 'safeti':608 'scale':9,463,534 'scope':579 'screen':299,390,413 'sentenc':144 'shadow':533 'short':143 'show':314 'size':469 'skeleton':291 'skill':571 'skill-baseline-ui' 'slop':51 'sloppi':82 'small':365 'source-sickn33' 'space':450 'specif':593 'spread':90 'squar':471 'stack':152,255 'state':294,541 'stop':599 'strict':67 'structur':290 'style':31 'substitut':589 'success':611 'suggest':151 'surfac':240,414,486 'system':235 'tabular':432 'tabular-num':431 'tailwind':20,61,155,192,200,530,560 'tailwind-bas':60 'tailwind-merg':199 'task':76,575 'test':595 'text':368,419,425 'text-bal':418 'text-pretti':424 'textarea':328 'theme':558 'token':563 'top':352 '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' 'track':451 'transform':344 'treat':584 'truncat':438 'tw':182 'tw-animate-css':181 'typographi':8,72,415 'ui':3,26,39,43,63,97,119,219,244,367,445 'unless':158,275,334,402,452,512,535 'usag':550 'use':23,54,112,154,168,180,195,207,224,280,289,296,300,371,417,430,437,457,468,497,510,516,522,529,556,569 'useeffect':498 'util':30,197 'valid':4,594 'valu':160 'view':33,554 'violat':134 'w':475 'want':65 'width':350 'will-chang':489 'within':236 'work':120 'z':461,466 'z-index':460","prices":[{"id":"8099680a-4d89-4c96-9475-c5a6b9dc4b34","listingId":"93fe637a-5263-4ad1-8372-fce5ef9cf861","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:33:23.188Z"}],"sources":[{"listingId":"93fe637a-5263-4ad1-8372-fce5ef9cf861","source":"github","sourceId":"sickn33/antigravity-awesome-skills/baseline-ui","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/baseline-ui","isPrimary":false,"firstSeenAt":"2026-04-18T21:33:23.188Z","lastSeenAt":"2026-04-24T18:50:35.327Z"}],"details":{"listingId":"93fe637a-5263-4ad1-8372-fce5ef9cf861","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"baseline-ui","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34928,"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-24T06:41:17Z","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":"c9e92147cdedaf380807d7961f2ff9b65746fde3","skill_md_path":"skills/baseline-ui/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/baseline-ui"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"baseline-ui","description":"Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/baseline-ui"},"updatedAt":"2026-04-24T18:50:35.327Z"}}