MCPInstall

baseline-ui

by ibelickFrontend & Design

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

Installs
24.4K
Last 24h
+195
Trending rank
#1237
Security
Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads baseline-ui automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill provides design and behavioral guidelines for writing high-quality UI code using Tailwind CSS, animation libraries, and accessible component primitives. No malicious code, prompt injection, obfuscation, or data exfiltration vectors were detected.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues
Runlayer PassNONE ·1 file scanned · No issues
ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

Baseline UI

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

How to use

  • /baseline-ui Apply 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 (formerly framer-motion) when JavaScript animation is required
  • SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS
  • MUST use cn utility (clsx + tailwind-merge) for class logic

Components

  • MUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix)
  • MUST use the project’s existing component primitives first
  • NEVER mix primitive systems within the same interaction surface
  • SHOULD prefer Base UI for new primitives if compatible with the stack
  • MUST add an aria-label to icon-only buttons
  • NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

Interaction

  • MUST use an AlertDialog for destructive or irreversible actions
  • SHOULD use structural skeletons for loading states
  • NEVER use h-screen, use h-dvh
  • MUST respect safe-area-inset for fixed elements
  • MUST show errors next to where the action happens
  • NEVER block paste in input or textarea elements

Animation

  • NEVER add animation unless it is explicitly requested
  • MUST animate only compositor props (transform, opacity)
  • NEVER animate layout properties (width, height, top, left, margin, padding)
  • SHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)
  • SHOULD use ease-out on entrance
  • NEVER exceed 200ms for interaction feedback
  • MUST pause looping animations when off-screen
  • SHOULD respect prefers-reduced-motion
  • NEVER introduce custom easing curves unless explicitly requested
  • SHOULD avoid animating large images or full-screen surfaces

Typography

  • MUST use text-balance for headings and text-pretty for body/paragraphs
  • MUST use tabular-nums for data
  • SHOULD use truncate or line-clamp for dense UI
  • NEVER modify letter-spacing (tracking-*) unless explicitly requested

Layout

  • MUST use a fixed z-index scale (no arbitrary z-*)
  • SHOULD use size-* for square elements instead of w-* + h-*

Performance

  • NEVER animate large blur() or backdrop-filter surfaces
  • NEVER apply will-change outside an active animation
  • NEVER use useEffect for anything that can be expressed as render logic

Design

  • NEVER use gradients unless explicitly requested
  • NEVER use purple or multicolor gradients
  • NEVER use glow effects as primary affordances
  • SHOULD use Tailwind CSS default shadow scale unless explicitly requested
  • MUST give empty states one clear next action
  • SHOULD limit accent color usage to one per view
  • SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

FAQ

What does the baseline-ui skill do?

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

How do I install baseline-ui?

Run npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/baseline-ui/ (personal) or .claude/skills/baseline-ui/ (project).

Which AI agents can use baseline-ui?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is baseline-ui safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains baseline-ui?

It is published by ibelick in ibelick/ui-skills. It has 24,408 recorded installs.

More from ibelick/ui-skills

View all →

fixing-motion-performance

ibelick/ui-skills

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

Code Quality & Workflow27K installs

fixing-accessibility

ibelick/ui-skills

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

Frontend & Design22.1K installs

fixing-metadata

ibelick/ui-skills

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

Frontend & Design18.4K installs

improve-ui

ibelick/ui-skills

Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.

Frontend & Design8K installs

ui-skills-root

ibelick/ui-skills

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Frontend & Design7.2K installs

create-design-md

ibelick/ui-skills

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions.

Frontend & Design4.5K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs