Can this skill generate code for modern frameworks?

Yes, it supports production-grade implementation in HTML/CSS/JS, React, Vue, and other major frameworks while maintaining high aesthetic standards.

Does it include support for animations?

Absolutely. The skill prioritizes high-impact motion, utilizing CSS-only animations for lightweight builds and libraries like Framer Motion for React applications.

Is the generated code accessible and performant?

Yes, the skill is designed to create 'production-grade' interfaces, meaning it respects technical constraints, performance, and accessibility requirements alongside visual design.

How does this skill avoid generic AI-generated aesthetics?

It specifically avoids overused system fonts and 'purple gradient' palettes, opting instead for bold, intentional design directions like brutalist, editorial, or retro-futuristic styles.

Frontend Design

Name: Frontend Design
Author: boku-miyaji

byboku-miyaji

Design Tools

Generates distinctive, production-grade frontend interfaces with high-quality aesthetics that avoid generic AI-generated patterns.

About

The Frontend Design skill transforms Claude into a sophisticated UI/UX designer capable of creating bespoke web components and applications. Instead of defaulting to predictable 'AI aesthetics,' this skill employs bold design thinking—ranging from brutalist minimalism to maximalist chaos—to deliver unforgettable user experiences. It focuses on meticulous typography, advanced motion design, unconventional spatial layouts, and rich textures to ensure that every interface is functional, accessible, and visually striking.

Key Features

0 GitHub stars
Develops unconventional spatial compositions including asymmetric and grid-breaking layouts.
Eliminates 'AI slop' by avoiding generic font families and cliched color schemes.
Creates high-impact motion design using CSS-only solutions or specialized React libraries.
Adds depth with advanced visual details like gradient meshes, noise textures, and grain overlays.
Implements sophisticated typography with unique font pairings and characterful displays.

Use Cases

Developing a bespoke React component library with a specific 'retro-futuristic' or 'brutalist' theme.
Crafting interactive portfolios that utilize complex scroll-triggered animations and micro-interactions.
Building a high-end marketing landing page with a unique, editorial-style aesthetic.

About

Key Features

0 GitHub stars
Develops unconventional spatial compositions including asymmetric and grid-breaking layouts.
Eliminates 'AI slop' by avoiding generic font families and cliched color schemes.
Creates high-impact motion design using CSS-only solutions or specialized React libraries.
Adds depth with advanced visual details like gradient meshes, noise textures, and grain overlays.
Implements sophisticated typography with unique font pairings and characterful displays.

Use Cases

Developing a bespoke React component library with a specific 'retro-futuristic' or 'brutalist' theme.
Crafting interactive portfolios that utilize complex scroll-triggered animations and micro-interactions.
Building a high-end marketing landing page with a unique, editorial-style aesthetic.