Baseline UI
A compact list of MUST and NEVER rules for UI code, covering components, interaction, animation, typography and layout, to clean up generic output fast.
$ npx skills add https://craftwork.design/skills/baseline-ui -a claude-code -y
Installs into .claude/skills/baseline-ui. Add -g for every project.
SKILL.md
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
How to use
-
/baseline-uiApply these constraints to any UI work in this conversation. -
/baseline-ui <file>Review the file against all constraints below and output:- violations (quote the exact line/snippet)
- why it matters (1 short sentence)
- a concrete fix (code-level suggestion)
Stack
- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
- MUST use
motion/react(formerlyframer-motion) when JavaScript animation is required - SHOULD use
tw-animate-cssfor entrance and micro-animations in Tailwind CSS
