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.

rldyourmnd df01b5c 2 files · 11.0 KB Updated

File contents

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.

rldyourmnd/codex-cli-bootstrap/tree/main/codex/os/linux/runtime/skills/custom/frontend-design commit df01b5c5f8

Frequently asked questions

npx skillmds@latest add rldyourmnd/frontend-design