agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/baseline-ui/SKILL.md

baseline-ui

Skill32 starsChanged 6 months agoMITView on GitHub

Opinionated UI baseline that deslops AI-generated interfaces: fixes spacing, hierarchy, typography, and small layout issues, and enforces Tailwind CSS, component, interaction, and animation rules. Use as a fast cleanup or polish pass.

17 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use fixing-metadata, improve-ui and 8 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • agentset-aiSkill

    fixing-metadata

    Ship correct, complete metadata.

    Also in 9 projects that use this

  • Discriminative-shoji607Skill

    improve-ui

    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.

    Also in 4 projects that use this

  • Discriminative-shoji607Skill

    ui-skills-root

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

    Also in 3 projects that use this

  • ItamarZand88Skill

    create-design-md

    Create a new DESIGN.md file for any website, app, or custom design system. Use when the user wants to document a design system in DESIGN.md format, extract design tokens from a URL or existing CSS, create a custom design system from scratch, author a DESIGN.md for their own project, or contribute a new design to the awesome-design-md collection. Also trigger when user mentions "design system documentation", wants to formalize their app's visual language, or asks to create or generate a DESIGN.md file.

    Also in 3 projects that use this

  • AnasX7Skill

    better-interface

    Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

    Also in 3 projects that use this

  • AnasX7Skill

    better-accessibility

    Helps your project comply with accessibility standards and best practices.

    Also in 3 projects that use this

  • +4 more from AnasX7

The file

Create a free account to mount
Files
SKILL.md

baseline-ui

Catalogue stub — full skill: ibelick/ui-skills

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

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
<!-- das:install:end -->

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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free