[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-31d63d7f-921e-43d5-a3ec-e1ed0c7b3b39":3,"$fvfMk092YI-kJw8eKSQzy9qiu-FKgjmJIXnxHhOcAN2M":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"31d63d7f-921e-43d5-a3ec-e1ed0c7b3b39","baseline-ui","验证动画持续时间，强制字体缩放，检查组件可访问性，并在Tailwind CSS项目中防止布局反模式。在构建UI组件、审查CSS工具、设计React视图或强制设计一致性时使用。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: baseline-ui\ndescription: 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.\nrisk: unknown\nsource: community\n---\n\n# 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- `\u002Fbaseline-ui`\n  Apply these constraints to any UI work in this conversation.\n\n- `\u002Fbaseline-ui \u003Cfile>`\n  Review the file against all constraints below and output:\n  - violations (quote the exact line\u002Fsnippet)\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\u002Freact` (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:\u002F\u002Fbase-ui.com\u002Freact\u002Fcomponents) 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\u002Fparagraphs\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,103,1814,"2026-05-16 13:08:14",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"7d5d9152-5ba0-43ce-b9ef-db26988c3d36","1.0.0","baseline-ui.zip",2021,"uploads\u002Fskills\u002F31d63d7f-921e-43d5-a3ec-e1ed0c7b3b39\u002Fbaseline-ui.zip","04b29172c0167e3c2c3ccc404c06ef96fa00d5fdbd482e2f5139a006386768dc","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":4243}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]