[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71RMJXYC4VSC0FZDY94J70F":3,"skill-same:01M71RMJXYC4VSC0FZDY94J70F":72},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":53,"install":54,"resources":67},"01M71RMJXYC4VSC0FZDY94J70F","redesign-existing-projects",null,"Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.","gongiskhan\u002Fagent-garrison","gongiskhan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1997392?v=4","01M71RKMFR53TKXE308C22QTNZ","01M71RKMJA57KZHNDCBNKTWZRR",1,"MIT","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Flocal\u002Ftaste-copy\u002F.apm\u002Fskills\u002Fredesign-existing-projects\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Flocal\u002Ftaste-copy\u002F.apm\u002Fskills\u002Fredesign-existing-projects\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"projects","Existing","redesign","redesign existing projects","premium","design","generic","high","with","apps","end","patterns","standards","upgrades","quality","framework","css","2026-11-10 13:02:02",false,"---\nname: redesign-existing-projects\ndescription: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.\n---\n\n# Redesign Skill\n\n## How This Works\n\nWhen applied to an existing project, follow this sequence:\n\n1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.\n2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.\n3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.\n\n## Design Audit\n\n### Typography\n\nCheck for these problems and fix them:\n\n- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial\u002Fcreative projects, pair a serif header with a sans-serif body.\n- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.\n- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.\n- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.\n- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.\n- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.\n- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.\n- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.\n\n### Color and Surfaces\n\n- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).\n- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.\n- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.\n- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).\n- **Purple\u002Fblue \"AI gradient\" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.\n- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.\n- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.\n- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.\n- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.\n- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.\n- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F{name}\u002F1920\u002F1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.\n\n### Layout\n\n- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.\n- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.\n- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).\n- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.\n- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.\n- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.\n- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.\n- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.\n- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.\n- **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead.\n- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.\n- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.\n- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title\u002Fprice blocks.\n- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.\n- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.\n\n### Interactivity and States\n\n- **No hover states on buttons.** Add background shift, slight scale, or translate on hover.\n- **No active\u002Fpressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.\n- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.\n- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.\n- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.\n- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed \"getting started\" view.\n- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.\n- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.\n- **No indication of current page in navigation.** Style the active nav link differently so users know where they are.\n- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.\n- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.\n\n### Content\n\n- **Generic names like \"John Doe\" or \"Jane Smith\".** Use diverse, realistic-sounding names.\n- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.\n- **Placeholder company names like \"Acme Corp\", \"Nexus\", \"SmartFlow\".** Invent contextual, believable brand names.\n- **AI copywriting cliches.** Never use \"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\", \"Game-changer\", \"Delve\", \"Tapestry\", or \"In the world of...\". Write plain, specific language.\n- **Exclamation marks in success messages.** Remove them. Be confident, not loud.\n- **\"Oops!\" error messages.** Be direct: \"Connection failed. Please try again.\"\n- **Passive voice.** Use active voice: \"We couldn't save your changes\" instead of \"Mistakes were made.\"\n- **All blog post dates identical.** Randomize dates to appear real.\n- **Same avatar image for multiple users.** Use unique assets for every distinct person.\n- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.\n- **Title Case On Every Header.** Use sentence case instead.\n\n### Component Patterns\n\n- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.\n- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.\n- **Pill-shaped \"New\" and \"Beta\" badges.** Try square badges, flags, or plain text labels.\n- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.\n- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.\n- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.\n- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.\n- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.\n- **Light\u002Fdark toggle always a sun\u002Fmoon switch.** Use a dropdown, system preference detection, or integrate it into settings.\n- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.\n\n### Iconography\n\n- **Lucide or Feather icons exclusively.** These are the \"default\" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.\n- **Rocketship for \"Launch\", shield for \"Security\".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).\n- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.\n- **Missing favicon.** Always include a branded favicon.\n- **Stock \"diverse team\" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.\n\n### Code Quality\n\n- **Div soup.** Use semantic HTML: `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Caside>`, `\u003Csection>`.\n- **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.\n- **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.\n- **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=\"\"` or `alt=\"image\"` on meaningful images.\n- **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme\u002Fvariables.\n- **Commented-out dead code.** Remove all debug artifacts before shipping.\n- **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.\n- **Missing meta tags.** Add proper `\u003Ctitle>`, `description`, `og:image`, and social sharing meta tags.\n\n### Strategic Omissions (What AI Typically Forgets)\n\n- **No legal links.** Add privacy policy and terms of service links in the footer.\n- **No \"back\" navigation.** Dead ends in user flows. Every page needs a way back.\n- **No custom 404 page.** Design a helpful, branded \"page not found\" experience.\n- **No form validation.** Add client-side validation for emails, required fields, and format checks.\n- **No \"skip to content\" link.** Essential for keyboard users. Add a hidden skip-link.\n- **No cookie consent.** If required by jurisdiction, add a compliant consent banner.\n\n## Upgrade Techniques\n\nWhen upgrading a project, pull from these high-impact techniques to replace generic patterns:\n\n### Typography Upgrades\n- **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.\n- **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.\n- **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.\n\n### Layout Upgrades\n- **Broken grid \u002F asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.\n- **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.\n- **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.\n- **Split-screen scroll.** Two halves of the screen sliding in opposite directions.\n\n### Motion Upgrades\n- **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.\n- **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.\n- **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.\n- **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.\n\n### Surface Upgrades\n- **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.\n- **Spotlight borders.** Card borders that illuminate dynamically under the cursor.\n- **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.\n- **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.\n\n## Fix Priority\n\nApply changes in this order for maximum visual impact with minimum risk:\n\n1. **Font swap** — biggest instant improvement, lowest risk\n2. **Color palette cleanup** — remove clashing or oversaturated colors\n3. **Hover and active states** — makes the interface feel alive\n4. **Layout and spacing** — proper grid, max-width, consistent padding\n5. **Replace generic components** — swap cliche patterns for modern alternatives\n6. **Add loading, empty, and error states** — makes it feel finished\n7. **Polish typography scale and spacing** — the premium final touch\n\n## Rules\n\n- Work with the existing tech stack. Do not migrate frameworks or styling libraries.\n- Do not break existing functionality. Test after every change.\n- Before importing any new library, check the project's dependency file first.\n- If the project uses Tailwind, check the version (v3 vs v4) before modifying config.\n- If the project has no framework, use vanilla CSS.\n- Keep changes reviewable and focused. Small, targeted improvements over big rewrites.\n","# Redesign Skill\n\n## How This Works\n\nWhen applied to an existing project, follow this sequence:\n\n1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.\n2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.\n3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.\n\n## Design Audit\n\n### Typography\n\nCheck for these problems and fix them:\n\n- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial\u002Fcreative projects, pair a serif header with a sans-serif body.\n- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.\n- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.\n- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.\n- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.\n- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.\n- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.\n- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.\n\n### Color and Surfaces\n\n- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).\n- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.\n- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.\n- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).\n- **Purple\u002Fblue \"AI gradient\" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.\n- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.\n- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.\n- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.\n- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.\n- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.\n- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F{name}\u002F1920\u002F1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.\n\n### Layout\n\n- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.\n- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.\n- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).\n- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.\n- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.\n- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.\n- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.\n- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.\n- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.\n- **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead.\n- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.\n- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.\n- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title\u002Fprice blocks.\n- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.\n- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.\n\n### Interactivity and States\n\n- **No hover states on buttons.** Add background shift, slight scale, or translate on hover.\n- **No active\u002Fpressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.\n- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.\n- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.\n- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.\n- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed \"getting started\" view.\n- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.\n- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.\n- **No indication of current page in navigation.** Style the active nav link differently so users know where they are.\n- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.\n- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.\n\n### Content\n\n- **Generic names like \"John Doe\" or \"Jane Smith\".** Use diverse, realistic-sounding names.\n- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.\n- **Placeholder company names like \"Acme Corp\", \"Nexus\", \"SmartFlow\".** Invent contextual, believable brand names.\n- **AI copywriting cliches.** Never use \"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\", \"Game-changer\", \"Delve\", \"Tapestry\", or \"In the world of...\". Write plain, specific language.\n- **Exclamation marks in success messages.** Remove them. Be confident, not loud.\n- **\"Oops!\" error messages.** Be direct: \"Connection failed. Please try again.\"\n- **Passive voice.** Use active voice: \"We couldn't save your changes\" instead of \"Mistakes were made.\"\n- **All blog post dates identical.** Randomize dates to appear real.\n- **Same avatar image for multiple users.** Use unique assets for every distinct person.\n- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.\n- **Title Case On Every Header.** Use sentence case instead.\n\n### Component Patterns\n\n- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.\n- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.\n- **Pill-shaped \"New\" and \"Beta\" badges.** Try square badges, flags, or plain text labels.\n- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.\n- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.\n- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.\n- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.\n- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.\n- **Light\u002Fdark toggle always a sun\u002Fmoon switch.** Use a dropdown, system preference detection, or integrate it into settings.\n- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.\n\n### Iconography\n\n- **Lucide or Feather icons exclusively.** These are the \"default\" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.\n- **Rocketship for \"Launch\", shield for \"Security\".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).\n- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.\n- **Missing favicon.** Always include a branded favicon.\n- **Stock \"diverse team\" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.\n\n### Code Quality\n\n- **Div soup.** Use semantic HTML: `\u003Cnav>`, `\u003Cmain>`, `\u003Carticle>`, `\u003Caside>`, `\u003Csection>`.\n- **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.\n- **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.\n- **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=\"\"` or `alt=\"image\"` on meaningful images.\n- **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme\u002Fvariables.\n- **Commented-out dead code.** Remove all debug artifacts before shipping.\n- **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.\n- **Missing meta tags.** Add proper `\u003Ctitle>`, `description`, `og:image`, and social sharing meta tags.\n\n### Strategic Omissions (What AI Typically Forgets)\n\n- **No legal links.** Add privacy policy and terms of service links in the footer.\n- **No \"back\" navigation.** Dead ends in user flows. Every page needs a way back.\n- **No custom 404 page.** Design a helpful, branded \"page not found\" experience.\n- **No form validation.** Add client-side validation for emails, required fields, and format checks.\n- **No \"skip to content\" link.** Essential for keyboard users. Add a hidden skip-link.\n- **No cookie consent.** If required by jurisdiction, add a compliant consent banner.\n\n## Upgrade Techniques\n\nWhen upgrading a project, pull from these high-impact techniques to replace generic patterns:\n\n### Typography Upgrades\n- **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.\n- **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.\n- **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.\n\n### Layout Upgrades\n- **Broken grid \u002F asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.\n- **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.\n- **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.\n- **Split-screen scroll.** Two halves of the screen sliding in opposite directions.\n\n### Motion Upgrades\n- **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.\n- **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.\n- **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.\n- **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.\n\n### Surface Upgrades\n- **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.\n- **Spotlight borders.** Card borders that illuminate dynamically under the cursor.\n- **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.\n- **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.\n\n## Fix Priority\n\nApply changes in this order for maximum visual impact with minimum risk:\n\n1. **Font swap** — biggest instant improvement, lowest risk\n2. **Color palette cleanup** — remove clashing or oversaturated colors\n3. **Hover and active states** — makes the interface feel alive\n4. **Layout and spacing** — proper grid, max-width, consistent padding\n5. **Replace generic components** — swap cliche patterns for modern alternatives\n6. **Add loading, empty, and error states** — makes it feel finished\n7. **Polish typography scale and spacing** — the premium final touch\n\n## Rules\n\n- Work with the existing tech stack. Do not migrate frameworks or styling libraries.\n- Do not break existing functionality. Test after every change.\n- Before importing any new library, check the project's dependency file first.\n- If the project uses Tailwind, check the version (v3 vs v4) before modifying config.\n- If the project has no framework, use vanilla CSS.\n- Keep changes reviewable and focused. Small, targeted improvements over big rewrites.\n",{"name":5,"description":7},"main","31458d7e0e08a7b3494c27bf2b912ed41c87a138","fittings\u002Flocal\u002Ftaste-copy\u002F.apm\u002Fskills\u002Fredesign-existing-projects",0,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison","https:\u002F\u002Fgongiskhan.github.io\u002Fagent-garrison\u002F","https:\u002F\u002Fgithub.com\u002Fgongiskhan","2026-11-07 05:27:23",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add gongiskhan\u002Fagent-garrison --skill redesign-existing-projects",{"tool":60,"command":61},"bunx","bunx skills add gongiskhan\u002Fagent-garrison --skill redesign-existing-projects",{"tool":63,"command":64},"pnpm","pnpm dlx skills add gongiskhan\u002Fagent-garrison --skill redesign-existing-projects","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Flocal\u002Ftaste-copy\u002F.apm\u002Fskills\u002Fredesign-existing-projects\u002FSKILL.md",true,[68],{"path":69,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":71,"sourceHtmlUrl":15},"LICENSE","许可证",1065,[73,85,95,106,118,147],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":41},"01M71RTFA0HD83YBE1TE7DCE6B","pinned-helper","An owned skill the human has pinned so the Improver must not touch it.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fpinned-helper\u002FSKILL.md",[],[80,81,82,83,84],"pinned helper","helper","human","touch","it",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":41},"01M71RTDKBG0WQHPHKFZKFWDHF","legacy-helper","A rarely used helper kept around from an earlier workflow.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Flegacy-helper\u002FSKILL.md",[],[92,81,93,94],"Legacy","legacy helper","workflow",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":41},"01M71RTCC6ZVVJ9MHHESXPHWA6","human-notes","A human-authored skill not deployed by APM (loose, not in the lock).","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fhuman-notes\u002FSKILL.md",[],[102,82,103,104,105],"notes","human notes","lock","apm",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":41},"01M71RTB83ZP6VK6XH19Z93FAC","garrison-helper","Helps compose and station Garrison Fittings into Faculty role slots.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fgarrison-helper\u002FSKILL.md",[],[81,113,114,115,116,117],"garrison","garrison helper","slots","role","compose",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":127,"publishedAt":41},"01M71RT6MBGJC4QQZBGHF4H1M8","walkthrough","Record a short, narrated, captioned video walkthrough that proves a finished coding task and shows how it behaves, then self-verify the video via vision on extracted frames and publish it as one scrubbable Tailscale link. Use after completing a change\u002Ffix\u002Ffeature on a web project (Next.js\u002FReact etc.) when the user wants visual proof of work, a demo of a user flow, or to avoid manually retesting and watching a long raw screen recording. Triggers on requests like \"record a walkthrough\", \"show me it working\", \"make a demo video of this\", \"prove the feature\", or finishing a UI\u002Froute\u002Fform\u002FAPI change worth demonstrating. Not for walking through a full from-scratch project build.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Fseed\u002Fwalkthrough\u002F.apm\u002Fskills\u002Fwalkthrough\u002FSKILL.md",[124],{"categoryNo":125,"categoryName":126,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[120,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146],"when","project","project build","api","react","change","demo video","publish","recording","Video","show me","work","short","fix","show","route","me","next","self",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":41},"01M71RT54T0SQS42XEP5FVQ28K","Trello","Manage tasks via Trello REST API.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Fseed\u002Ftrello\u002F.apm\u002Fskills\u002Ftrello\u002FSKILL.md",[],[154,155,156,131,157,158,159],"trello","tasks","REST","manage","rest api","via"]