What is the design-expert skill for Claude Code?

It is a specialized capability within the Aura Frog plugin that provides Claude with deep UI/UX design knowledge, including component architecture, design system best practices, and layout strategies.

Does this skill support specific CSS frameworks?

Yes, it includes detailed guidance for popular libraries such as Tailwind CSS, shadcn/ui, Material UI, Ant Design, Chakra UI, and several others.

How does the design-expert skill handle responsive design?

It follows a mobile-first approach, providing specific guidance for standard breakpoints: mobile ( 1024px).

Is this skill triggered automatically?

No, it is set to autoInvoke: false. You can trigger it using specific keywords like 'design component', 'UI breakdown', or 'design system' to get expert guidance.

Can this skill help with Figma handoffs?

Yes, it includes sub-skills specifically for Figma analysis techniques, helping Claude interpret design specs and translate them into structured code components.

UI/UX Design Expert

Name: UI/UX Design Expert
Author: nguyenthienthanh

bynguyenthienthanh

•

デザインツール

Empowers Claude Code with professional UI/UX design patterns, atomic design principles, and responsive layout strategies for modern web development.

The design-expert skill transforms Claude Code into a sophisticated design consultant, providing structured guidance on component anatomy, design system architecture, and mobile-first responsive layouts. It utilizes atomic design methodologies to break down complex interfaces into manageable atoms, molecules, and organisms, while ensuring consistency through design tokens. Whether you are conducting a Figma analysis, building a new component library from scratch, or implementing popular frameworks like Tailwind CSS or shadcn/ui, this skill provides the necessary specs and best practices to ensure production-grade visual quality and user experience.

主な機能

011 GitHub stars

02Figma file analysis and structural UI breakdown

03Mobile-first responsive layout planning and breakpoints

04Design system architecture and design token management

05Atomic Design methodology implementation (Atoms to Pages)

06Deep integration with Tailwind, shadcn/ui, and Material UI

ユースケース

01Establishing a scalable design system with consistent color palettes, spacing, and typography.

02Breaking down a complex Figma design into reusable React or Vue components.

03Refactoring existing web layouts to be fully responsive across mobile, tablet, and desktop devices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyenthienthanh/aura-frog design-expert

For use in Claude.ai and ChatGPT

Download Skill