ui-style-compliance
UI Style Compliance
Overview
Apply a strict UI compliance checklist to React-based UI work so outputs match the UI Skills constraints without adding unrequested styling or interaction behavior.
Priority: This skill is a compliance gate. When it conflicts with other UI skills (e.g., animation or styling), these rules take precedence.
Scope
Use this skill for UI design, UI review, or implementation review in Next.js, Vite, Remix, or Astro projects. It is a compliance gate, not a creativity prompt.
Quick Checklist
- Confirm stack rules (Tailwind defaults, motion/react, tw-animate-css, cn).
- Confirm component primitive rules (accessibility, no mixing systems, aria-labels).
- Confirm interaction rules (AlertDialog, skeletons, h-dvh, safe-area, errors, paste).
- Confirm animation rules (only when requested, compositor-only, timing, reduced motion).
- Confirm typography rules (text-balance, text-pretty, tabular-nums, no tracking).
More from dereknex/skills
web-guidelines
Use when designing, reviewing, or implementing web UIs and you need concrete MUST/SHOULD/NEVER rules for accessibility, interaction patterns, forms, layout, animation, performance, content, or visual design decisions. Also use when asked to "review my UI", "check accessibility", or "audit design".
11web-interface-guidelines
Use when designing, reviewing, or implementing web UIs and you need concrete MUST/SHOULD/NEVER rules for accessibility, interaction patterns, forms, layout, animation, performance, content, or visual design decisions.
8seo-optimizer
Use when optimizing website content, improving search rankings, conducting keyword research, or implementing technical SEO best practices.
8animation-designer
Use when the user explicitly requests animations, transitions, or motion design for a web UI.
6frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
6seo
SEO auditing, optimization, and implementation. Use when auditing sites for SEO issues, optimizing content for search, conducting keyword research, implementing technical SEO, or improving organic search performance. For automated crawl-based audits with 230+ rules, use audit-website instead.
5