Minimalist UI Skill for Codex: Design an Editorial Resource Grid
Create a responsive resource grid with clear type, restrained accents, and enough space to scan each item. The pinned version includes reduced-motion guidance for entrance effects.
中文Setup for Codex / Claude Code (archived skill)
Codex or Claude Code and a local project you can preview in a browser. The archived skill supplies layout and design instructions. Use your project’s CSS system and existing icon set where applicable.
- Open the standalone minimalist-skill document at the pinned archive commit.
- Save it as .agents/skills/minimalist-ui/SKILL.md in a Codex project or .claude/skills/minimalist-ui/SKILL.md in a Claude Code project.
- Start a new session, pick minimalist-ui, and preview the output at a desktop and narrow mobile width. Check the page with the browser’s reduced-motion emulation enabled.
Example task
Use minimalist-ui to design a resource index for a fictional workshop. Include three real labels: Schedule, Materials, and Getting there. Give each destination a one-line description and a simple link. Use a warm neutral canvas and a muted green accent. Preview at 375px and 1280px, and verify every link can receive keyboard focus.Expected result
The cards present the three destinations in a consistent hierarchy and fit at both widths. Link focus is visible and text stays legible. With reduced motion enabled, the page is immediately readable without an entrance animation.
Upstream documentation
Original SKILL.md on GitHub · MIT license · Source reviewed
Frequently asked question
Where does this edition’s visual hierarchy come from?
Use differences in font size and weight for headings, add whitespace between groups, and reserve the accent for elements that need attention. That gives the interface a clear reading order while keeping individual cards simple.