skills.rest
yournextstore
yournextstoreOFFICIAL
Explore all skills by this author →
Website𝕏@yournextstoreGitHub

prettify

Iteratively refines existing UI surfaces through screenshot-driven critique and targeted Tailwind edits.

5.5k|669|Updated Aug 5, 2024
Search Tags:#next.js#Tailwind#visual polish#iterative refinement#screenshot critique#UI Design#Responsive design
One-click install
npx skills add https://github.com/yournextstore/yournextstore --skill prettify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prettify
Source: https://github.com/yournextstore/yournextstore/tree/main/.agents/skills/prettify
Command: npx skills add https://github.com/yournextstore/yournextstore --skill prettify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Existing pages and components often look flat, generic, or unpolished, but a full redesign is risky and unnecessary. This Skill improves visual quality through small, reversible iterations that preserve structure, copy, and brand.

Core Features & Use Cases

  • Screenshot-driven loop: Captures the target surface at 320px, 768px, and 1280px via Chrome DevTools MCP, critiques it against an 8-dimension rubric (hierarchy, typography, spacing, color, depth, detail, consistency, mobile fidelity), then applies one focused change per iteration.
  • Guardrails against redesigns: Enforces mobile-first changes, existing Tailwind tokens, no copy rewrites, no layout restructuring, and automatic reverts when a change regresses.
  • Use Case: A pricing page feels flat — run 5 iterations to strengthen heading hierarchy, refine card borders, and expand section padding, with before/after screenshots logged per pass.

Quick Start

Ask the AI to prettify the pricing page at /pricing with 5 iterations, keeping the current layout and copy intact.

Frequently Asked Questions about prettify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve a page's visual design without redesigning it?▼

Run an iterative loop: screenshot the page at mobile, tablet, and desktop widths, critique it against a design rubric, then apply one targeted Tailwind change per pass. Revert any change that regresses and stop after the requested number of iterations.

How to make a Tailwind UI look less generic?▼

Focus on typography scale and tracking, consistent spacing rhythm, layered neutrals with sparing accent use, and subtle depth via hairline borders and small shadows. Avoid purple-pink gradients, glassmorphism, and shadow-everything patterns that read as generic.

Does this work on admin dashboards and tables, not just marketing pages?▼

Yes, the rubric covers app surfaces too: tabular numerals and right-aligned numeric columns, calmer table row rhythm, refined focus rings, and consistent form field heights. The same screenshot-critique-edit loop applies to any UI surface.

Can I use this to change copy or restructure page layout?▼

No, the Skill explicitly forbids copy rewrites, layout restructuring, new sections, and component replacements. It only refines styling of what already exists, keeping structure, brand, and content intact.

What happens if a visual change makes the page worse?▼

Each iteration is verified by re-screenshotting at all three widths and comparing against the previous state. If the change regresses or does not help, it is reverted, and the loop moves to the next-priority rubric dimension.

Related Skills

Explore More Design & Creative Skills→
nixopusnixopus

dev-setup

Automate local development setup with Node.js, Yarn, PostgreSQL, and Redis.

Official
Intermediate
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
ravnhqravnhq
16

design-frontend

Validate UI components against design system tokens and responsive guidelines.

Official
Basic
andrew-tucker-razorvisionandrew-tucker-razorvision

frontend-design

Design frontend UI/UX with responsive layouts and WCAG accessibility.

Community
Basic