What frameworks are supported by the Frontend Design skill?

It generates functional code for all major web standards including React, Vue, and vanilla HTML/CSS/JS, ensuring the design is integrated with production-ready architecture.

Does it follow accessibility and performance best practices?

While the focus is on distinctive design, the skill emphasizes production-grade code, meaning it prioritizes clean semantic HTML, efficient CSS, and standard accessibility patterns.

How does this skill avoid generic AI aesthetics?

The skill is programmed to reject 'AI slop' by avoiding overused fonts like Inter or Arial and generic purple-to-blue gradients. It prioritizes bold typography, intentional negative space, and specific aesthetic directions like brutalism or minimalism.

Can it handle complex animations and motion design?

Yes. The skill focuses on high-impact motion, utilizing CSS-only solutions for performance or libraries like Framer Motion for React to create sophisticated, staggered reveals and hover states.

Frontend Design Expert

Name: Frontend Design Expert
Author: ai-wes

byai-wes

디자인 도구

Creates distinctive, production-grade frontend interfaces with high design quality that avoids generic AI aesthetics.

소개

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of building memorable, high-performance web interfaces. It moves beyond standard component libraries to implement bold aesthetic directions—ranging from brutalist to luxury—using refined typography, intentional color palettes, and advanced motion design. Whether generating landing pages, React components, or complex dashboards, this skill ensures that every output feels bespoke, meticulously polished, and production-ready.

주요 기능

Generates production-grade code for React, Vue, and vanilla HTML/CSS
0 GitHub stars
Selects unique typography and characterful font pairings
Applies custom textures, grain overlays, and gradient meshes
Creates advanced layouts using CSS Grid and asymmetrical compositions
Implements sophisticated motion design and micro-interactions

사용 사례

Building high-conversion landing pages with unique visual identities
Designing polished, data-rich dashboards that prioritize clarity and style
Developing distinctive React component libraries for creative projects

소개

주요 기능

Generates production-grade code for React, Vue, and vanilla HTML/CSS
0 GitHub stars
Selects unique typography and characterful font pairings
Applies custom textures, grain overlays, and gradient meshes
Creates advanced layouts using CSS Grid and asymmetrical compositions
Implements sophisticated motion design and micro-interactions

사용 사례

Building high-conversion landing pages with unique visual identities
Designing polished, data-rich dashboards that prioritize clarity and style
Developing distinctive React component libraries for creative projects