102.7K+Download
Skip to the usage guide
redesign-existing-projectsby Leonxlnx

Redesign Existing Projects Skill.

A skill for auditing and refining an existing interface through targeted typography, layout and interaction changes.

  • Design Review & Accessibility
  • Review report
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md
--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules
Front matter and section headings read from the upstream file on 2026-09-14 · 15,032 characters in full

01 What it does

What the redesign-existing-projects Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Audits an existing website or app and applies targeted visual changes using its current CSS framework or vanilla CSS. Preserving functionality is an explicit requirement that needs testing, not a guaranteed result.

The skill scans the codebase to identify the framework and styling method, diagnoses every generic pattern and weak point through a comprehensive design audit, then applies targeted upgrades working with the existing stack. Changes are prioritized by visual impact and risk, from font swaps and color cleanup to component replacement and typography polish.

What it produces

  • A design diagnosis followed by focused code changes to the existing interface, not only a review report.
See the example prompt ↗

How It Works

  1. 01
    Scan the Codebase

    Read the codebase to identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.

  2. 02
    Diagnose Generic Patterns

    Run through the design audit to list every generic pattern, weak point, and missing state found in the project.

  3. 03
    Fix with Targeted Upgrades

    Apply targeted upgrades working with the existing stack without rewriting from scratch, improving what's already there.

02 Find your fit

When to Use the redesign-existing-projects Skill

Use the redesign-existing-projects skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Existing websites and apps that need upgrading to premium quality
  • Projects with generic AI design patterns that need to be identified and replaced
  • Projects using any CSS framework (Tailwind, styled-components) or vanilla CSS

Know the Boundaries

  • Its aesthetic suggestions are opinionated and may conflict with an established brand or design system.
  • The source suggests inventing plausible names, numbers and dates. Use those only as clearly labeled demo content; never alter real metrics, testimonials or publication dates to make a live site appear more credible.

What to Provide

  • Existing app and protected requirementsProvide the project path, pages to improve, known visual problems and behaviors/content that must remain unchanged. Include brand constraints and the project's test or preview commands.

03 Inside the skill

Rules the redesign-existing-projects Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Work with Existing Tech Stack

    Do not migrate frameworks or styling libraries. Keep changes compatible with the current setup.

  2. Test After Every Change

    Do not break existing functionality. Test after every change to ensure the project still works.

  3. Check Dependencies Before Importing

    Before importing any new library, check the project's dependency file first to see what's already available.

  4. Check Tailwind Version

    If the project uses Tailwind, check whether it's v3 or v4 before modifying the config file.

  5. Use Vanilla CSS When No Framework Exists

    If the project has no framework, use vanilla CSS rather than introducing a new styling system.

  6. Never Use Lorem Ipsum

    Never use placeholder latin text. Write real draft copy instead of generic placeholder content.

  7. Follow Fix Priority Order

    Apply changes in priority order: font swap first (biggest instant improvement, lowest risk), then color cleanup, hover states, layout, component replacement, states, and typography polish last.

  8. Keep Changes Reviewable

    Keep changes reviewable and focused. Make small, targeted improvements over big rewrites.

04 Put it to work

Install redesign-existing-projects in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add redesign-existing-projects to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

Generic skills CLI form for skills/redesign-skill/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Review the diff for focused changes that preserve the framework, content and data.
  • Exercise existing navigation, forms and state transitions after changes.
  • Check desktop and narrow layouts for overlap, font fallback and readability.
  • Verify meaningful image alternatives and keyboard focus states.
  • Do not publish invented statistics, identities or dates as real information.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/redesign-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for redesign-existing-projects.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. How This WorksThree-step process: scan codebase, diagnose patterns, fix with targeted upgrades
  2. Design AuditComprehensive checklist covering typography, color, layout, interactivity, content, components, icons, code quality, and strategic omissions
  3. TypographyFix browser defaults, headline presence, body width, weight variety, number formatting, letter-spacing, and orphaned words
  4. Color and SurfacesReplace pure black, oversaturated accents, mixed grays, AI gradients, generic shadows, flat design, and inconsistent lighting
  5. LayoutBreak symmetry, replace three-column cards, use CSS Grid, add containers, vary radius, create depth, fix alignment
  6. Interactivity and StatesAdd hover, active, focus, loading, empty, and error states with smooth transitions and GPU-accelerated animations
  7. ContentUse realistic names and data, remove AI cliches, write active voice, vary dates, avoid Lorem Ipsum
  8. Component PatternsReplace generic cards, button pairs, badges, accordions, carousels, modals, avatars, toggles, and footer link farms
  9. IconographyMove beyond Lucide/Feather defaults, avoid cliche metaphors, standardize stroke widths, add favicon, use real photos
  10. Code QualityUse semantic HTML, consistent styling, relative units, alt text, clean z-index, remove dead code, add meta tags
  11. Strategic OmissionsAdd legal links, back navigation, custom 404, form validation, skip links, and cookie consent where needed
  12. Upgrade TechniquesHigh-impact techniques for typography, layout, motion, and surface upgrades to replace generic patterns
The Skill's Own Description
“Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.”

Front-matter description from SKILL.md. The full file is about 15,032 characters. Read the full file on GitHub.

Redesign Existing Projects

Run redesign-existing-projects on a Real Design Review Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects