메뉴
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, or enforcing design consistency.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Making changes to the app's functionality.
Create Criterion benchmarks with proper group macros and configuration. Use when writing benchmarks, creating benchmark groups, using criterion_group! and criterion_main! macros, setting throughput, or benchmarking multiple implementations. Handles benchmark groups, throughput metrics, conditional compilation, and proper black_box usage.
Read and parse GitHub issues; extract title, body, labels, checklists, and acceptance criteria to support triage and delegation.
Apply cognitive and perception-based UI principles from Laws of UX. Use when evaluating layout, interaction design, target size and distance, choice count, information grouping, memory load, or response time. Cites specific laws (e.g. Fitts's Law, Hick's Law) to justify design decisions or suggest improvements.
Work with async/await, futures, and asynchronous Rust code. Use when writing async functions, working with tokio or async-std, understanding futures, or implementing async traits. Handles async/await syntax, futures, executors, pinning, Send/Sync bounds, and async patterns.
Use std::hint::black_box correctly in benchmarks and tests. Use when writing benchmarks, preventing compiler optimizations, or ensuring code actually executes. Handles proper placement, when to use it, and common patterns for benchmarking.
| 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, or enforcing design consistency. |
Enforces an opinionated UI baseline to prevent AI-generated interface slop. Framework-agnostic; applies to any stack using Tailwind CSS and semantic HTML.
/baseline-ui
Apply these constraints to any UI work in this conversation.
/baseline-ui <file>
Review the file against all constraints below and output:
@keyframes) or the project’s chosen animation approach for entrance and micro-animationsclsx + tailwind-merge, or the project’s equivalent) for conditional or merged class logicclsx (or the project’s class merge utility) to merge utility classes passed into componentsaria-label (or visible text) to icon-only buttonsh-screen, use h-dvh (or equivalent) for viewport heightsafe-area-inset for fixed elementsinput or textarea elementstransform, opacity)translate, rotate, and scale properties over the transform shorthand; they are composable and more predictably orderedwidth, height, top, left, margin, padding)background, color) except for small, local UI (text, icons)ease-out on entrance200ms for interaction feedbackprefers-reduced-motiontext-balance for headings and text-pretty for body/paragraphstabular-nums for datatruncate or line-clamp for dense UIletter-spacing (tracking-*) unless explicitly requestedz-index scale (no arbitrary z-*)size-* for square elements instead of w-* + h-*blur() or backdrop-filter surfaceswill-change outside an active animation