Agent Skills
› NeverSight/learn-skills.dev
› ui-skills
ui-skills
GitHub提供构建优质界面的约束指南，涵盖Tailwind CSS、组件库选择、交互规范、动画性能及设计原则。适用于前端开发、UI实现及代码审查场景。
Trigger Scenarios
UI
界面
前端
组件
animation
动画
layout
布局
Install
npx skills add NeverSight/learn-skills.dev --skill ui-skills -g -y
SKILL.md
Frontmatter
{
"name": "ui-skills",
"description": "Opinionated constraints for building better interfaces with agents. Apply when writing UI code, implementing designs, or reviewing frontend components. Use within DevDocs workflow during development phase for UI-related tasks. Triggers on keywords like \"UI\", \"界面\", \"前端\", \"组件\", \"animation\", \"动画\", \"layout\", \"布局\".",
"allowed-tools": "Read, Write, Glob, Grep, Edit, Bash, AskUserQuestion"
}
UI Skills
构建更好界面的意见约束。在 DevDocs 流程开发阶段实现 UI 相关任务时应用此 skill。
Language
- Accept questions in both Chinese and English
- Always respond in Chinese
Stack
- MUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values
- MUST use
motion/react(formerlyframer-motion) when JavaScript animation is required - SHOULD use
tw-animate-cssfor entrance and micro-animations in Tailwind CSS - MUST use
cnutility (clsx+tailwind-merge) for class logic
Components
- MUST use accessible component primitives for anything with keyboard or focus behavior (
Base UI,React Aria,Radix) - MUST use the project’s existing component primitives first
- NEVER mix primitive systems within the same interaction surface
- SHOULD prefer
Base UIfor new primitives if compatible with the stack - MUST add an
aria-labelto icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
Interaction
- MUST use an
AlertDialogfor destructive or irreversible actions - SHOULD use structural skeletons for loading states
- NEVER use
h-screen, useh-dvh - MUST respect
safe-area-insetfor fixed elements - MUST show errors next to where the action happens
- NEVER block paste in
inputortextareaelements
Animation
- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (
transform,opacity) - NEVER animate layout properties (
width,height,top,left,margin,padding) - SHOULD avoid animating paint properties (
background,color) except for small, local UI (text, icons) - SHOULD use
ease-outon entrance - NEVER exceed
200msfor interaction feedback - MUST pause looping animations when off-screen
- MUST respect
prefers-reduced-motion - NEVER introduce custom easing curves unless explicitly requested
- SHOULD avoid animating large images or full-screen surfaces
Typography
- MUST use
text-balancefor headings andtext-prettyfor body/paragraphs - MUST use
tabular-numsfor data - SHOULD use
truncateorline-clampfor dense UI - NEVER modify
letter-spacing(tracking-) unless explicitly requested
Layout
- MUST use a fixed
z-indexscale (no arbitraryz-x) - SHOULD use
size-xfor square elements instead ofw-x+h-x
Performance
- NEVER animate large
blur()orbackdrop-filtersurfaces - NEVER apply
will-changeoutside an active animation - NEVER use
useEffectfor anything that can be expressed as render logic
Design
- NEVER use gradients unless explicitly requested
- NEVER use purple or multicolor gradients
- NEVER use glow effects as primary affordances
- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
- MUST give empty states one clear next action
- SHOULD limit accent color usage to one per view
- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones
Version History
- e0220ca Current 2026-07-05 22:16
