How does this skill avoid 'AI slop' in frontend code?

The skill specifically prohibits the use of generic font families like Inter or Arial and avoids cliched color schemes. It focuses on intentional design choices, unique textures, and non-standard layouts to ensure a hand-crafted look.

What frameworks are supported by the Frontend Design skill?

It is framework-agnostic and can generate high-quality code for React, Vue, and standard HTML/CSS/JS, adapting its implementation to the technical constraints of your project.

Can I use this skill for mobile-responsive designs?

Yes, the skill emphasizes spatial composition and production-grade code, which includes implementing responsive layouts that maintain aesthetic integrity across different screen sizes.

Does it include support for animations?

Absolutely. It prioritizes CSS-only solutions for simple interactions and can utilize libraries like Motion for React to create sophisticated, high-impact visual reveals and hover states.

Frontend Design

Name: Frontend Design
Author: Microck

byMicrock

•

デザインツール

Creates distinctive, production-grade frontend interfaces that prioritize high-quality aesthetics and unique design directions.

概要

This skill empowers Claude to transcend generic AI-generated aesthetics by applying intentional design thinking to web development tasks. It guides the creation of visually striking, production-ready interfaces by focusing on unconventional typography, sophisticated color theory, advanced motion design, and creative spatial compositions. Whether building a brutalist landing page or a refined luxury dashboard, this skill ensures that the resulting code is both functional and memorable, avoiding common 'AI slop' patterns like overused fonts and predictable layouts.

主な機能

Generates production-grade code for React, Vue, and vanilla HTML/CSS/JS
Curates unique typography pairings and distinctive color palettes
Integrates advanced CSS motion and high-impact micro-interactions
89 GitHub stars
Implements bold aesthetic directions ranging from minimal to maximalist
Utilizes creative spatial layouts including grid-breaking and asymmetry

ユースケース

Building high-conversion landing pages with a unique brand identity
Developing custom UI component libraries with specific aesthetic themes
Creating interactive web experiences with advanced animations and textures

概要

主な機能

Generates production-grade code for React, Vue, and vanilla HTML/CSS/JS
Curates unique typography pairings and distinctive color palettes
Integrates advanced CSS motion and high-impact micro-interactions
89 GitHub stars
Implements bold aesthetic directions ranging from minimal to maximalist
Utilizes creative spatial layouts including grid-breaking and asymmetry

ユースケース

Building high-conversion landing pages with a unique brand identity
Developing custom UI component libraries with specific aesthetic themes
Creating interactive web experiences with advanced animations and textures