skills.rest
otto-poblysh
otto-poblyshCOMMUNITY
Explore all skills by this author →
GitHub

redesign-existing-projects

Audit and modernize existing Tailwind, vanilla CSS, or styled-components projects.

Updated Apr 24, 2026
Search Tags:#typography#design systems#ui audit#ux polish#website redesign#frontend refactor#accessibility states
One-click install
npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill redesign-existing-projects-otto-poblysh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/otto-poblysh/pedagemy-early-access/tree/main/.agents/skills/redesign-existing-projects
Command: npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill redesign-existing-projects-otto-poblysh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams modernize an existing website or app that feels generic, inconsistent, or dated by auditing real code and upgrading design quality without a risky rewrite.

Core Features & Use Cases

  • Scan and framework-aware auditing: Identifies the current styling approach (Tailwind, vanilla CSS, styled-components, etc.) and pinpoints design and UI inconsistencies that commonly look AI-generated.
  • Targeted, non-breaking redesign: Applies improvements to typography, color/surfaces, layout, interactivity, and missing UI states while preserving existing functionality.
  • Design system consistency checks: Enforces consistent hierarchy (weights, spacing, optical alignment), state behavior (hover/focus/loading/error), and content quality (realistic copy and imagery).

Quick Start

Ask the AI to redesign your project by scanning the codebase, running the design audit, then applying focused upgrades that match your existing CSS framework while keeping all existing functionality working.

Frequently Asked Questions about redesign-existing-projects

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

FAQPage Schema
How do I modernize my website design without breaking existing functionality?▼

Yes, you can redesign a styled-components website by running a framework-aware audit to identify inconsistencies, then applying stack-compatible modifications to UI states and typography. This approach improves visual quality and UX consistency while keeping all existing functionality intact.

How do I fix design inconsistencies that make my UI look AI-generated?▼

Fix design inconsistencies by running a UI audit to enforce design system hierarchy, optical alignment, and state behaviors like hover, focus, loading, and error. Upgrading content quality with realistic copy and imagery also removes the generic, AI-generated appearance.

Can I upgrade UI states and typography in a Tailwind project without a full rewrite?▼

Yes, upgrading UI states and typography in a Tailwind project without a full rewrite is possible by applying targeted, non-breaking modifications. The process involves scanning the codebase to identify missing states and then applying framework-compatible fixes to improve interactivity.

What is the best way to improve UX consistency across an existing application?▼

The best way to improve UX consistency is to execute an audit-to-fix workflow that pinpoints visual hierarchy and missing UI state issues. By applying focused upgrades to spacing and state behavior, you achieve a modernized, consistent application without risky rewrites.

Does a targeted website redesign work with vanilla CSS or do I need to switch frameworks?▼

A targeted website redesign works directly with vanilla CSS, Tailwind, or styled-components without needing to switch frameworks. The process identifies your current styling approach and applies stack-compatible changes to modernize layout and typography seamlessly.

Related Skills

Explore More Design & Creative Skills→
FrekiManagarmFrekiManagarm

redesign-existing-projects

Audit and upgrade existing website UI without changing its framework.

Community
Advanced
gelsonsimoesgelsonsimoes

webapp-testing

Automate web application testing with Playwright to verify end-to-end functionality.

Community
Intermediate
CANTAGESTUDIOCANTAGESTUDIO
3

accessibility-contrast-audit

Audit UI color contrast and accessibility metrics against WCAG guidelines.

Community
Intermediate
vvedantbvvedantb
99

redesign-existing-projects

Audit and upgrade existing project designs without breaking functionality.

Community
Advanced