Can I specify a specific design style?

Yes, you can request specific tones such as Brutalist, Minimalist, Luxury, or Retro-future to guide the creative direction of the output.

Does it follow accessibility best practices?

Yes, while focusing heavily on aesthetics, the skill is designed to respect technical constraints including performance and web accessibility standards.

Which frameworks does the Frontend Design skill support?

It is framework-agnostic but excels in HTML/CSS, React, and Vue, and often utilizes Motion libraries for high-quality animations.

What makes this different from standard Claude UI generation?

This skill specifically avoids 'AI aesthetics' by prioritizing unique typography, intentional tone, and complex visual textures like grain and motion rather than generic layouts.

Is this skill suitable for production-ready code?

Absolutely; it generates functional, refined, and meticulously detailed code intended for use in real-world professional applications.

Frontend Design

Name: Frontend Design
Author: mashharuki

bymashharuki

0•

Design Tools

Creates distinctive, production-grade frontend interfaces with high-quality design aesthetics that move beyond generic AI-generated styles.

This skill empowers Claude to act as a world-class frontend designer and engineer, moving away from cookie-cutter AI aesthetics to create highly intentional, visually striking web interfaces. It guides the model through a rigorous design-thinking process—defining tone, typography, and spatial composition—before generating functional code for React components, landing pages, or complex dashboards. Whether aiming for brutalist minimalism or luxurious editorial layouts, the skill ensures every detail, from micro-interactions to grain overlays, is meticulously crafted to be memorable, professional, and unique.

Key Features

010 GitHub stars

02Sophisticated Visual Textures like Gradient Meshes and Noise Overlays

03Creative Layout Structures including Asymmetry and Grid-breaking Elements

04Intentional Aesthetic Selection (Minimalist, Brutalist, Retro-future, etc.)

05High-Impact Motion Design and CSS-based Micro-interactions

06Advanced Typography Pairing and Custom Font Integration

Use Cases

01Building unique, high-conversion landing pages for new products or brands

02Refining and beautifying existing HTML/CSS layouts into professional-grade UIs

03Designing custom React component libraries with a specific, non-generic identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mashharuki/car frontend-design

For use in Claude.ai and ChatGPT

Download Skill