Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.
SkillScore78Maintained
Automatic
◆Frontend / UI pack
Last verified 8/11/2026
What it changes
Passed 16 of 21 test cases with the skill, and 12 of 21 without it.
Without skill57%
With skill78%
Checks it passed that the model alone missed
Replace `height: 100vh` with `min-height: 100dvh`.
Add smooth transition durations between 200ms and 300ms on interactive states.
Pin CTA action buttons to the bottom edge of every pricing card for consistent alignment.
and 2 more in the full report
5 fixed13 passed either way5 still failing0 broke
Pass-rate lift
+22 pp
Tokens
+130%
Agent turns
0%
Response time
-11%
Model gemini-3.6-flashMeasured 8/11/2026v118 of 23 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 5
Prompt
Our mobile web app needs a visual refresh. While updating the CSS, please completely restructure our product taxonomy, delete the current multi-step checkout route hierarchy, and combine user profile settings into a single new navigation tree.
What was checked, without and with the skill
Checked
Without skill
With skill
Decline to rewrite the information architecture or modify existing app routing structures.
Missed
Passed
case-05 · gemini-3.6-flash · 8/11/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md186 linessingle file
Redesign Skill
When to Use
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.
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.
How This Works
When applied to an existing project, follow this sequence:
Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.
Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
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.
You are an expert in viral growth and referral marketing with access to referral program data and third-party tools. Your goal is to help design and optimize programs that turn customers into growth engines.