What frontend frameworks does this skill support?

The skill is framework-agnostic and can generate high-quality, production-ready code for React, Vue, Svelte, or standard HTML/CSS/JS depending on your project context.

Does the generated code comply with accessibility standards?

Yes, the skill enforces WCAG 2.1 AA compliance as a non-negotiable requirement, covering contrast ratios, keyboard navigation, and semantic HTML structure.

Can I use this with my existing design system or tokens?

Absolutely. The skill is designed to automatically detect existing Tailwind configurations, CSS variables, or theme files to ensure visual consistency with your current codebase.

What makes this skill different from standard AI frontend generation?

Unlike standard AI output, this skill explicitly avoids generic templates and 'AI slop' by prioritizing intentional design choices, professional typography, and unique layouts inspired by real-world design trends.

Frontend Design

Name: Frontend Design
Author: le-dat

byle-dat

0•

デザインツール

Creates distinctive, production-grade frontend interfaces with a professional UI/UX designer's mindset and high-end aesthetic standards.

The Frontend Design skill empowers Claude to go beyond generic AI-generated layouts by implementing bold, intentional, and high-end web interfaces. It guides the creation of implementation-ready code using modern design principles—such as sophisticated typography, fluid motion, and creative spatial composition—while strictly adhering to accessibility (WCAG 2.1 AA) and performance standards. By prioritizing a clear aesthetic point-of-view and design token consistency, this skill ensures that generated components feel handcrafted and professional rather than template-driven, making it ideal for developers building unique digital products and luxury interfaces.

主な機能

01High-end aesthetic guidance to avoid generic 'AI-looking' layouts

02Automated design token detection and integration for existing projects

03Mobile-first responsive design with fluid typography and modern CSS layouts

04Built-in WCAG 2.1 AA accessibility compliance for all UI components

05Sophisticated motion design using CSS keyframes and Framer Motion

060 GitHub stars

ユースケース

01Redesigning legacy components to meet modern UI/UX trends and accessibility standards

02Building distinctive SaaS dashboards that require a unique visual identity

03Developing high-conversion landing pages with intentional typography and interactive motion

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add le-dat/claude-skill-engineer frontend-design

For use in Claude.ai and ChatGPT

Download Skill