ibelick/ui-skills

Overview

This skill enforces an opinionated UI baseline to prevent AI-generated interface slop. It applies consistent Tailwind defaults, accessible primitives, and strict animation and interaction rules. Use it to audit or automatically constrain agent-created UI so interfaces remain predictable, performant, and accessible.

How this skill works

Run the skill against a conversation or a specific file to validate UI code against the baseline rules. The skill flags violations, explains why each matters in one sentence, and proposes concrete, code-level fixes. It also enforces stack choices (Tailwind defaults, motion/react, cn utility) and component/interaction patterns (accessible primitives, AlertDialog, safe-area handling).

When to use it

• When agents generate UI markup or components and you need consistency and accessibility
• Before merging agent-authored UI into a shared codebase
• During design-to-code handoff to ensure implementation follows platform constraints
• When animating or adding interaction to prevent costly performance regressions
• When onboarding new AI skills that produce UI to enforce a shared baseline

Best practices

• Prefer project’s existing primitives; only introduce new ones when necessary
• Use Tailwind defaults unless a custom token already exists or was requested
• Keep animations limited to transform and opacity and respect prefers-reduced-motion
• Add aria-labels to icon-only buttons and use library primitives for keyboard behavior
• Place errors adjacent to the action and provide a clear next step for empty states

Example use cases

• Run /baseline-ui on a conversation to apply baseline constraints to all subsequent UI work
• Audit a component file to get line-by-line violations with one-sentence rationale and a code fix
• Enforce safe-area handling and h-dvh usage for all fixed headers and footers
• Validate animation choices to ensure no layout or paint properties are being animated
• Confirm typography rules like text-balance, text-pretty, and tabular-nums are applied across views