skills.rest
thesammykins
thesammykinsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

redesign-existing-projects

Audit existing websites and outline non-destructive design upgrades.

Updated Oct 31, 2024
Search Tags:#design#accessibility#frontend#css#audit#refactor#design-system
One-click install
npx skills add https://github.com/thesammykins/dotfiles --skill redesign-existing-projects-thesammykins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/thesammykins/dotfiles/tree/main/.agents/skills/redesign-skill
Command: npx skills add https://github.com/thesammykins/dotfiles --skill redesign-existing-projects-thesammykins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Upgrades existing websites and apps to premium quality by auditing design debt, identifying generic AI-driven patterns, and applying high-end standards without breaking functionality.

Core Features & Use Cases

  • Audit & diagnose design debt across typography, color systems, layout, and accessibility, then specify non-disruptive upgrades.
  • Framework-agnostic: works with any CSS framework or vanilla CSS, delivering upgrade guidelines that fit existing tech stacks.
  • Use Case: For a marketing site built with Bootstrap or a React app using plain CSS, this Skill provides actionable steps and design system recommendations to reach premium quality without rewrites.

Quick Start

Describe a concise upgrade plan for an existing project detailing typography, spacing, color, and accessibility improvements.

Frequently Asked Questions about redesign-existing-projects

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

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

To upgrade an existing website design without breaking functionality, audit design debt across typography, color, and layout, then apply non-destructive improvements using actionable steps and design-system guidelines.

What is design debt and how does it affect my frontend project?▼

Design debt in frontend projects consists of outdated design patterns and generic AI-driven styling that lowers visual quality, which you can diagnose and resolve through a systematic design audit.

Can I use this design audit approach with Bootstrap or vanilla CSS projects?▼

Yes, this design audit approach is framework-agnostic and works with any CSS framework or vanilla CSS, delivering upgrade guidelines that fit your existing tech stack without requiring rewrites.

How do I improve web accessibility and color systems during a CSS refactor?▼

Improve web accessibility and color systems during a CSS refactor by diagnosing current layout and contrast issues, then applying high-end design standards and UI tokens to ensure non-disruptive upgrades.

What is the best way to fix generic AI-driven design patterns on a marketing site?▼

The best way to fix generic AI-driven design patterns on a marketing site is to audit the design debt, identify outdated styling, and specify non-disruptive premium upgrades using design-system recommendations.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
webdriveriowebdriverio
11

Frontend CSS

Enforce CSS coding standards for modular styles, naming, accessibility, and responsive design.

Official
Basic
Euraika-LabsEuraika-Labs
14

hotfix

Create emergency hotfix workflows with audit trails and controlled branching.

Official
Advanced