website-upgrade-playbook

Audit and refactor website UI elements for clarity, hierarchy, and consistency.

2|Updated Feb 1, 2026
One-click install
npx skills add https://github.com/RexO77/axiomUI --skill website-upgrade-playbook
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: website-upgrade-playbook
Source: https://github.com/RexO77/axiomUI/tree/main/public/skills/axiom-website-upgrade
Command: npx skills add https://github.com/RexO77/axiomUI --skill website-upgrade-playbook

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses vague requests to improve websites, landing pages, dashboards, SaaS apps, or design systems by providing a structured approach to enhance hierarchy, spacing, typography, components, forms, feedback, responsiveness, and accessibility.

Core Features & Use Cases

  • Systematic UI Audit: Guides users through a prioritized checklist covering typography, layout, color, components, forms, system states, and accessibility.
  • Code-Level Improvements: Focuses on applying heuristics directly in code, prioritizing component, token, and layout updates over isolated patches.
  • Use Case: A product team receives feedback that their SaaS dashboard feels cluttered and hard to navigate. This Skill can be used to systematically audit and refactor the UI, leading to a cleaner, more intuitive user experience.

Quick Start

Use the website-upgrade-playbook skill to audit and improve the main dashboard page for clarity, hierarchy, and consistency.

Frequently Asked Questions about website-upgrade-playbook

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

FAQPage Schema
How do I conduct a UI audit to fix a cluttered SaaS dashboard?

A UI audit systematically evaluates dashboard clarity, hierarchy, and consistency. You prioritize checklist items covering typography, layout, color, components, forms, system states, and accessibility to identify and refactor interface inconsistencies directly in code.

What is the best way to improve website accessibility and interface consistency?

Improving website accessibility and interface consistency requires applying design heuristics directly to component tokens and layout structures. This systematic refactoring approach enhances visual hierarchy, feedback, and spacing across marketing pages and multi-step flows.

How do I systematically refactor UI components for better visual hierarchy?

Systematically refactoring UI components involves auditing typography, layout, and color tokens rather than applying isolated patches. This structured playbook guides prioritizing component and layout updates to establish clear hierarchy and interface polish.

Can I use a design system playbook to improve forms and multi-step flows?

Yes, a design system playbook can improve forms and multi-step flows by providing a prioritized auditing checklist. It guides code-level improvements for component states, feedback mechanisms, and accessibility to ensure a cleaner, more intuitive user experience.

When should I not use isolated patches for website redesign?

You should avoid isolated patches during a website redesign when addressing systemic issues like cluttered SaaS dashboards. Instead, prioritize component, token, and layout updates to systematically resolve interface consistency and accessibility problems.

Does the website upgrade process address feedback and system states in applications?

Yes, the website upgrade process explicitly addresses feedback and system states within applications. The systematic UI audit includes a prioritized checklist covering component states, forms, and responsiveness to ensure comprehensive interface polish and usability.