mcpField
B
baseline-ui

baseline-ui

github.com/podoDesign & UI29176 installsUpdated 4d ago
Repository

About baseline-ui

baseline-ui is a UI skill from ibelick/ui-skills that applies a set of constraints to interface work and reviews files for violations. It focuses on Tailwind-based web UI, covering accessibility-minded interactions, motion, typography, layout, and performance.

Key features

  1. 01Applies UI design constraints
  2. 02Flags violations with code snippets
  3. 03Explains issues and suggests fixes
  4. 04Covers motion, typography, and layout
  5. 05Addresses performance and interaction patterns

Use cases

  1. 01Applying a consistent baseline during UI work
  2. 02Reviewing a file for design-rule violations
  3. 03Finding concrete fixes for Tailwind UI issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill baseline-ui

After installing, type/baseline-uiin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

baseline-ui

Catalogue stub — full skill: ibelick/ui-skills

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/baseline-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/baseline-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as baseline-ui, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/baseline-ui ] && echo "global" || echo "project"

    Global:

    npx skills add ibelick/ui-skills --skill baseline-ui -g -y

    Project:

    npx skills add ibelick/ui-skills --skill baseline-ui -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: MIT

Invoke after install

  • Skill name: baseline-ui
  • Slash commands: /baseline-ui (apply the baseline to UI work in this conversation), /baseline-ui <file> (review a file and list violations with fixes)
  • Trigger phrases: "baseline UI", "animation validation", "typography scale", "Tailwind anti-patterns"

What it does

Applies an opinionated UI baseline to prevent AI-generated interface slop. The rules are written as MUST / SHOULD / NEVER constraints covering the Tailwind CSS stack, accessible component primitives, interaction patterns (destructive-action dialogs, loading skeletons, safe areas), animation limits (compositor-only properties, short feedback durations, reduced motion), typography (balanced headings, tabular numbers), layout (fixed z-index scale), performance, and design restraint (no purple gradients, no glow as the primary affordance). Given a file, it reports each violation with the offending snippet, why it matters, and a concrete fix.

When NOT to use

  • Full WCAG audits or keyboard and screen-reader fixes → use accessibility-catalogue
  • Non-Tailwind or non-web UI (SwiftUI, Android) → use swiftui-design-skill or material-3-skill
  • Persistent critique commands and a larger design toolchain → use impeccable

Comments

Markdown supported