agentleFS
Sign inStart free
juandelossantosjuandelossantos/another-agent-skills/skills/redesign-skill/SKILL.md

redesign-skill

Skill1 starsChanged 11 days agoMITView on GitHub

Improve existing codebases systematically: scan the UI, diagnose issues across 8 categories, fix in priority order. Never breaks existing functionality. Do NOT use for greenfield projects.

We split this skill into the rules it gives an agent

6 rules. About 0 are common, 2 are distinctive, and 4 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 4

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use when: upgrading visual design of existing codebase.

    line 21
  2. Very specific:

    Before scanning, run bash scripts/design-upgrade.sh to extract existing tokens from the codebase into DESIGN.md.

    line 39
  3. Very specific:

    Before touching code, run the full audit from frontend-web/REDESIGN-GUIDE.md:

    line 43
  4. Distinctive:

    Do not break existing functionality — visual changes only unless data is wrong.

    line 77
  5. Very specific:

    Check package.json before adding dependencies.

    line 78
  6. Very specific:

    Update DESIGN.md and DESIGN-LOCK.md after approval.

    line 80

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Redesign Skill

Scope: Existing projects that need a visual upgrade. Not for greenfield builds.

When to Use

Use when: upgrading visual design of existing codebase. Not for greenfield projects.

When NOT to Use

  • Greenfield projects (use build skills instead)
  • Framework migrations or stack changes
  • Performance optimization without visual changes

Output Contract

ArtifactFormatLocationQuality Criteria
Visually redesigned source code (font swap, color system, interactive states, layout, components, missing states, typography)Modified source files (CSS, markup, component files) — same framework, same structureExisting source treeAll 87 checks across 8 categories scanned from REDESIGN-GUIDE.md, severity-diagnosed (🔴🟡🔵⚪), 7-step priority order applied, no existing functionality broken, same framework preserved, one fix category per commit, post-redesign visual verification performed, DESIGN.md + DESIGN-LOCK.md updated

Process: Extract → Scan → Diagnose → Fix

Phase 0: Extract Existing Design System

Before scanning, run bash scripts/design-upgrade.sh to extract existing tokens from the codebase into DESIGN.md. This ensures the redesign builds on the actual design system, not a guessed one.

Phase 1: Scan

Before touching code, run the full audit from frontend-web/REDESIGN-GUIDE.md:

  • Typography (12 checks)
  • Color & Surfaces (15 checks)
  • Layout (14 checks)
  • Interactivity & States (10 checks)
  • Content (12 checks)
  • Component Patterns (10 checks)
  • Iconography (7 checks)
  • Code Quality (7 checks)

Phase 2: Diagnose

Categorize findings:

SeverityDefinitionAction
🔴 CriticalAccessibility failure, broken layout, unreadable textFix immediately
🟡 HighAI tells, banned defaults, missing statesFix in this pass
🔵 MediumSuboptimal spacing, inconsistent tokensFix if time allows
⚪ LowNice-to-have polishDocument for future

Phase 3: Fix (Priority Order)

  1. Font swap — Replace Inter/Roboto with Geist, Satoshi, Outfit
  2. Color palette — Replace AI defaults with intentional system, add CSS variables
  3. Hover/active/focus states — Add to all interactive elements
  4. Layout & spacing — Hero overflow, nav wrapping, section consistency
  5. Component replacement — Card grids, spec sheets, eyebrow overuse
  6. States — Add loading (skeleton), empty, error states
  7. Typography polish — Line-height, max-width, italic clearance, eyebrow count

Rules

  • Work with existing stack. Do not switch frameworks.
  • Do not break existing functionality — visual changes only unless data is wrong.
  • Check package.json before adding dependencies.
  • One fix category per commit. Keep changes reviewable.
  • Update DESIGN.md and DESIGN-LOCK.md after approval.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free