Redesign Existing Projects: Audit and Refresh an Existing UI
Audit an existing project’s typography, surfaces, spacing, and interaction states. Make focused improvements while preserving the links and behavior users rely on.
中文Setup for Codex / Claude Code (archived skill)
Codex or Claude Code in a working copy of the existing frontend and its normal preview setup. Use the project’s current component library and CSS stack. This standalone skill comes from the maintainer’s archive.
- Open the archived document at the pinned GitHub commit. Save it as .agents/skills/redesign-existing-projects/SKILL.md for Codex or .claude/skills/redesign-existing-projects/SKILL.md for Claude Code.
- Start a new session in a practice project or isolated branch. Confirm the agent can load the archived skill and that the existing preview runs.
- Choose one screen and ask for the audit first. Verify routes and interactions after applying the highest-priority design changes.
Example task
Use redesign-existing-projects to audit an existing library events page. It has two cards linking to /events/printmaking and /events/book-swap, low-contrast date labels, and uneven card spacing. Describe the audit findings, then adjust the date labels and card spacing. Retain both card links, verify at 390px and 1280px, and check that both links can be activated with the keyboard.Expected result
The audit identifies which date labels and layout rules need work. The cards fit at both widths and their dates are easier to read. Tab reaches both links and activation still opens the original two routes.
Upstream documentation
Original SKILL.md on GitHub · MIT license · Source reviewed
Frequently asked question
Can I use this skill to improve a live project incrementally?
Start with one route or component. Apply the changes in a working copy, open the route in a browser, and check the original navigation, focus behavior, and content before merging the update.