stacks-redesign

Audit and upgrade Stacks.js UI patterns in stx templates and Crosswind classes.

2|Updated Jul 2, 2026
One-click install
npx skills add https://github.com/stacksjs/status --skill stacks-redesign
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stacks-redesign
Source: https://github.com/stacksjs/status/tree/main/.claude/skills/stacks-redesign
Command: npx skills add https://github.com/stacksjs/status --skill stacks-redesign

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates generic, low-quality "AI slop" design patterns in existing Stacks.js user interfaces, removing the need for full stack migrations or complete rewrites to achieve a polished, branded experience.

Core Features & Use Cases

  • Comprehensive Design Audit: Scans stx templates, Crosswind configurations, and composables to identify weak spots including default typography, oversaturated colors, generic component layouts, and missing interactive states.
  • Targeted, Low-Risk Upgrades: Applies focused improvements to existing code (font swaps, color palette cleanup, hover states, layout fixes) without altering core functionality or migrating frameworks.
  • Use Case: A Stacks app with generic Inter fonts, 3-column feature cards, and no hover states can be upgraded to a premium, cohesive UI in hours using this Skill, preserving all existing business logic.

Quick Start

Use the stacks-redesign skill to audit the current Stacks project's UI and apply targeted upgrades to fix generic design patterns and improve visual quality.

Frequently Asked Questions about stacks-redesign

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

FAQPage Schema
How do I fix generic AI-generated UI design patterns in a Stacks.js application?

To fix generic AI design patterns in a Stacks.js application, audit the stx templates and Crosswind utility classes to identify weak spots like default typography and oversaturated colors, then apply targeted low-risk UI upgrades without altering core functionality.

What does a design audit for Stacks UI templates involve?

A Stacks UI design audit involves scanning stx templates, Crosswind configurations, and composables to identify weak spots including default typography, oversaturated color palettes, generic component layouts, and missing interactive states like hover effects.

Can I upgrade my Stacks.js frontend UI without migrating frameworks or breaking business logic?

Yes, you can upgrade a Stacks.js frontend without migrating frameworks by applying non-destructive, low-risk improvements such as font swaps, color palette cleanup, and adding hover states that preserve existing stack functionality and business logic.

How do I remove oversaturated colors and default fonts from my stx templates?

Remove oversaturated colors and default fonts from stx templates by applying targeted design upgrades that swap generic typography, clean up color palettes, and fix layout patterns while adhering to Stacks ecosystem conventions and accessibility standards.

What is the best way to add missing interactive states to Crosswind utility classes?

The best way to add missing interactive states to Crosswind utility classes is through a targeted UI upgrade workflow that applies non-destructive improvements like hover states directly to existing Stacks components without requiring a complete framework rewrite.

Does upgrading a Stacks.js UI require a full stack migration?

No, upgrading a Stacks.js UI does not require a full stack migration. You can achieve a premium, branded experience by applying focused design improvements to existing stx templates and Crosswind configurations, eliminating the need for complete rewrites.