Does it handle responsive design?

Every interface is built with a mobile-first philosophy, utilizing fluid typography, flexible CSS Grid/Flexbox layouts, and standard breakpoints for seamless cross-device compatibility.

Is the generated code accessible?

Yes, WCAG 2.1 AA compliance is a non-negotiable requirement for this skill. It ensures proper color contrast, semantic HTML, keyboard navigation, and reduced-motion support.

Can I use this with my existing Tailwind or CSS variables?

Yes, the skill is programmed to detect existing design tokens in files like tailwind.config.js or CSS root variables and will use them to ensure visual consistency with your project.

Does it support modern JavaScript frameworks?

Absolutely. It generates production-grade code for React, Vue, and vanilla HTML/CSS, adapting its technical patterns to match your specific stack.

How does this skill avoid generic AI-looking designs?

The skill avoids common AI pitfalls like standard Inter/Roboto fonts and predictable layouts by drawing inspiration from professional design platforms like Awwwards and Dribbble to create intentional, distinctive interfaces.

Frontend Design Pro

Name: Frontend Design Pro
Author: le-dat

byle-dat

デザインツール

Crafts high-end, production-grade frontend interfaces with a professional UI/UX designer's mindset to eliminate generic AI aesthetics.

概要

The Frontend Design skill transforms Claude into a specialized UI/UX engineer capable of producing distinctive, non-generic web interfaces. It moves beyond standard AI templates by implementing bold visual directions, sophisticated typography pairings, and intentional motion design inspired by high-end product interfaces and award-winning editorial layouts. Whether building complex dashboards or experimental landing pages, this skill ensures every component is implementation-ready, mobile-first, and strictly compliant with WCAG 2.1 AA accessibility standards, making it the ultimate tool for developers who demand professional aesthetic quality in their code.

主な機能

Intentional UI/UX design inspired by real-world high-end references
Advanced spatial composition including asymmetrical and grid-breaking layouts
Sophisticated motion design using CSS Keyframes or Framer Motion
0 GitHub stars
Automated detection and integration of existing design tokens
Strict WCAG 2.1 AA accessibility compliance for all components

ユースケース

Creating accessible, mobile-first landing pages with high-impact animations
Transforming generic dashboard wireframes into high-end, production-ready interfaces
Developing distinctive brand-specific components that follow custom design tokens

概要

主な機能

Intentional UI/UX design inspired by real-world high-end references
Advanced spatial composition including asymmetrical and grid-breaking layouts
Sophisticated motion design using CSS Keyframes or Framer Motion
0 GitHub stars
Automated detection and integration of existing design tokens
Strict WCAG 2.1 AA accessibility compliance for all components

ユースケース

Creating accessible, mobile-first landing pages with high-impact animations
Transforming generic dashboard wireframes into high-end, production-ready interfaces
Developing distinctive brand-specific components that follow custom design tokens