# Frontend Design

> Design and implement polished, usable frontend screens with production-minded UX details.

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

---


# Frontend Design

Use this skill for UI screens, web apps, components, product flows, and visual polish.

Guidelines:
- Build the actual usable screen first, not a marketing placeholder.
- Match the app's existing design language before introducing new patterns.
- Make key workflows obvious and efficient.
- Use stable layout dimensions so labels, icons, and dynamic states do not shift the UI.
- Check mobile and desktop behavior for overflow, overlap, and text clipping.
- Prefer real product visuals, data, screenshots, or generated bitmap assets when visuals are needed.