New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Baseline UI

by ibelick in ibelick/ui-skills

Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

MITAuto-check passedFrontend & Design

Install Baseline UI

skills CLI
$ npx skills add ibelick/ui-skills --skill baseline-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ibelick/ui-skills baseline-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ibelick/ui-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/baseline-ui .claude/skills/baseline-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
baseline-ui
GitHub stars
9.5k
Used in
8 other repos
Token cost
~855 tokens
SKILL.md length
420 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

  • Polishing a UI that came out of an AI generation pass
  • SKILL.md covers How to use, Stack, Components and Interaction, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Reviewing a React component file against spacing, typography and animation rules

What it does

The skill has two modes. Invoked on its own, it applies its constraints to all UI work in the conversation. Given a file, it reviews that file and reports each violation with the exact line, a one-sentence reason it matters and a code-level fix. The rules are written as MUST, SHOULD and NEVER statements, aimed at preventing generic AI-made interfaces.

On stack, it expects Tailwind CSS defaults, motion/react when JavaScript animation is needed, tw-animate-css for entrance effects and a cn helper for class logic. Components should use accessible primitives such as Base UI, React Aria or Radix for anything with keyboard or focus behavior, never mix primitive systems, and give icon-only buttons an aria-label. Interaction rules call for an AlertDialog on destructive actions, skeleton loaders, h-dvh instead of h-screen, safe-area insets and errors shown next to the action.

Animation is off unless requested, limited to transform and opacity, kept to 200ms or less for interaction feedback, paused off-screen and aligned with prefers-reduced-motion. Typography uses text-balance on headings, text-pretty on body copy and tabular-nums for data. The excerpt is cut off at the layout rules.

When your agent uses it

  • Polishing a UI that came out of an AI generation pass
  • Reviewing a React component file against spacing, typography and animation rules
  • Replacing h-screen and layout-property animations with safer choices
  • Keeping a new interface on accessible component primitives

Example prompts

  • “/baseline-ui src/components/PricingCard.tsx”
  • “Review the settings page component against the baseline UI rules.”
  • “Clean up the spacing and typography on this dashboard without adding any animation.”

What it can do on your machine

Read from SKILL.md and the folder at commit 587ea30. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • base-ui.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Baseline UI loads about 855 tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 420 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~40
When it runs · the whole SKILL.md, loaded when a task matches
~855

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ibelick/ui-skills at commit 587ea30, republished under its MIT licence (© ibelick). 420 words, ~855 tokens.

Download SKILL.mdSave it as .claude/skills/baseline-ui/SKILL.md (or your agent's skills folder).
name
baseline-ui
description
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

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
Show full SKILL.md (137 more words)Show less

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

© ibelick, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/baseline-ui of ibelick/ui-skills.

Open the folder on GitHubat commit 587ea30

Used in 8 other repositories

We found 17 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 8 other GitHub owners. This page covers the copy in ibelick/ui-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Baseline UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Baseline UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Baseline UI this skillibelick/ui-skills9.5k8 repos~855Automated safety check: PassMIT
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
UI UX Pro MaxOhh-889/skyroc79527 repos~3.6kAutomated safety check: NotesMIT
UI UX Pro MaxOhh-889/skyroc7956 repos~14kAutomated safety check: PassMIT
Ultimate UINeverSight/learn-skills.dev2161 repos~4kAutomated safety check: PassMIT
Design Reviewpproenca/dot-skills215—~3.4kAutomated safety check: PassMIT

Similar skills

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 27 repos~3.6k tokens
    Frontend & DesignAuto-check: notes

  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence for web, mobile, and desktop. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 6 repos~14k tokens
    Frontend & DesignAuto-check passed

  • Ultimate UI

    NeverSight/learn-skills.dev

    A skill your agent uses when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop.

    216 GitHub starsUsed in 1 repo~4k tokens
    Frontend & DesignAuto-check passed

  • Design Review

    pproenca/dot-skills

    Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table.

    215 GitHub stars~3.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

More from ibelick/ui-skills

  • Fixing Motion Performance

    ibelick/ui-skills

    Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.

    9.5k GitHub starsUsed in 5 repos~1.4k tokens
    Auto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.5k GitHub starsUsed in 4 repos~1.2k tokens
    Auto-check passed

  • Improve UI Audit and Plans

    ibelick/ui-skills

    Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.5k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • HTML Metadata Fixer

    ibelick/ui-skills

    Audits and fixes page titles, meta descriptions, canonical URLs, Open Graph and Twitter cards, favicons, JSON-LD and robots directives.

    9.5k GitHub starsUsed in 2 repos~1.1k tokens
    Auto-check passed

  • DESIGN.md Creator

    ibelick/ui-skills

    Writes or updates a DESIGN.md for one product from its repository or a public URL, recording the design language and tokens that the evidence supports.

    9.5k GitHub stars~4k tokensUpdated yesterday
    Auto-check passed

  • UI Skills Router

    ibelick/ui-skills

    Routes UI tasks to the smallest useful set of UI Skills through the ui-skills CLI, picking a category and loading at most three skills before implementing.

    9.5k GitHub starsUsed in 2 repos~362 tokens
    Auto-check passed

Works with

Categories

Questions about Baseline UI

What does Baseline UI do?

Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes. The skill has two modes. Invoked on its own, it applies its constraints to all UI work in the conversation.

When should I use Baseline UI?

Baseline UI fits situations like: polishing a UI that came out of an AI generation pass; reviewing a React component file against spacing, typography and animation rules; replacing h-screen and layout-property animations with safer choices; keeping a new interface on accessible component primitives.

How do I install Baseline UI in Claude Code?

Run `npx skills add ibelick/ui-skills --skill baseline-ui -a claude-code`. Or copy the skill folder (skills/baseline-ui in ibelick/ui-skills) into .claude/skills/baseline-ui in your project. Claude Code loads it when a task matches its description.

How do I install Baseline UI in Codex?

Run `npx skills add ibelick/ui-skills --skill baseline-ui -a codex`. Or copy the skill folder (skills/baseline-ui in ibelick/ui-skills) into .agents/skills/baseline-ui in your project. Codex loads it when a task matches its description.

Can I use Baseline UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ibelick/ui-skills --skill baseline-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/baseline-ui, .gemini/skills/baseline-ui, .github/skills/baseline-ui and .opencode/skills/baseline-ui in your project.

What does Baseline UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Baseline UI is instructions for the agent only.

Does Baseline UI access the network?

SKILL.md names 1 domain. As links in the text: base-ui.com. This is read from the text; nothing was executed.

Is Baseline UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Baseline UI use?

Baseline UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Baseline UI use?

About 855 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Baseline UI?

Skills that share tags, products or a category with Baseline UI: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars) and Ultimate UI (NeverSight/learn-skills.dev, 216 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Baseline UI?

ibelick (a GitHub user) maintains it in ibelick/ui-skills, which has 9,476 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 7, 2026.

Source: ibelick/ui-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.