redesign-existing-projects

Name: redesign-existing-projects
Author: jmxt3

32stars3forks

How to install redesign-existing-projects?

jmxt3/gitscape.ai/redesign-existing-projects

$npx -y skills add jmxt3/gitscape.ai --skill redesign-existing-projects

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Redesign Skill
2
3	## How This Works
4
5	When applied to an existing project, follow this sequence:
6
7	1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
8	2. Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.
9	3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
10
11	## Design Audit
12
13	### Typography
14
15	Check for these problems and fix them:
16
17	- 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.
18	- Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
19	- Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
20	- Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
21	- Numbers in proportional font. Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
22	- Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
23	- All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
24	- Orphaned words. Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.
25
26	### Color and Surfaces
27
28	- Pure `#000000` background. Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
29	- Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
30	- More than one accent color. Pick one. Remove the rest. Consistency beats variety.
31	- Mixing warm and cool grays. Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
32	- Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
33	- 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.
34	- Flat design with zero texture. Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
35	- Perfectly even gradients. Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
36	- Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
37	- 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.
38	- 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.
39
40	### Layout
41
42	- Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
43	- 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.
44	- Using `height: 100vh` for full-screen sections. Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
45	- Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
46	- 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.
47	- Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
48	- Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.

People who liked this also viewed

6 picks

Type

redesign-existing-projects

32stars3forks

View on GitHub

How to install redesign-existing-projects?

jmxt3/gitscape.ai/redesign-existing-projects

$npx -y skills add jmxt3/gitscape.ai --skill redesign-existing-projects

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Redesign Skill
2
3	## How This Works
4
5	When applied to an existing project, follow this sequence:
6
7	1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
8	2. Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.
9	3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
10
11	## Design Audit
12
13	### Typography
14
15	Check for these problems and fix them:
16
17	- 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.
18	- Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
19	- Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
20	- Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
21	- Numbers in proportional font. Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
22	- Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
23	- All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
24	- Orphaned words. Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.
25
26	### Color and Surfaces
27
28	- Pure `#000000` background. Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
29	- Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
30	- More than one accent color. Pick one. Remove the rest. Consistency beats variety.
31	- Mixing warm and cool grays. Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
32	- Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
33	- 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.
34	- Flat design with zero texture. Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
35	- Perfectly even gradients. Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
36	- Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
37	- 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.
38	- 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.
39
40	### Layout
41
42	- Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
43	- 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.
44	- Using `height: 100vh` for full-screen sections. Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
45	- Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
46	- 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.
47	- Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
48	- Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.

People who liked this also viewed

6 picks

Type