Skills
.Work. You
Rest

design-expert

Community

Master UI/UX design, from components to responsive layouts.

Design & Creative#responsive design#front-end#design system#component design#UI/UX design#Atomic Design#Figma
Authornguyenthienthanh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designing user interfaces effectively requires deep expertise in component design, design systems, responsive layouts, and translating Figma designs into code. This Skill centralizes comprehensive UI/UX design knowledge, empowering you to create consistent and user-friendly experiences.

Core Features & Use Cases

  • Component Design Principles: Guides through Atomic Design, component anatomy, and creating detailed design specifications.
  • Design System Implementation: Provides insights into building and utilizing design systems, including design tokens, theming, and ensuring consistency.
  • Responsive Design Patterns: Offers strategies for mobile-first approaches, defining breakpoints, and creating flexible layouts that adapt to any screen size.
  • Use Case: When breaking down a new UI feature, use this skill to apply Atomic Design principles, define component specifications, and ensure responsive behavior across devices, from mobile to desktop.

Quick Start

Break down a social media post component using Atomic Design principles and define its responsive behavior

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-expert
Download link: https://github.com/nguyenthienthanh/aura-frog/archive/main.zip#design-expert

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.