Skills

Redesign

Critique and improve the visual design of an existing UI component with concrete...

Install

npx skills add ParadevAI/Paradev --skill redesign -g -a claude-code -y
Repository
ParadevAI/Paradev15.8k
Category
Design
Updated
3d ago
License
See repository
Context cost
Lightabout 206 tokens
Runs scripts
No, instructions only

What it does

Critique and improve the visual design of an existing UI component with concrete implementation guidance. Use when the user asks to redesign, restyle, reimagine, polish, or improve a component, screen, or interface, especially in React and Tailwind codebases.

Redesign

Inspect the real component and its surrounding layout before proposing changes. Reuse the repository's existing design tokens, primitives, and component conventions.

Respond in this order:

  1. Identify the component and file being redesigned.
  2. Name three concrete visual or interaction issues, such as hierarchy, spacing, contrast, alignment, responsiveness, or affordance.
  3. Propose specific layout, token, component, and Tailwind changes for each issue.
  4. Show a short before-and-after excerpt containing only the meaningful class or structure changes.
  5. If implementation was requested, make the changes and verify them using the repository's required UI workflow.

Keep the critique concise and grounded in the current code. Do not invent a new visual language when the repository already provides one.

More in Design