Which frontend frameworks are supported?

The skill can generate high-quality, production-grade code for vanilla HTML/CSS/JS as well as popular frameworks like React and Vue.

Is the generated code accessible?

Yes, the skill enforces WCAG 2.1 AA contrast ratios, ensures keyboard navigability, and includes specific CSS blocks for reduced-motion preferences.

How does this skill avoid generic AI designs?

It deliberately avoids overused fonts like Inter and standard purple-on-white gradients, opting instead for bold typography, unique spatial compositions, and characterful aesthetic choices.

What design styles can I request?

You can request a wide range of styles including brutalist, minimalist, retro-futuristic, editorial, or maximalist; the skill excels at executing any clear conceptual direction.

Frontend Design

Name: Frontend Design
Author: kazuph

bykazuph

•

디자인 도구

Generates distinctive, production-grade frontend interfaces with high aesthetic quality and custom design systems.

소개

The Frontend Design skill empowers Claude to move beyond generic AI-generated layouts by implementing bold, intentional aesthetic directions for web components and applications. It focuses on sophisticated typography, unique spatial compositions, and high-impact motion design while maintaining strict adherence to accessibility standards. By avoiding overused fonts and predictable color schemes, this skill ensures that every interface is memorable, functional, and tailored to specific brand identities or creative visions, making it ideal for developers who need polished, unique web experiences.

주요 기능

Built-in WCAG 2.1 AA accessibility and reduced-motion support
Advanced spatial layouts including grid-breaking and asymmetric designs
Distinctive typography pairing and custom font selections
16 GitHub stars
Atmospheric visual details including gradient meshes, noise textures, and grain overlays
High-impact CSS and motion library animations with staggered reveals

사용 사례

Building a unique landing page that breaks standard template conventions
Modernizing legacy interfaces with contemporary design trends and custom motion
Developing polished UI components with specific brand-driven aesthetics

소개

주요 기능

Built-in WCAG 2.1 AA accessibility and reduced-motion support
Advanced spatial layouts including grid-breaking and asymmetric designs
Distinctive typography pairing and custom font selections
16 GitHub stars
Atmospheric visual details including gradient meshes, noise textures, and grain overlays
High-impact CSS and motion library animations with staggered reveals

사용 사례

Building a unique landing page that breaks standard template conventions
Modernizing legacy interfaces with contemporary design trends and custom motion
Developing polished UI components with specific brand-driven aesthetics