SkillHub

Skills ibelick ui-skills

baseline-ui

Use it when:
An agent's UI code looks generic and you want firm rules for it, or a file checked against them.
It does:
Applies MUST, SHOULD and NEVER rules on stack, components, interaction, animation, typography, layout, performance and visual design.
You get:
UI work that follows the rules for the rest of the conversation, or a review quoting each violation with a suggested code-level fix.
Assumes:
Tailwind CSS defaults, motion/react, the cn helper and accessible primitives such as Base UI, React Aria or Radix.

Assumes Tailwind CSS, motion/react for JavaScript animation and the cn helper built on clsx and tailwind-merge.

TL;DR

Ibelick's baseline against AI slop, the generic look of model-written interfaces. A sample of its rules: no animation unless asked, only transform and opacity animated, and no more than 200ms for interaction feedback; h-dvh instead of h-screen, and safe-area insets for fixed elements; text-balance for headings, text-pretty for body text and tabular-nums for data; a fixed z-index scale; no gradients unless asked and never purple or multicolor ones, no glow as the main affordance, one accent color per view; an AlertDialog for destructive actions, errors shown next to the action, and paste never blocked; aria-label on icon-only buttons and no hand-built keyboard or focus behavior; no useEffect for what render logic can do. It uses the project's existing components and color tokens first. Called alone, it applies the rules to all UI work in the conversation; called with a file, it lists each violation with the exact line, one sentence on why it matters and a suggested code-level fix.

Summarizes the skill at 00db7d6.

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

skills.sh pageSource on GitHubAll skills from ibelick/ui-skills

Total Downloads
26,000 on skills.sh, Nov 9, 2026
Repo stars
10,844 ibelick/ui-skills
First seen
Jan 22, 2026 on skills.sh
Weekly Downloads
894
+21% over the 8 weeks to Nov 9
Weekly values
Week toInstalls
Sep 21736
Sep 28666
Oct 5584
Oct 12530
Oct 19804
Oct 261,337
Nov 2855
Nov 9894
Category
category:designcategory:software-engineering

Taste for interfaces that don't look generated: direction, motion and accessibility.

Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type
type:guidelines

Knowledge and rules the agent applies while it works: best practices, design principles, API references.
Effect
effect:none

Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code.
Needs
needs:none

Instructions only. Works in any agent that supports skills.
Publisher
by:community

Everyone else. Unverified vendor claims default to community.
Topics
designanti-slopanimationaccessibilitycode-review
Stack
stack:tailwindstack:react

SKILL.md

From ibelick/ui-skills at 00db7d6. Checked daily, last changed Nov 6, 2026.

Frontmatter
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

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