Individual skill

beautify

Use this skill to make an AI-built app look intentionally designed and behave well: 'make it look better,' 'it looks like a template,' 'something looks off,' 'make it look like Stripe or Linear,' 'review my design,' 'is the UI good enough to ship,' 'pick a look for my app,' or when building any new screen. Covers visual direction, hierarchy, spacing, color, type, the five UI states, error messages, accessibility basics, and a design review with a fix order. Not for marketing-page copy (use landing-page).

skills/beautify/SKILL.md

Read pinned source

Source commit 01bd10f79a4b6a741be78e3184612a90ecbd54ef

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 262
Repository last updated: Oct 16, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 5,285 bytes
references/ai-slop-fixes.mddoc · 11,023 bytes

Read excerpt


# Beautify

Make the app look intentionally designed instead of generated, and make every screen handle real data. Restraint is the main tool: fewer colors, fewer weights, fewer borders, fewer shadows.

Read `references/ai-slop-fixes.md` for the 12 patterns AI-generated interfaces fall into and how to fix each one. Examples there use Tailwind class names. Translate them to the project's own styling.

## Choose the mode

- **Direction:** a new app with no visual style yet. Do Step 1.
- **Build:** a new screen. Apply the rules in Steps 2–4 while you build.
- **Review:** existing screens. Do Step 5.

## Step 1: Set a direction (once)