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

0•

디자인 도구

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

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.

주요 기능

010 GitHub stars

02Develops unconventional spatial compositions including asymmetric and grid-breaking layouts.

03Eliminates 'AI slop' by avoiding generic font families and cliched color schemes.

04Creates high-impact motion design using CSS-only solutions or specialized React libraries.

05Adds depth with advanced visual details like gradient meshes, noise textures, and grain overlays.

06Implements sophisticated typography with unique font pairings and characterful displays.

사용 사례

01Developing a bespoke React component library with a specific 'retro-futuristic' or 'brutalist' theme.

02Crafting interactive portfolios that utilize complex scroll-triggered animations and micro-interactions.

03Building a high-end marketing landing page with a unique, editorial-style aesthetic.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add boku-miyaji/claude_dev frontend-design

For use in Claude.ai and ChatGPT

Download Skill