A Codex skill for implementing, refactoring, and reviewing frontend UI with design-system discipline.
It helps agents avoid common UI implementation drift:
- scattered hardcoded values
- one-off layout patches
- duplicated button/card/chip implementations
- typography and spacing inconsistency
- Figma-to-code copies that ignore reusable components
- mobile safe-area and touch-target mistakes
The skill is framework-agnostic. It can be used with SwiftUI, React, React Native, Flutter, web apps, and mobile apps.
- Design tokens and semantic metrics
- Component reuse and variants
- Figma/SVG/screenshot-to-code workflows
- Typography hierarchy and truncation strategy
- Layout, spacing, safe areas, and touch targets
- Review checklists for production UI quality
Clone this repository:
git clone https://github.com/MaxHan7/frontend-ui-standards-skill.gitCopy the skill folder into your Codex skills directory:
mkdir -p ~/.codex/skills
cp -R frontend-ui-standards-skill/frontend-ui-standards ~/.codex/skills/Restart Codex if your client does not auto-refresh installed skills.
Mention the skill explicitly when working on UI:
Use $frontend-ui-standards to review this SwiftUI screen for design-system consistency.
Use $frontend-ui-standards to implement this Figma component with reusable tokens and component metrics.
Use $frontend-ui-standards to refactor these duplicated card styles into a shared component.
The skill can also be invoked implicitly by compatible Codex clients when the task involves frontend UI implementation, visual consistency, design tokens, Figma-to-code work, or component reuse.
frontend-ui-standards/
├── SKILL.md
└── agents/
└── openai.yaml
SKILL.md contains the agent-facing workflow and review standards.
agents/openai.yaml contains UI metadata for Codex clients that display skill chips or default prompts.
UI code should preserve a design system, not just match one screenshot.
The core implementation model is:
- global design tokens
- component-specific metrics
- screen-specific layout metrics
View code should describe structure and state. It should not hide raw design math in the body.
MIT