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.

主要功能

01Built-in WCAG 2.1 AA accessibility and reduced-motion support

02Advanced spatial layouts including grid-breaking and asymmetric designs

03Distinctive typography pairing and custom font selections

0416 GitHub stars

05Atmospheric visual details including gradient meshes, noise textures, and grain overlays

06High-impact CSS and motion library animations with staggered reveals

使用场景

01Building a unique landing page that breaks standard template conventions

02Modernizing legacy interfaces with contemporary design trends and custom motion

03Developing polished UI components with specific brand-driven aesthetics

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kazuph/reviw frontend-design

For use in Claude.ai and ChatGPT

Download Skill