ui-restructure

The AI skill that solves UI lock-in.
Redesign your entire UI from scratch — without deleting a single line of business logic.

Works with Claude Code · Cursor · Windsurf · Cline · GitHub Copilot · and any Agent Skills-compatible tool.

The Problem

Every developer who has used AI to build UI has hit this wall.

You ask AI to generate a dashboard. It builds one. You ship it. Six months later you want a completely different look — cleaner, more modern, more Apple-like. So you ask AI to redesign it.

And it doesn't.

It changes the colors. Maybe the fonts. But the layout is the same. The spacing is the same. The component hierarchy is the same. The div structure is the same.

Why? Because AI-generated UI creates invisible lock-in:

❌ Design tokens repeated in 40+ files
❌ Layout structure hardcoded inside JSX className props
❌ Spacing values scattered as Tailwind classes across every component
❌ Typography repeated individually — not from a system
❌ Container widths, grid columns, and flex directions fixed in the DOM

When you ask AI to "redesign" — it reads all this structure and uses it as the starting point. It can only drift slightly from what already exists. It cannot escape it.

The result: you end up with a UI that looks like a reskin, not a redesign. The bones are always the same. You're locked in.

The Solution

/ui-restructure breaks the lock.

It reverse engineers your existing UI, extracts only the logical intent (what data is shown, what actions exist, what flows happen), strips away all the structural decisions, and rebuilds the UI from scratch using a fresh design system — while keeping every hook, handler, API call, and data mapping completely untouched.

Before                          After
──────────────────────────────────────────────────────
Old tokens everywhere      →    Fresh token system
Hardcoded Tailwind layout  →    New layout from scratch
Same div hierarchy         →    New component structure
Spacing hacked per file    →    Consistent spacing scale
Colors inline everywhere   →    Semantic color system
Developer-ordered UI       →    User-ordered UI (god mode)

Your business logic, your API integrations, your state management — zero changes.

Install

# Via openskills (recommended)
npx openskills install vamsivarma27/ui-restructure

# Via agent-skills-cli
npx agent-skills-cli install vamsivarma27/ui-restructure

# Manual — copy into your project
cp -r ui-restructure/ .claude/skills/

# Or into your global Claude skills
cp -r ui-restructure/ ~/.claude/skills/

Quick Start

# Full redesign — strips everything, rebuilds from scratch
/ui-restructure

# Apply Apple glassmorphism style
/ui-restructure --style apple

# Think like a user — redesign for user experience, not developer convenience
/ui-restructure --god-mode

Commands

/ui-restructure

Full redesign. Strips all layout structure, resets design tokens, rebuilds everything from scratch using the minimal style (default).

/ui-restructure

What changes: layout, spacing, typography, colors, tokens, component hierarchy
What never changes: hooks, API calls, handlers, data mapping, props, types

--style — Apply a Named Design System

Choose from four production-grade style engines, each encoding a complete design system.

/ui-restructure --style apple
/ui-restructure --style linear
/ui-restructure --style minimal
/ui-restructure --style dashboard

--mode — Control What Gets Rebuilt

Use modes when you want a partial restructure — not everything at once.

/ui-restructure --mode layout    # Change structure only, keep your tokens
/ui-restructure --mode theme     # Change tokens/colors only, keep your layout
/ui-restructure --mode grid      # Convert list views to card grids
/ui-restructure --mode full      # Default — rebuild everything

--god-mode — Redesign for the User, Not the Developer

This is the most powerful command in the skill.

/ui-restructure --god-mode

God Mode doesn't ask "how should I arrange these components?" — it asks "what does the user actually need on this page?"

It simulates 100 different user types visiting every page:

• First-time visitors trying to understand what the product does
• Goal-oriented users looking for a specific action
• Returning users who want speed and no re-learning
• Mobile users with one thumb and interrupted attention
• Stressed users who will leave in 3 seconds if confused

For every page, it runs a friction audit — scoring each UI element on how important it is to the user versus how visually prominent it currently is. Elements that are critical but hidden get promoted. Elements that are rare but loud get demoted.

It then applies the 6 core UX principles: Usability, Findability, Accessibility, Desirability, Learnability, and Credibility — and documents every violation and fix.

By default, God Mode preserves your tokens. It only changes hierarchy, placement, order, and visual weight.

/ui-restructure --god-mode                           # Redesign for users, keep tokens
/ui-restructure --god-mode --remove-tokens           # Redesign for users + reset tokens
/ui-restructure --god-mode --style apple --remove-tokens  # + apply Apple design system

--keep-tokens — Rebuild Layout, Keep Your Colors

