agentleFS
Sign inStart free
F0rger123F0rger123/CLAUDE-DESIGN-GOD-MODE/skills/redesign/SKILL.md

redesign

Skill1 starsChanged 19 days agoMITView on GitHub

Use when upgrading the look of an existing website or app in place - restyling a codebase without breaking routes, data, forms or tests. Works with Tailwind, shadcn/ui, CSS modules, plain CSS, Next.js, React, Vue, Svelte, Astro and static HTML. Applies changes in a safe order, system first, screens second.

12 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use critique and decide.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • GoogleSkill

    critique

    Expertise in auditing and fixing repository scripts and GitHub Actions workflows to ensure technical robustness and security.

    Also in 4 projects that use this

  • dirienSkill

    decide

    Three-agent adversarial debate protocol for strategic decisions. Two advocates steelman opposing positions while a moderator identifies risks and synthesizes a binding consensus. Use when choosing between alternatives, evaluating tradeoffs, or making high-stakes decisions.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

8 rules. 0 are common, 2 are distinctive, and 6 are very specific to this project.

  • 0

    Common

    Most of the 12 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 6

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Tokens: Put the direction plan into the project's token home (Tailwind theme, CSS variables, shadcn variables).

    line 13
  2. Very specific:

    Sweep: Search for leftovers: raw hex, transition: all, inline styles, emoji icons, one-off font sizes.

    line 19
  3. Distinctive:

    Check: Run the same build/test command.

    line 20
  4. Very specific:

    Every route, link, form field name, id used by scripts, data-* used by tests, ARIA attributes, meta tags, analytics snippets and copy that …

    line 23
  5. Very specific:

    Tailwind: prefer editing the theme and a few shared components over rewriting class strings in every file.

    line 28
  6. Distinctive:

    Component library (MUI, Chakra, Mantine, Ant): use its theme API, not overrides on every instance.

    line 30
  7. Very specific:

    Static HTML/CSS: add a :root token block at the top of the main stylesheet and refactor values into it.

    line 31
  8. Very specific:

    Keep real photos. Crop them with intent (object-fit: cover, consistent aspect ratios).

    line 35

“Common” is measured: kept by at least 6 in 10 of the 12 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Redesign in Place

Refinement keeps the identity and improves the craft. A full redesign replaces the look but keeps every fact, feature and flow. Decide which one the user asked for; if unclear, refine.

Safe order (do not skip ahead)

  1. Inventory (read-only). Note: how styles are applied, where tokens live, the component library, the root layout, and which files the main pages use. Run the tests/typecheck/build command once if it is cheap, so you know the starting state.
  2. Tokens. Put the direction plan into the project's token home (Tailwind theme, CSS variables, shadcn variables). Replace hard-coded hex values in shared components with tokens as you touch them.
  3. Fonts. Load the chosen fonts the way the stack prefers (next/font, @fontsource, or <link> with display=swap). Set them on body and headings globally.
  4. Global base. Background, text colour, selection colour, focus ring (:focus-visible with a 2px accent outline and offset), link style, scrollbar if dark, text-wrap: balance on headings, smooth font rendering.
  5. Primitives. Button, input, select, card, badge, table, modal, nav. Fix these once: sizes, radius, weights, hover/active/focus/disabled states. Most of the visible upgrade happens here.
  6. Layout shells. Header, footer, sidebar, page container widths, section spacing.
  7. Signature screens. The home page or main dashboard: apply the mode skill (landing, app-ui, game-ui).
  8. Sweep. Search for leftovers: raw hex, transition: all, inline styles, emoji icons, one-off font sizes. Fix the worst ones.
  9. Check. Run the same build/test command. Look at the main pages at 1440px and 390px.

Preserve

  • Every route, link, form field name, id used by scripts, data-* used by tests, ARIA attributes, meta tags, analytics snippets and copy that states facts.
  • Component APIs: keep props working. Add variants rather than renaming.
  • Dark mode if the project has one: update both themes.

Stack notes

  • Tailwind: prefer editing the theme and a few shared components over rewriting class strings in every file. Use @apply sparingly, only in base layers.
  • shadcn/ui: the CSS variables in globals.css and components/ui/* are the leverage points. Change --radius, colour variables and the button/card variants first.
  • Component library (MUI, Chakra, Mantine, Ant): use its theme API, not overrides on every instance.
  • Static HTML/CSS: add a :root token block at the top of the main stylesheet and refactor values into it.

Icons and imagery

  • Replace emoji icons with one icon set (Lucide, Phosphor, Tabler) at one stroke width. If adding a package is not allowed, inline SVG.
  • Keep real photos. Crop them with intent (object-fit: cover, consistent aspect ratios). Never replace real work photos with stock.
  • Missing imagery: build it from UI (a real product screen in HTML), type, or shape. Mark spots where the owner should add a photo.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free