Can I use this for mobile or tablet-specific designs?

Absolutely. It includes specific guidelines for mobile focus and tablet-optimized layouts, ensuring responsiveness across all devices.

Is the generated code ready for production use?

Yes, the skill emphasizes production-grade code quality, including performance optimization, accessibility, and keyboard navigation.

How does this skill avoid 'AI slop' aesthetics?

It explicitly mandates bold conceptual choices, unique typography selection, and non-standard layouts instead of defaulting to common system fonts and generic color palettes.

Which frontend frameworks does it support?

The skill is framework-agnostic but provides specific expertise in HTML/CSS/JS, React, Vue, and Tailwind CSS.

Frontend Design

Name: Frontend Design
Author: amak07

byamak07

•

デザインツール

Creates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics.

概要

This skill empowers Claude to move beyond generic AI-generated layouts by implementing bold, intentional design directions ranging from brutalist minimalism to maximalist complexity. It provides specific guidance on typography selection, motion choreography, and spatial composition to ensure web components and applications feel handcrafted and memorable rather than cookie-cutter. By prioritizing accessibility and performance, it bridges the gap between creative visual concepts and production-ready code, particularly for specialized environments like the ACR Automotive system.

主な機能

Generates non-generic, high-fidelity UI components and layouts
Optimizes for performance with sub-300ms response time considerations
Implements advanced CSS effects, motion patterns, and custom typography
1 GitHub stars
Enforces accessibility standards (ARIA) and responsive design best practices
Provides specific aesthetic themes like retro-futuristic, editorial, or industrial

ユースケース

Building a brand-specific landing page with a unique editorial layout
Developing interactive web components with complex CSS animations
Creating a tablet-optimized dashboard for specialized industry software

概要

主な機能

Generates non-generic, high-fidelity UI components and layouts
Optimizes for performance with sub-300ms response time considerations
Implements advanced CSS effects, motion patterns, and custom typography
1 GitHub stars
Enforces accessibility standards (ARIA) and responsive design best practices
Provides specific aesthetic themes like retro-futuristic, editorial, or industrial

ユースケース

Building a brand-specific landing page with a unique editorial layout
Developing interactive web components with complex CSS animations
Creating a tablet-optimized dashboard for specialized industry software