# Prettify

Iteratively improves the visual design of an existing page, making it more...

- Repository: https://github.com/yournextstore/yournextstore (5539 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add yournextstore/yournextstore --skill prettify -g -a claude-code -y`
Codex: `npx skills add yournextstore/yournextstore --skill prettify -g -a codex -y`
Cursor: `npx skills add yournextstore/yournextstore --skill prettify -g -a cursor -y`
Gemini CLI: `npx skills add yournextstore/yournextstore --skill prettify -g -a gemini-cli -y`

## Description

Iteratively improves the visual design of an existing page, making it more sophisticated, richer, and prettier, without redesigning from scratch. Works on any page or UI surface: landing pages, marketing pages, pricing, docs, dashboards, admin views, settings, modals, empty states, etc. Use when the user says "prettify", or that a page/screen/component "looks flat", "feels generic", "needs more polish", "make it prettier", "more sophisticated", "richer", or asks to improve, refine, or enhance an existing UI surface. Loops screenshot → critique → targeted edit → re-screenshot until it meets a higher visual bar.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Prettify

Improve the visual quality of an **existing** UI surface through small, targeted iterations. Works on any page or component: landing/marketing, pricing, docs, dashboards, admin tables, settings panels, modals, empty states, etc. Preserve the existing structure, copy, and brand. Do not redesign.

## Inputs

The user gives you a target, a route (e.g. `/`, `/pricing`, `/admin/products`), a component file, a running URL, or a specific section/modal/state of a page. If unclear, ask once:
- Which surface? (route, file path, or component)
- For component-level targets: what state/route exposes it? (e.g. "the empty state on `/admin/orders` when there are no orders")
- What feels off? (optional, gives you a starting hypothesis)
- How many iterations? (default 5; user can request more)

If the dev server isn't running, start it (`bun dev`) before iterating. For authed surfaces (admin, settings), make sure you're signed in before screenshotting.

## The Loop

Run this loop N times. Each pass should make **one focused improvement**, not a sweeping rewrite.

### 1. Screenshot the current state

Use Chrome DevTools MCP. Capture at all three required widths (mobile-first is mandatory for YNS):

- 320px (mobile)
- 768px (tablet)
- 1280px (desktop)

Save screenshots so you can compare before/after across iterations.

### 2. Critique against the rubric

Score the current state across these dimensions. Focus the next change on the **lowest-scoring** one, don't try to fix everything at once.

The rest: https://github.com/yournextstore/yournextstore/blob/HEAD/.agents/skills/prettify/SKILL.md