Implement Next.js UI States with Codex
Build a page within the project’s component and routing conventions. The source skill covers loading, empty, error, and interactive states using Next.js, TypeScript, and common React libraries.
中文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/web-app-ui-implementation folder to .agents/skills/web-app-ui-implementation in your project, with its companion files.
- Open your project in Codex. Select the skill via /skills or $web-app-ui-implementation and use the example on this page.
Example task
Add topic filters to an existing Next.js reading list with its current components. Create fixtures for two topics, an empty result, and a local loading failure.What to check
Keyboard users can operate the filters. Results, empty results, and a failure each show feedback. Check the list in a narrow viewport and record the existing build or type-check results.
Original SKILL.md on GitHub · Updated
Frequently asked question
Where should I start in a Radix or shadcn/ui project?
Inspect package.json, existing components, and style variables. Reuse the project’s library, icons, and focus styling, then add the missing states.