Baseline UI

Opinionated Tailwind/React MUST-NEVER checklist against AI-generated UI slop.

Tested · Works

Test report

Verdict
Tested · Works
Score
9.6/10
Tested
Jul 16, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 889e1f0

Ran it against a deliberately messy Tailwind card component: the skill caught 8 rule-cited violations (purple gradient, h-screen, missing aria-label on an icon button, a 400ms width/height transition, blocked paste, unjustified tracking-widest, no AlertDialog on a destructive action) each with an exact fix, versus a generic review that only flagged 4 of them vaguely.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 5/5

What Baseline UI does

A rule list (not a script) that enforces Tailwind CSS + motion/react conventions: animation duration caps, compositor-only animation props, accessible primitives, aria-labels on icon buttons, AlertDialog for destructive actions, and banned patterns like gradients, h-screen, and blocked paste. Triggers when building or reviewing React/Tailwind UI components.

How to install Baseline UI

git clone https://github.com/master5d/claude-design-skills
mkdir -p ~/.claude/skills
cp -r claude-design-skills/skills/baseline-ui ~/.claude/skills/baseline-ui

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Baseline UI

  • /baseline-ui Opinionated Tailwind/React MUST-NEVER checklist against AI-generated UI slop.

It also activates on plain-language prompts like these:

  • Review this React component against our Tailwind must-never rules
  • Check this UI for banned gradients, missing aria-labels, and h-screen
  • Does this destructive delete button need an AlertDialog confirmation?

Frequently asked questions

Is the Baseline UI skill free?
Yes. The skill itself is free from master5d/claude-design-skills. SkillProof publishes the install command and an independent test verdict at no cost.
Does Baseline UI work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 16, 2026. Verdict: Tested · Works. Ran it against a deliberately messy Tailwind card component: the skill caught 8 rule-cited violations (purple gradient, h-screen, missing aria-label on an icon button, a 400ms width/height transition, blocked paste, unjustified tracking-widest, no AlertDialog on a destructive action) each with an exact fix, versus a generic review that only flagged 4 of them vaguely.
What is the Baseline UI SkillProof Score?
9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
How do I install Baseline UI?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Baseline UI with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.