Redesign Existing Projects Skill: Audit, Then Fix

What is the redesign-existing-projects skill?

This skill sits in the taste-skill repository. The README describes it for existing projects: audit the UI first, then fix layout, spacing, hierarchy and styling. The folder is named redesign-skill, while the name inside SKILL.md is redesign-existing-projects.

Its frontmatter says it upgrades existing websites and apps, finds generic AI patterns, and applies higher design standards without breaking functionality. It works with any CSS framework or plain CSS.

What changes in your agent's output

• The agent reads your framework and styling method first, so changes land in the stack you already use.
• It lists every generic pattern and missing state it finds before it edits a file.
• Fixes are small and reviewable, and the skill asks for a test after every change.
• Imports are checked against your dependency file, and the Tailwind version is checked before writing classes.

What the audit covers

The diagnosis step goes through named categories. Each one is a list of tells the agent looks for in your code and rendered page.

• Typography: default fonts used everywhere, weak headlines, wide body lines, missing tabular numbers.
• Color and surfaces: pure black, oversaturated accents, a purple or blue AI gradient, flat sections.
• Layout: centered symmetry, three equal cards, 100vh instead of dynamic viewport height, uneven button alignment.
• States: hover, active, focus, loading, empty and error states, plus dead links.
• Content: generic names, fake round numbers, placeholder company names and cliche copy.
• Components, icons and code quality: stock patterns, inconsistent icon strokes, inline styles, div soup and missing alt text.

Who it is for

Best for

• A site or app that works but looks generic or AI-made, and needs an upgrade rather than a rebuild.
• Teams that want an audit list first and edits second, so they can review the diagnosis.
• Projects on Tailwind, another CSS framework or vanilla CSS.

Not for

• Starting from nothing. image-to-code from the same repo builds a new page from generated references.
• A scored accessibility audit. See fixing-accessibility for that.
• Pixel-perfect conversion of a design file. The skill has no design-file input.

Use it with UiChemy

The skill upgrades front-end code you already have. It does not move a build into WordPress. UiChemy AI to WordPress imports an existing AI build as an editable page, and the redesign pass can run first. Click Get Started on uichemy.com.

How to install Redesign Existing Projects Skill: Audit, Then Fix

git clone https://github.com/Leonxlnx/taste-skill

1. Clone the repository

   Run git clone https://github.com/Leonxlnx/taste-skill. This skill sits at skills/redesign-skill inside the clone.

2. Copy the skill folder

   Copy skills/redesign-skill into the skills location your AI coding agent reads. The README does not name agent folders, so check your agent's documentation. It also says you can copy a SKILL.md into your project or paste it into a ChatGPT or Codex conversation.

3. Open your existing project

   Start the agent in the repository you want to upgrade, so the scan step can read your framework and styling.

4. Ask for the audit

   Try: use redesign-existing-projects to audit this project and list every generic pattern before changing anything.

Check that it loaded

The agent should name your framework and styling method, then return a list of generic patterns and missing states before it edits any file.

Read the official instructions on GitHub

Key features

• Scan, diagnose, fixThe process has three steps. Scan identifies the framework and styling method, diagnose audits the UI and lists every generic pattern and missing state, and fix applies targeted upgrades.
• Typography auditChecks for default fonts used everywhere, a missing headline presence, body lines far wider than about 65 characters, weak weights, tracking, and missing text-wrap balance or pretty.
• Color and surface auditFlags pure black, accents above about 80 percent saturation, more than one accent, mixed grays, an AI gradient, untinted shadows and a random dark section on a light page.
• Layout auditLooks for centered symmetry, three equal cards, 100vh instead of min-height 100dvh, flexbox math where grid fits, a missing max-width container and uniform radii.
• Interaction and states auditChecks hover, active, focus ring, transitions of 200 to 300ms, skeleton loaders, empty and error states, dead hash links and a highlighted current page in navigation.
• Content and component auditFlags generic names, fake round numbers, placeholder brands, Oops errors, placeholder filler text, Title Case and stock patterns such as the three-tier pricing table or the pill badge.
• Upgrade techniquesGives concrete moves for type, layout, motion and surfaces, such as variable-font animation, broken grids, scroll-driven reveals, spotlight borders and tinted shadows.
• Seven-step fix priorityThe order is font swap, color cleanup, hover and active states, layout and spacing, replacing generic components, loading, empty and error states, then a final polish of type scale and spacing.
• Do-no-harm rulesWork with the existing stack, test after every change, check package.json before importing a library, and keep changes small enough to review.

Frequently asked questions