Document and Refactor a Frontend Handoff with Codex
Package the component changes, design tokens, interaction states, and accessibility checks a teammate needs. The skill helps separate data and presentation responsibilities before handoff.
中文Install in Codex
Use Codex with access to a local project. Keep the skill directory and its companion files from the same pinned revision.
- Run git clone https://github.com/Eldergenix/Codex-Design.git. From the checkout, run git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c.
- Copy the full skills/handoff-and-refactor folder to .agents/skills/handoff-and-refactor in your project, with its companion files.
- Open your project in Codex. Select the skill via /skills or $handoff-and-refactor and use the example on this page.
Example task
Use a mock reading list whose screen component owns filters, cards, and the empty state. Extract the filters and cards, preserve the existing behavior, and record keyboard checks and known gaps.What to check
The handoff identifies changed paths, component responsibilities, filter and empty states, checks actually run, and remaining verification.
Original SKILL.md on GitHub · Updated
Frequently asked question
How should a handoff record checks that are still pending?
Keep a separate pending entry. For a keyboard check you ran, record the steps and result. A device you did not use stays listed as a verification gap.