# Frontend Design

> Create distinctive production-grade frontend interfaces for web pages, components, and dashboards. Use when user asks to design or improve UI/UX, visual style, layout, or frontend polish in HTML/CSS/JS/TS/React.

- Skill: `rldyourmnd/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add rldyourmnd/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rldyourmnd/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rldyourmnd (https://skillmd.com/u/rldyourmnd)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rldyourmnd/frontend-design

---


# Frontend Design (Codex)

Use this skill when the task is primarily visual frontend work.

## Workflow
1. Confirm constraints: framework, design system, target devices, accessibility needs.
2. If no design system exists, define a clear visual direction (type, color, spacing, motion) before coding.
3. Implement responsive layout first, then component states (hover/focus/disabled/loading/error).
4. Check accessibility basics: semantic structure, contrast, keyboard flow, focus visibility, labels.
5. Keep performance sane: avoid heavy assets and unnecessary runtime work.
6. Summarize decisions and tradeoffs in plain terms.

## Output Standard
- Production-usable code, not placeholders.
- Consistent spacing/typography tokens.
- Mobile + desktop readiness.
- No generic "template" aesthetics unless explicitly requested.