Already happy with your color scheme and spacing scale? Rebuild only the structural layout.

/ui-restructure --keep-tokens
/ui-restructure --style linear --keep-tokens

Tokens, colors, radius, shadows — untouched. Layout, flex/grid, component hierarchy, container structure — rebuilt from scratch.

--remove-tokens — Explicitly Reset the Design System

Primarily useful alongside --god-mode (which keeps tokens by default).

/ui-restructure --god-mode --remove-tokens

Clears all values in tokens.ts, theme.ts, tailwind.config.ts theme section, and CSS variables in globals.css — then regenerates them from the active style engine.

--grid — Force Card Grid Layout

Convert any page that uses a list, vertical stack, or ul/li pattern into a responsive card grid.

/ui-restructure --grid cards

All .map() loops, handlers, and data bindings are fully preserved. Only the container and item wrapper structure changes.

--density — Control Spacing Density

/ui-restructure --density compact      # 0.75x base — more content visible
/ui-restructure --density comfortable  # 1.0x base — default
/ui-restructure --density spacious     # 1.5x base — breathable, airy

Scales the entire spacing system proportionally across the rebuilt layout.

--prompt — Custom Redesign in Natural Language

Describe exactly what you want. The skill combines your description with the style engine and mode constraints.

/ui-restructure --prompt "enterprise SaaS dashboard with a dark sidebar, floating KPI cards, and a data table below"
/ui-restructure --prompt "mobile-first onboarding flow with a progress bar and one action per step"
/ui-restructure --prompt "clean pricing page with a billing toggle and a feature comparison table"

Combined Examples

# Apple style, layout only (keep your current tokens)
/ui-restructure --style apple --mode layout

# Linear style, compact, grid layout
/ui-restructure --style linear --density compact --mode grid

# Full rebuild with a custom prompt
/ui-restructure --style dashboard --prompt "analytics platform with collapsible sidebar"

# God Mode with Apple tokens reset
/ui-restructure --god-mode --style apple --remove-tokens

# Theme-only refresh — same layout, new colors
/ui-restructure --mode theme --style minimal

What Gets Changed vs. Preserved

Framework & Styling Support

AI Tool Support

This skill follows the Agent Skills open standard. Install it once, use it in any compatible tool.

Use npx openskills install vamsivarma27/ui-restructure to auto-install to all detected tools at once.

Skill Structure

ui-restructure/
├── SKILL.md                          ← Main skill (AI reads this to execute commands)
│
├── engines/                          ← Style engines
│   ├── apple.md                      ← Apple HIG — glassmorphism, SF Pro, airy spacing
│   ├── linear.md                     ← Linear.app — compact dark, Inter, dense layout
│   ├── minimal.md                    ← Clean neutral — typography-first, no shadows
│   └── dashboard.md                  ← Analytics — sidebar, KPI cards, 12-col grid
│
├── modes/                            ← Execution modes
│   ├── full.md                       ← Rebuild everything
│   ├── layout.md                     ← Structure only
│   ├── theme.md                      ← Tokens/colors only
│   ├── grid.md                       ← List → card grid
│   └── godmode.md                    ← User-first redesign (100-user mindset)
│
├── parser/
│   └── commands.md                   ← Argument parsing rules
│
├── prompts/
│   └── restructure-flow.md           ← Master execution flow
│
└── references/
    ├── ui-craft.md                   ← World-class frontend engineering (motion, typography,
    │                                    micro-interactions, iconography, accessibility)
    └── user-mindset.md               ← 10 Laws of User Behavior + 10 developer UX mistakes

The Polish Standard

Every restructure runs a mandatory polish pass enforcing:

• Motion — spring physics, correct easing curves (ease-out in, ease-in out), GPU-only animations
• Micro-interactions — 5 states on every element (default, hover, focus, active, disabled)
• Typography — proportional line-height, 60–75 char line length, optical sizing
• Iconography — consistent library, optically aligned to adjacent text, correct stroke weight
• Shadows — two-layer ambient + key light system, 4 elevation levels
• Spacing — strict 8pt grid, inner radius = outer radius − padding
• Accessibility — focus-visible custom rings, WCAG AA contrast, 44px touch targets
• States — loading skeleton, empty state, error state designed on every list/async element

The bar is: Would this pass on Stripe, Linear, Vercel, or apple.com?

Contributing

See CONTRIBUTING.md for branch naming, commit format, and PR rules.

All contributions require:

• A valid skills validate ./ui-restructure result
• An updated CHANGELOG.md entry
• Review from @vamsivarma27

License

MIT — see LICENSE