home / Design / Baseline UI Skill by @sickn33

Baseline UI Skill by @sickn33

FREE

github stars★ 48,690updatedOct 2026repo@sickn33

activity (commits, last 6 months)

6mo ago0

this month1

$git clone https://github.com/sickn33/agentic-awesome-skills

The skill is the skills/baseline-ui folder inside that repository. Copy it into the folder your agent loads skills from; check your agent's documentation for where that is.

about Baseline UI Skill by @sickn33

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues.

our take

A quick clean-up pass for UI code: fixing spacing, hierarchy, typography and small layout issues. It covers the stack, components and interaction, and is meant for polishing rather than redesign.

when to use it

An interface works but looks rough
You want consistent spacing and type hierarchy fast
You want a polish pass before a release

before you install

It tidies; it will not fix a weak layout or information architecture
Check results against your design system tokens

what's inside

The original SKILL.md is organised into these sections:

When to Use
How to use
Stack
Components
Interaction
Animation
Typography
Layout
Performance
Design
Example
Limitations

source and license

Written and maintained by @sickn33. It is published under the MIT license, which allows reuse with attribution. SkillDirectory does not claim authorship: this page adds our own review and links back to the original, and the skill's text belongs to its author.

View the full SKILL.md on GitHub ↗

Read the opening of the original SKILL.md

# Baseline UI
## When to Use

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


Applies an opinionated baseline for a scoped polish pass. Existing product design, accessibility requirements, framework choices and explicit user preferences take precedence; do not migrate the stack or add dependencies just to satisfy this list.

## 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
…

Excerpt only, quoted from the author's repository. Open the repository for the complete file.

↓ download .zip