Use this skill to make UI changes feel modern, intentional, and consistent without drifting from the repo’s design system (if one exists).
This skill complements frontend-design (for creating UI) and design-system-enforcer (for enforcing tokens/components). Use this skill when you need explicit aesthetic rules, not just “make it nicer”.
Workflow (Prescriptive)
Discover constraints (don’t invent a new system).
Find existing tokens/theme/components in packages/, components/, ui/, theme.*.
Identify typography scale and spacing scale if present.
Identify interaction patterns already used (loading/empty/error, dialogs, toasts).
Apply the modern UI/UX baseline (use the checklist).
Use references/modern-ui-ux-checklist.md.
When a design system exists, prefer tokens/components over custom styles.
Ensure accessibility is not regressed.
For web: keyboard + focus + semantics.
For RN: labels/roles + dynamic type + touch targets.
If needed, pair with the a11y-review skill.
Produce a “before/after” improvement plan.
3-7 targeted changes that upgrade the feel:
typography hierarchy
spacing rhythm
component states
motion restraint
color and elevation discipline
Resources
Checklist: references/modern-ui-ux-checklist.md
Report template: assets/modern-ui-ux-review.md
1---2name: modern-ui-ux3description: Modern UI/UX4---56# Modern UI/UX78Use this skill to make UI changes feel modern, intentional, and consistent without drifting from the repo’s design system (if one exists).910This skill complements `frontend-design` (for creating UI) and `design-system-enforcer` (for enforcing tokens/components). Use this skill when you need explicit aesthetic rules, not just “make it nicer”.1112## Workflow (Prescriptive)13141. Discover constraints (don’t invent a new system).15- Find existing tokens/theme/components in `packages/`, `components/`, `ui/`, `theme.*`.16- Identify typography scale and spacing scale if present.17- Identify interaction patterns already used (loading/empty/error, dialogs, toasts).18192. Apply the modern UI/UX baseline (use the checklist).20- Use `references/modern-ui-ux-checklist.md`.21- When a design system exists, prefer tokens/components over custom styles.22233. Ensure accessibility is not regressed.24- For web: keyboard + focus + semantics.25- For RN: labels/roles + dynamic type + touch targets.26- If needed, pair with the `a11y-review` skill.27284. Produce a “before/after” improvement plan.29- 3-7 targeted changes that upgrade the feel:30 - typography hierarchy31 - spacing rhythm32 - component states33 - motion restraint34 - color and elevation discipline3536## Resources3738- Checklist: `references/modern-ui-ux-checklist.md`39- Report template: `assets/modern-ui-ux-review.md`40
Run npx skillmds@latest add apexscaleai/modern-ui-ux in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Modern UI/UX It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
apexscaleai (@apexscaleai) published this skill. Their other Agent Skills are listed on their SkillMD profile.
apexscaleai