Redesign Skill

Overview

This public intake copy packages

plugins/antigravity-awesome-skills-claude/skills/redesign-existing-projects

https://github.com/sickn33/antigravity-awesome-skills

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses

metadata.json

ORIGIN.md

Redesign Skill

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Limitations, How This Works, Design Audit, Upgrade Techniques, Fix Priority.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

• Use when the user asks to redesign, restyle, modernize, polish, or improve an existing website or app UI.
• Use when the task is to audit current frontend code and make targeted visual improvements without changing the product architecture.
• Use when the design feels generic, AI-generated, poorly spaced, visually flat, or missing responsive, interactive, loading, empty, or error states.
• Use when the request clearly matches the imported source intent: upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.
• Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.
• Use when provenance needs to stay visible in the answer, PR, or review packet.

Operating Table

metadata.json

ORIGIN.md

SKILL.md

SKILL.md

## Related Skills

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

1. Confirm the user goal, the scope of the imported workflow, and whether this skill is still the right router for the task.
2. Read the overview and provenance files before loading any copied upstream support files.
3. Load only the references, examples, prompts, or scripts that materially change the outcome for the current request.
4. Execute the upstream workflow while keeping provenance and source boundaries explicit in the working notes.
5. Validate the result against the upstream expectations and the evidence you can point to in the copied files.
6. Escalate or hand off to a related skill when the work moves out of this imported workflow's center of gravity.
7. Before merge or closure, record what was used, what changed, and what the reviewer still needs to verify.

Imported Workflow Notes

Imported: Limitations

• This skill upgrades existing UI but does not authorize framework migrations, information-architecture rewrites, or product-scope expansion by default.
• Preserve working behavior, routing, data flows, accessibility semantics, and tests while making visual changes.
• Validate redesigned screens in the actual app across supported browsers and viewport sizes before considering the work complete.

Examples

Example 1: Ask for the upstream workflow directly

Use @redesign-existing-projects to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @redesign-existing-projects against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @redesign-existing-projects for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @redesign-existing-projects using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

• Work with the existing tech stack. Do not migrate frameworks or styling libraries.
• Do not break existing functionality. Test after every change.
• Before importing any new library, check the project's dependency file first.
• If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
• If the project has no framework, use vanilla CSS.
• Keep changes reviewable and focused. Small, targeted improvements over big rewrites.
• Keep the imported skill grounded in the upstream repository; do not invent steps that the source material cannot support.

Imported Operating Notes

Imported: Rules

• Work with the existing tech stack. Do not migrate frameworks or styling libraries.
• Do not break existing functionality. Test after every change.
• Before importing any new library, check the project's dependency file first.
• If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
• If the project has no framework, use vanilla CSS.
• Keep changes reviewable and focused. Small, targeted improvements over big rewrites.

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Symptoms: The result ignores the upstream workflow in

plugins/antigravity-awesome-skills-claude/skills/redesign-existing-projects

metadata.json

ORIGIN.md

Problem: The imported workflow feels incomplete during review

Symptoms: Reviewers can see the generated

SKILL.md

Problem: The task drifted into a different specialization

Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better. Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.

Related Skills

• @prompt-engineer

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @prompt-engineering

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @prompt-engineering-patterns

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

• @prompt-library

  - Use when the work is better handled by that native specialization after this imported skill establishes context.

Additional Resources

Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.

references

references/n/a

examples

examples/n/a

scripts

scripts/n/a

agents

agents/n/a

assets

assets/n/a

Imported Reference Notes

Imported: How This Works

When applied to an existing project, follow this sequence:

1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.
3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

Imported: Design Audit

Typography

Check for these problems and fix them:

• Browser default fonts or Inter everywhere. Replace with a font that has character. Good options:

  Geist

  ,

  Outfit

  ,

  Cabinet Grotesk

  ,

  Satoshi

  . For editorial/creative projects, pair a serif header with a sans-serif body.
• Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
• Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
• Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
• Numbers in proportional font. Use a monospace font or enable tabular figures (

  font-variant-numeric: tabular-nums

  ) for data-heavy interfaces.
• Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
• All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
• Orphaned words. Single words sitting alone on the last line. Fix with

  text-wrap: balance

  or

  text-wrap: pretty

  .

Color and Surfaces

• Pure

  #000000

  background. Replace with off-black, dark charcoal, or tinted dark (

  #0a0a0a

  ,

  #121212

  , or a dark navy).
• Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
• More than one accent color. Pick one. Remove the rest. Consistency beats variety.
• Mixing warm and cool grays. Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
• Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
• 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.
• Flat design with zero texture. Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
• Perfectly even gradients. Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
• Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
• 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.
• 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://picsum.photos/seed/{name}/1920/1080

  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.

Layout

• Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
• 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.
• Using

  height: 100vh

  for full-screen sections. Replace with

  min-height: 100dvh

  to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
• Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
• 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.
• Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
• Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.
• No overlap or depth. Elements sit flat next to each other. Use negative margins to create layering and visual depth.
• Symmetrical vertical padding. Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
• Dashboard always has a left sidebar. Try top navigation, a floating command menu, or a collapsible panel instead.
• Missing whitespace. Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
• 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.
• 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/price blocks.
• 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.
• 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.

Interactivity and States

• No hover states on buttons. Add background shift, slight scale, or translate on hover.
• No active/pressed feedback. Add a subtle

  scale(0.98)

  or

  translateY(1px)

  on press to simulate a physical click.
• Instant transitions with zero duration. Add smooth transitions (200-300ms) to all interactive elements.
• Missing focus ring. Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
• No loading states. Replace generic circular spinners with skeleton loaders that match the layout shape.
• No empty states. An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
• No error states. Add clear, inline error messages for forms. Do not use

  window.alert()

  .
