Installs into .claude/skills of the current project.
Are you the author of Frontend Design?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tomcounsell-frontend-design-ai)
---
name: frontend-design
description: "Build or refine frontend interfaces with deliberate visual hierarchy, coherent styling, accessible interaction, and responsive behavior."
---
# Frontend Design
Read the existing product, framework, and design system before designing. Set a clear purpose, audience, visual direction, and distinguishing choice. Fit the user's requested aesthetic and the established brand; do not reject a font, color, or common pattern merely because it is familiar.
Create hierarchy through type scale, weight, spacing, composition, and purposeful contrast. Avoid generic card grids, decorative metrics, gratuitous gradients, and repeated filler. Use motion to communicate state, honor reduced-motion preferences, and make empty/loading/error states useful. Choose optimistic updates only where rollback and error feedback are reliable.
Read the relevant technique reference as needed: [typography](reference/typography.md), [color](reference/color-and-contrast.md), [space](reference/spatial-design.md), [motion](reference/motion-design.md), [interaction](reference/interaction-design.md), [responsive layouts](reference/responsive-design.md), or [UX writing](reference/ux-writing.md). These are design guidance, not bans that override the product's requirements.
Implement working controls and verify actual desktop/mobile rendering, keyboard focus, readability, and essential flows. For projects with `.openai/hosting.json`, follow the installed Sites building and hosting skills. Report the delivered interface and verification evidence.
