# How to Use the Redesign-Skill for Existing Projects with Taste Skill

> Upgrade existing codebases with the redesign-skill for Taste Skill. Audit, diagnose, and fix projects without framework migration or breaking functionality. Learn how now.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-06-06

---

**The `redesign-existing-projects` skill audits and upgrades existing codebases through a three-step pipeline—scan, diagnose, and fix—without forcing framework migrations or breaking existing functionality.**

Taste Skill provides a specialized **Redesign Skill** (`redesign-existing-projects`) that modernizes pre-existing websites and applications without requiring a complete rewrite. The skill is defined declaratively in [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md) and integrates with the `npx skills` CLI to provide stack-aware improvements. This guide covers how to install, run, and interpret results from the redesign-skill for existing projects.

## What is the Redesign Skill?

The **Redesign Skill** is a declarative automation packaged within the Leonxlnx/taste-skill repository. Unlike scaffolding tools that generate new projects, this skill specifically targets legacy or existing codebases to identify and resolve design debt.

The skill operates under two critical constraints:

- **Stack Preservation**: It detects your current UI framework (Tailwind CSS, vanilla CSS, styled-components, CSS Modules) and never forces a framework migration.
- **No-Breakage Rule**: Every change must pass your existing test suite or visual regression checks to confirm functionality remains intact.

## The Three-Step Pipeline

The `redesign-existing-projects` skill executes a systematic pipeline defined in [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md).

### 1. Scan

The skill reads your repository structure to detect the UI framework and extract current **design tokens**. It identifies configuration files like [`tailwind.config.js`](https://github.com/Leonxlnx/taste-skill/blob/main/tailwind.config.js), CSS variable definitions, or theme files to understand the existing design system.

### 2. Diagnose

Using the extensive **Design Audit** checklist defined in the SKILL.md, the skill evaluates:

- **Typography**: Font choices, hierarchy, and readability
- **Colour**: Palette consistency and accessibility
- **Layout**: Grid systems, spacing, and responsive behavior
- **Interactivity**: Hover states, active states, and transitions
- **Content**: Text quality and information architecture
- **Component Patterns**: Reusability and consistency
- **Iconography**: Visual language alignment
- **Code Quality**: CSS organization and maintainability
- **Strategic Omissions**: Missing states (loading, empty, error)

Each generic or low-quality pattern is flagged as a specific "problem" requiring remediation.

### 3. Fix

The skill applies **Upgrade Techniques** from the SKILL.md specification, generating stack-aware improvements:

- Font swaps (e.g., Inter → Geist)
- Colour palette cleanup and contrast fixes
- Addition of missing hover/active states
- Grid-based layout corrections
- Modern component replacements
- Implementation of loading/empty/error states

## Installation and Setup

Install the skill using the `npx skills` CLI wrapper.

Install the complete Taste Skill repository:

```bash
npx skills add https://github.com/Leonxlnx/taste-skill

```

Or install only the redesign skill:

```bash
npx skills add https://github.com/Leonxlnx/taste-skill \
    --skill "redesign-existing-projects"

```

The [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) helper script in the repository root handles the invocation logic for the CLI wrapper.

## Running the Skill

You can execute the redesign-skill for existing projects via CLI commands or LLM prompts.

### CLI Execution

Navigate to your project root and run:

```bash
npx skills run redesign-existing-projects .

```

The command auto-detects your project configuration and outputs a step-by-step audit:

```

🔎 Scan: Detected Tailwind v3, using src/styles/tailwind.css
📝 Diagnosis:
  • Typography – default Inter everywhere ➜ switch to Geist
  • Layout – missing max-width container ➜ add container-mx auto
  • Interactivity – no hover states on buttons ➜ add transition utilities
…
🚀 Fixes (applied in order):
  1️⃣ Font swap → updated tailwind.config.js
  2️⃣ Colour palette cleanup → modified src/css/theme.css

```

### LLM Prompt Integration

For AI-assisted workflows, embed the skill description directly into prompts:

```text
follow the skill: redesign-existing-projects

```

Or provide detailed instructions:

```text
You are an AI code assistant. Apply the "redesign-existing-projects" skill to the repository at https://github.com/example/old-site. Follow the audit checklist, prioritize font swap and colour cleanup, and output the patches as a Git diff.

```

## Understanding the Output

The skill generates three distinct deliverables:

- **Diagnostic Report**: A comprehensive list of every audit item requiring attention, categorized by severity.
- **Patch Plan**: An ordered sequence of fixes prioritized by visual impact (font swap → colour cleanup → hover states → layout corrections).
- **Exact Code Snippets**: Stack-specific changes including CSS modifications, Tailwind config updates, or HTML adjustments that you can apply directly.

Because the logic resides entirely in [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md), you can also copy the markdown content into ChatGPT or Claude conversations and request the model apply the redesign-skill logic to your repository.

## Summary

- The `redesign-existing-projects` skill in Leonxlnx/taste-skill provides systematic audits of existing codebases without mandating framework changes.
- The three-step pipeline—**Scan**, **Diagnose**, and **Fix**—operates entirely from the [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md) specification.
- Installation requires `npx skills add https://github.com/Leonxlnx/taste-skill` with optional `--skill` flag for specific skill selection.
- Execution via `npx skills run redesign-existing-projects ./path` auto-detects your tech stack and respects existing CSS architecture.
- All modifications follow a no-breakage rule, requiring validation against your existing test suite or visual regression suite.

## Frequently Asked Questions

### Can the redesign-skill migrate my project to a different CSS framework?

No. The skill explicitly respects your existing tech stack. Whether you use Tailwind CSS, vanilla CSS, styled-components, or CSS Modules, the skill generates fixes compatible with your current system. It never forces a framework migration or requires rewriting components in a different styling solution.

### How does the skill determine which design issues to fix first?

The skill follows a priority order defined in the **Patch Plan** section of [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md). Typically, it addresses high-impact visual changes first (font swaps and colour palette cleanup) before moving to interactive states (hover/active) and structural layout corrections. This sequencing maximizes visual improvement while minimizing the risk of breaking existing functionality.

### Is it safe to run the redesign-skill on production code?

The skill includes a **no-breakage** rule requiring you to run your project's test suite or visual regression checks after each incremental change. While the skill generates targeted, non-invasive patches, you should always apply changes in a development environment first and verify through automated testing before deploying to production.

### Can I use the redesign-skill without installing the CLI?

Yes. Because the skill is purely declarative (contained entirely within [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md)), you can copy the skill's markdown content directly into an LLM conversation with ChatGPT or Claude. Simply paste the SKILL.md content and ask the model to apply the "redesign-existing-projects" logic to your repository, specifying any priority areas like typography or colour updates.