Codex Material Design 3 Button Tokens and Accessible Icon Labels
Apply the Cubby Material Design 3 guide to semantic tokens, icon labels, and light and dark themes.
中文Install in Codex
Bring the target button and current theme styles into the Codex workspace. The example uses Cubby's semantic tokens and Lucide icon convention.
- Review `.agents/skills/frontend-material-ui/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.agents/skills/frontend-material-ui/` in your project and save the reviewed file as `.agents/skills/frontend-material-ui/SKILL.md`.
- Start Codex from that project's root, then type `$frontend-material-ui` and select the matching skill.
Example task
Review an icon-only secondary button using both themes.
{"action":"Open filters","role":"secondary","iconOnly":true,"themes":["light","dark"]}What to check
Give the button the accessible name `Open filters` and use `secondary/on-secondary`. Verify focus styling and contrast in both themes.
Original SKILL.md on GitHub · Updated
Frequently asked question
Can success or error be conveyed with color alone?
Add text or an icon so the state is understandable when users cannot distinguish the color.