• Dead links. Buttons that link to

  #

  . Either link to real destinations or visually disable them.
• No indication of current page in navigation. Style the active nav link differently so users know where they are.
• Scroll jumping. Anchor clicks jump instantly. Add

  scroll-behavior: smooth

  .
• Animations using

  top

  ,

  left

  ,

  width

  ,

  height

  . Switch to

  transform

  and

  opacity

  for GPU-accelerated, smooth animation.

Content

• Generic names like "John Doe" or "Jane Smith". Use diverse, realistic-sounding names.
• Fake round numbers like

  99.99%

  ,

  50%

  ,

  $100.00

  . Use organic, messy data:

  47.2%

  ,

  $99.00

  ,

  +1 (312) 847-1928

  .
• Placeholder company names like "Acme Corp", "Nexus", "SmartFlow". Invent contextual, believable brand names.
• AI copywriting cliches. Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
• Exclamation marks in success messages. Remove them. Be confident, not loud.
• "Oops!" error messages. Be direct: "Connection failed. Please try again."
• Passive voice. Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
• All blog post dates identical. Randomize dates to appear real.
• Same avatar image for multiple users. Use unique assets for every distinct person.
• Lorem Ipsum. Never use placeholder latin text. Write real draft copy.
• Title Case On Every Header. Use sentence case instead.

Component Patterns

• 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.
• Always one filled button + one ghost button. Add text links or tertiary styles to reduce visual noise.
• Pill-shaped "New" and "Beta" badges. Try square badges, flags, or plain text labels.
• Accordion FAQ sections. Use a side-by-side list, searchable help, or inline progressive disclosure.
• 3-card carousel testimonials with dots. Replace with a masonry wall, embedded social posts, or a single rotating quote.
• Pricing table with 3 towers. Highlight the recommended tier with color and emphasis, not just extra height.
• Modals for everything. Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
• Avatar circles exclusively. Try squircles or rounded squares for a less generic look.
• Light/dark toggle always a sun/moon switch. Use a dropdown, system preference detection, or integrate it into settings.
• Footer link farm with 4 columns. Simplify. Focus on main navigational paths and legally required links.

Iconography

• Lucide or Feather icons exclusively. These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
• Rocketship for "Launch", shield for "Security". Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
• Inconsistent stroke widths across icons. Audit all icons and standardize to one stroke weight.
• Missing favicon. Always include a branded favicon.
• Stock "diverse team" photos. Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.

Code Quality

• Div soup. Use semantic HTML:

  <nav>

  ,

  <main>

  ,

  <article>

  ,

  <aside>

  ,

  <section>

  .
• Inline styles mixed with CSS classes. Move all styling to the project's styling system.
• Hardcoded pixel widths. Use relative units (

  %

  ,

  rem

  ,

  em

  ,

  max-width

  ) for flexible layouts.
• Missing alt text on images. Describe image content for screen readers. Never leave

  alt=""

  or

  alt="image"

  on meaningful images.
• Arbitrary z-index values like

  9999

  . Establish a clean z-index scale in the theme/variables.
• Commented-out dead code. Remove all debug artifacts before shipping.
• Import hallucinations. Check that every import actually exists in

  package.json

  or the project dependencies.
• Missing meta tags. Add proper

  <title>

  ,

  description

  ,

  og:image

  , and social sharing meta tags.

Strategic Omissions (What AI Typically Forgets)

• No legal links. Add privacy policy and terms of service links in the footer.
• No "back" navigation. Dead ends in user flows. Every page needs a way back.
• No custom 404 page. Design a helpful, branded "page not found" experience.
• No form validation. Add client-side validation for emails, required fields, and format checks.
• No "skip to content" link. Essential for keyboard users. Add a hidden skip-link.
• No cookie consent. If required by jurisdiction, add a compliant consent banner.

Imported: Upgrade Techniques

When upgrading a project, pull from these high-impact techniques to replace generic patterns:

Typography Upgrades

• Variable font animation. Interpolate weight or width on scroll or hover for text that feels alive.
• Outlined-to-fill transitions. Text starts as a stroke outline and fills with color on scroll entry or interaction.
• Text mask reveals. Large typography acting as a window to video or animated imagery behind it.

Layout Upgrades

• Broken grid / asymmetry. Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
• Whitespace maximization. Aggressive use of negative space to force focus on a single element.
• Parallax card stacks. Sections that stick and physically stack over each other during scroll.
• Split-screen scroll. Two halves of the screen sliding in opposite directions.

Motion Upgrades

• Smooth scroll with inertia. Decouple scrolling from browser defaults for a heavier, cinematic feel.
• Staggered entry. Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
• Spring physics. Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
• Scroll-driven reveals. Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.

Surface Upgrades

• True glassmorphism. Go beyond

  backdrop-filter: blur

  . Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
• Spotlight borders. Card borders that illuminate dynamically under the cursor.
• Grain and noise overlays. A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
• Colored, tinted shadows. Shadows that carry the hue of the background rather than using generic black.

Imported: Fix Priority

Apply changes in this order for maximum visual impact with minimum risk:

1. Font swap — biggest instant improvement, lowest risk
2. Color palette cleanup — remove clashing or oversaturated colors
3. Hover and active states — makes the interface feel alive
4. Layout and spacing — proper grid, max-width, consistent padding
5. Replace generic components — swap cliche patterns for modern alternatives
6. Add loading, empty, and error states — makes it feel finished
7. Polish typography scale and spacing — the premium final touch