{"id":48730015,"url":"https://github.com/vamsivarma27/ui-restructure","last_synced_at":"2026-04-13T02:01:59.753Z","repository":{"id":349576151,"uuid":"1202950248","full_name":"vamsivarma27/ui-restructure","owner":"vamsivarma27","description":"Claude Code skill — restructure UI from scratch without deleting project logic. Solves UI lock-in across Next.js, React, Vue, Tailwind.","archived":false,"fork":false,"pushed_at":"2026-04-06T15:55:54.000Z","size":74,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-06T17:17:18.909Z","etag":null,"topics":["claude-code","design-system","nextjs","skill-md","skill-md-skillsmp","skillsmp","tailwind","ui-redesign"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vamsivarma27.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-06T15:11:39.000Z","updated_at":"2026-04-06T17:01:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/vamsivarma27/ui-restructure","commit_stats":null,"previous_names":["vamsivarma27/claude-ui-restructure"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/vamsivarma27/ui-restructure","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vamsivarma27%2Fui-restructure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vamsivarma27%2Fui-restructure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vamsivarma27%2Fui-restructure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vamsivarma27%2Fui-restructure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vamsivarma27","download_url":"https://codeload.github.com/vamsivarma27/ui-restructure/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vamsivarma27%2Fui-restructure/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31736723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T22:19:12.206Z","status":"online","status_checked_at":"2026-04-13T02:00:06.623Z","response_time":93,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","design-system","nextjs","skill-md","skill-md-skillsmp","skillsmp","tailwind","ui-redesign"],"created_at":"2026-04-12T01:01:31.834Z","updated_at":"2026-04-13T02:01:59.733Z","avatar_url":"https://github.com/vamsivarma27.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/vamsivarma27/ui-restructure/main/ui-restructure/assets/banner.svg\" alt=\"ui-restructure\" width=\"100%\" /\u003e\n\n# ui-restructure\n\n**The AI skill that solves UI lock-in.**\nRedesign your entire UI from scratch — without deleting a single line of business logic.\n\n[![SkillsMP](https://img.shields.io/badge/SkillsMP-approved-6366f1?style=flat-square\u0026logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0IiBmaWxsPSIjNjM2NmYxIi8+PC9zdmc+)](https://skillsmp.com)\n[![Version](https://img.shields.io/badge/version-1.1.0-0ea5e9?style=flat-square)](https://github.com/vamsivarma27/ui-restructure/releases)\n[![License](https://img.shields.io/badge/license-MIT-22c55e?style=flat-square)](LICENSE)\n[![Agent Skills](https://img.shields.io/badge/Agent%20Skills-compatible-f59e0b?style=flat-square)](https://agentskills.io)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-ec4899?style=flat-square)](https://github.com/vamsivarma27/ui-restructure/blob/main/.github/CONTRIBUTING.md)\n\nWorks with **Claude Code** · **Cursor** · **Windsurf** · **Cline** · **GitHub Copilot** · and any [Agent Skills](https://agentskills.io)-compatible tool.\n\n\u003c/div\u003e\n\n---\n\n## The Problem\n\nEvery developer who has used AI to build UI has hit this wall.\n\nYou 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.\n\n**And it doesn't.**\n\nIt 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.\n\nWhy? Because AI-generated UI creates **invisible lock-in**:\n\n```\n❌ Design tokens repeated in 40+ files\n❌ Layout structure hardcoded inside JSX className props\n❌ Spacing values scattered as Tailwind classes across every component\n❌ Typography repeated individually — not from a system\n❌ Container widths, grid columns, and flex directions fixed in the DOM\n```\n\nWhen 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.**\n\nThe 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.\n\n---\n\n## The Solution\n\n`/ui-restructure` breaks the lock.\n\nIt 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.**\n\n```\nBefore                          After\n──────────────────────────────────────────────────────\nOld tokens everywhere      →    Fresh token system\nHardcoded Tailwind layout  →    New layout from scratch\nSame div hierarchy         →    New component structure\nSpacing hacked per file    →    Consistent spacing scale\nColors inline everywhere   →    Semantic color system\nDeveloper-ordered UI       →    User-ordered UI (god mode)\n```\n\nYour business logic, your API integrations, your state management — **zero changes.**\n\n---\n\n## Install\n\n```bash\n# Via openskills (recommended)\nnpx openskills install vamsivarma27/ui-restructure\n\n# Via agent-skills-cli\nnpx agent-skills-cli install vamsivarma27/ui-restructure\n\n# Manual — copy into your project\ncp -r ui-restructure/ .claude/skills/\n\n# Or into your global Claude skills\ncp -r ui-restructure/ ~/.claude/skills/\n```\n\n---\n\n## Quick Start\n\n```bash\n# Full redesign — strips everything, rebuilds from scratch\n/ui-restructure\n\n# Apply Apple glassmorphism style\n/ui-restructure --style apple\n\n# Think like a user — redesign for user experience, not developer convenience\n/ui-restructure --god-mode\n```\n\n---\n\n## Commands\n\n### `/ui-restructure`\n\nFull redesign. Strips all layout structure, resets design tokens, rebuilds everything from scratch using the minimal style (default).\n\n```bash\n/ui-restructure\n```\n\n**What changes:** layout, spacing, typography, colors, tokens, component hierarchy\n**What never changes:** hooks, API calls, handlers, data mapping, props, types\n\n---\n\n### `--style` — Apply a Named Design System\n\nChoose from four production-grade style engines, each encoding a complete design system.\n\n```bash\n/ui-restructure --style apple\n/ui-restructure --style linear\n/ui-restructure --style minimal\n/ui-restructure --style dashboard\n```\n\n| Style | Description | Best for |\n|---|---|---|\n| `apple` | Glassmorphism · soft shadows · large radius · frosted panels · airy spacing | Consumer apps, portfolio, SaaS marketing |\n| `linear` | Compact · sharp borders · dark · dense · monochrome-first | Developer tools, productivity apps, internal tools |\n| `minimal` | Clean · neutral · typography-first · no shadows · generous whitespace | Blogs, documentation, simple SaaS |\n| `dashboard` | Sidebar-heavy · KPI card grids · data-dense · analytics-first layout | Admin panels, analytics, data platforms |\n\n---\n\n### `--mode` — Control What Gets Rebuilt\n\nUse modes when you want a partial restructure — not everything at once.\n\n```bash\n/ui-restructure --mode layout    # Change structure only, keep your tokens\n/ui-restructure --mode theme     # Change tokens/colors only, keep your layout\n/ui-restructure --mode grid      # Convert list views to card grids\n/ui-restructure --mode full      # Default — rebuild everything\n```\n\n| Mode | What changes | What stays |\n|---|---|---|\n| `full` | Everything (layout + tokens + hierarchy) | Logic only |\n| `layout` | Flex/grid structure, containers, navigation position, column config | Tokens, colors, typography |\n| `theme` | Design tokens, color system, typography scale, shadows, radius | All layout and structure |\n| `grid` | Converts vertical lists and `ul/li` patterns into responsive card grids | Tokens, data, handlers |\n\n---\n\n### `--god-mode` — Redesign for the User, Not the Developer\n\nThis is the most powerful command in the skill.\n\n```bash\n/ui-restructure --god-mode\n```\n\nGod Mode doesn't ask *\"how should I arrange these components?\"* — it asks *\"what does the user actually need on this page?\"*\n\nIt simulates **100 different user types** visiting every page:\n\n- First-time visitors trying to understand what the product does\n- Goal-oriented users looking for a specific action\n- Returning users who want speed and no re-learning\n- Mobile users with one thumb and interrupted attention\n- Stressed users who will leave in 3 seconds if confused\n\nFor 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.\n\nIt then applies the **6 core UX principles**: Usability, Findability, Accessibility, Desirability, Learnability, and Credibility — and documents every violation and fix.\n\n**By default, God Mode preserves your tokens.** It only changes hierarchy, placement, order, and visual weight.\n\n```bash\n/ui-restructure --god-mode                           # Redesign for users, keep tokens\n/ui-restructure --god-mode --remove-tokens           # Redesign for users + reset tokens\n/ui-restructure --god-mode --style apple --remove-tokens  # + apply Apple design system\n```\n\n---\n\n### `--keep-tokens` — Rebuild Layout, Keep Your Colors\n\nAlready happy with your color scheme and spacing scale? Rebuild only the structural layout.\n\n```bash\n/ui-restructure --keep-tokens\n/ui-restructure --style linear --keep-tokens\n```\n\nTokens, colors, radius, shadows — untouched. Layout, flex/grid, component hierarchy, container structure — rebuilt from scratch.\n\n---\n\n### `--remove-tokens` — Explicitly Reset the Design System\n\nPrimarily useful alongside `--god-mode` (which keeps tokens by default).\n\n```bash\n/ui-restructure --god-mode --remove-tokens\n```\n\nClears 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.\n\n---\n\n### `--grid` — Force Card Grid Layout\n\nConvert any page that uses a list, vertical stack, or `ul/li` pattern into a responsive card grid.\n\n```bash\n/ui-restructure --grid cards\n```\n\nAll `.map()` loops, handlers, and data bindings are fully preserved. Only the container and item wrapper structure changes.\n\n| Screen | Columns |\n|---|---|\n| Mobile | 1 |\n| Tablet | 2 |\n| Desktop | 3 |\n| Wide | 4 |\n\n---\n\n### `--density` — Control Spacing Density\n\n```bash\n/ui-restructure --density compact      # 0.75x base — more content visible\n/ui-restructure --density comfortable  # 1.0x base — default\n/ui-restructure --density spacious     # 1.5x base — breathable, airy\n```\n\nScales the entire spacing system proportionally across the rebuilt layout.\n\n---\n\n### `--prompt` — Custom Redesign in Natural Language\n\nDescribe exactly what you want. The skill combines your description with the style engine and mode constraints.\n\n```bash\n/ui-restructure --prompt \"enterprise SaaS dashboard with a dark sidebar, floating KPI cards, and a data table below\"\n/ui-restructure --prompt \"mobile-first onboarding flow with a progress bar and one action per step\"\n/ui-restructure --prompt \"clean pricing page with a billing toggle and a feature comparison table\"\n```\n\n---\n\n## Combined Examples\n\n```bash\n# Apple style, layout only (keep your current tokens)\n/ui-restructure --style apple --mode layout\n\n# Linear style, compact, grid layout\n/ui-restructure --style linear --density compact --mode grid\n\n# Full rebuild with a custom prompt\n/ui-restructure --style dashboard --prompt \"analytics platform with collapsible sidebar\"\n\n# God Mode with Apple tokens reset\n/ui-restructure --god-mode --style apple --remove-tokens\n\n# Theme-only refresh — same layout, new colors\n/ui-restructure --mode theme --style minimal\n```\n\n---\n\n## What Gets Changed vs. Preserved\n\n| Category | Status |\n|---|---|\n| `useState`, `useReducer`, `useEffect` | ✅ Preserved |\n| Custom hooks | ✅ Preserved |\n| API calls, `fetch`, `axios`, SWR, React Query | ✅ Preserved |\n| Server actions (Next.js) | ✅ Preserved |\n| Event handlers and callbacks | ✅ Preserved |\n| Data mapping — `.map()`, `.filter()` | ✅ Preserved |\n| Props and TypeScript interfaces | ✅ Preserved |\n| Route handlers and API routes | ✅ Preserved |\n| Layout wrappers and containers | 🔄 Rebuilt |\n| `flex` / `grid` / `gap-*` classes | 🔄 Rebuilt |\n| `p-*` / `m-*` / `space-*` spacing | 🔄 Rebuilt |\n| Typography classes | 🔄 Rebuilt |\n| Color and token classes | 🔄 Rebuilt |\n| Design token files (`tokens.ts`, `theme.ts`) | 🔄 Rebuilt |\n| `tailwind.config.ts` theme section | 🔄 Rebuilt |\n| CSS variables in `globals.css` | 🔄 Rebuilt |\n\n---\n\n## Framework \u0026 Styling Support\n\n| Framework | Supported |\n|---|---|\n| Next.js App Router | ✅ |\n| Next.js Pages Router | ✅ |\n| React (Vite) | ✅ |\n| React (CRA) | ✅ |\n| Vue 3 | ✅ |\n\n| Styling System | Supported |\n|---|---|\n| Tailwind CSS | ✅ |\n| CSS Modules | ✅ |\n| styled-components | ✅ |\n| shadcn/ui | ✅ |\n| Plain CSS | ✅ |\n| Inline styles | ✅ |\n\n---\n\n## AI Tool Support\n\nThis skill follows the [Agent Skills open standard](https://agentskills.io/specification). Install it once, use it in any compatible tool.\n\n| Tool | Install path |\n|---|---|\n| Claude Code | `~/.claude/skills/ui-restructure/` or `.claude/skills/ui-restructure/` |\n| Cursor | `~/.cursor/skills/ui-restructure/` or `.cursor/skills/ui-restructure/` |\n| Windsurf | `~/.windsurf/skills/ui-restructure/` |\n| Cline | `.cline/skills/ui-restructure/` |\n| GitHub Copilot | `.github/skills/ui-restructure/` |\n\nUse `npx openskills install vamsivarma27/ui-restructure` to auto-install to all detected tools at once.\n\n---\n\n## Skill Structure\n\n```\nui-restructure/\n├── SKILL.md                          ← Main skill (AI reads this to execute commands)\n│\n├── engines/                          ← Style engines\n│   ├── apple.md                      ← Apple HIG — glassmorphism, SF Pro, airy spacing\n│   ├── linear.md                     ← Linear.app — compact dark, Inter, dense layout\n│   ├── minimal.md                    ← Clean neutral — typography-first, no shadows\n│   └── dashboard.md                  ← Analytics — sidebar, KPI cards, 12-col grid\n│\n├── modes/                            ← Execution modes\n│   ├── full.md                       ← Rebuild everything\n│   ├── layout.md                     ← Structure only\n│   ├── theme.md                      ← Tokens/colors only\n│   ├── grid.md                       ← List → card grid\n│   └── godmode.md                    ← User-first redesign (100-user mindset)\n│\n├── parser/\n│   └── commands.md                   ← Argument parsing rules\n│\n├── prompts/\n│   └── restructure-flow.md           ← Master execution flow\n│\n└── references/\n    ├── ui-craft.md                   ← World-class frontend engineering (motion, typography,\n    │                                    micro-interactions, iconography, accessibility)\n    └── user-mindset.md               ← 10 Laws of User Behavior + 10 developer UX mistakes\n```\n\n---\n\n## The Polish Standard\n\nEvery restructure runs a mandatory polish pass enforcing:\n\n- **Motion** — spring physics, correct easing curves (ease-out in, ease-in out), GPU-only animations\n- **Micro-interactions** — 5 states on every element (default, hover, focus, active, disabled)\n- **Typography** — proportional line-height, 60–75 char line length, optical sizing\n- **Iconography** — consistent library, optically aligned to adjacent text, correct stroke weight\n- **Shadows** — two-layer ambient + key light system, 4 elevation levels\n- **Spacing** — strict 8pt grid, inner radius = outer radius − padding\n- **Accessibility** — `focus-visible` custom rings, WCAG AA contrast, 44px touch targets\n- **States** — loading skeleton, empty state, error state designed on every list/async element\n\nThe bar is: **Would this pass on Stripe, Linear, Vercel, or apple.com?**\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](.github/CONTRIBUTING.md) for branch naming, commit format, and PR rules.\n\nAll contributions require:\n- A valid `skills validate ./ui-restructure` result\n- An updated `CHANGELOG.md` entry\n- Review from `@vamsivarma27`\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[View on SkillsMP](https://skillsmp.com) · [Report a bug](https://github.com/vamsivarma27/ui-restructure/issues) · [Request a feature](https://github.com/vamsivarma27/ui-restructure/issues)**\n\nMade by [Vamsi Varma](https://github.com/vamsivarma27)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvamsivarma27%2Fui-restructure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvamsivarma27%2Fui-restructure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvamsivarma27%2Fui-restructure/lists"}