Can I use this with modern frameworks like React?

Yes, the skill provides guidance for HTML/CSS/JS, React, and Vue, including the use of advanced libraries like Motion for React.

How does this skill differ from standard Claude coding?

This skill enforces a 'no-slop' policy, instructing the AI to avoid generic fonts and layouts in favor of distinctive, high-end design directions and custom styling.

When should I avoid using the Frontend Design skill?

Avoid using this skill for backend development, API logic, or simple scripts where visual interface design is not a requirement.

Does it prioritize performance and accessibility?

Yes, it emphasizes production-grade code that balances technical constraints like performance and accessibility with bold aesthetic choices.

Frontend Design

Name: Frontend Design
Author: mahidalhan

bymahidalhan

•

デザインツール

Generates distinctive, production-grade web interfaces with high-end aesthetics and bespoke design systems.

概要

The Frontend Design skill empowers Claude to move beyond generic, predictable 'AI-generated' layouts by implementing bold, intentional design choices including unique typography, complex motion effects, and sophisticated spatial layouts. It focuses on creating unforgettable user interfaces tailored to specific aesthetic directions—ranging from brutalist to luxury—ensuring that every component is visually striking, functional, and production-ready while avoiding common cliches like standard system fonts and overused color palettes.

主な機能

Diverse aesthetic themes including Brutalist, Retro-futuristic, and Minimalist
Advanced spatial compositions featuring grid-breaking layouts and asymmetry
Sophisticated visual textures like gradient meshes, noise overlays, and custom cursors
20 GitHub stars
High-impact CSS and Motion library animations for micro-interactions and reveals
Bespoke typography selection using characterful display and body font pairings

ユースケース

Building high-end marketing landing pages with a unique brand identity
Rapidly prototyping production-grade interfaces that avoid 'AI slop' aesthetics
Developing interactive UI components that require custom motion and depth

概要

主な機能

Diverse aesthetic themes including Brutalist, Retro-futuristic, and Minimalist
Advanced spatial compositions featuring grid-breaking layouts and asymmetry
Sophisticated visual textures like gradient meshes, noise overlays, and custom cursors
20 GitHub stars
High-impact CSS and Motion library animations for micro-interactions and reveals
Bespoke typography selection using characterful display and body font pairings

ユースケース

Building high-end marketing landing pages with a unique brand identity
Rapidly prototyping production-grade interfaces that avoid 'AI slop' aesthetics
Developing interactive UI components that require custom motion and depth