Does it support mobile-first development?

Absolutely. It prioritizes mobile-first CSS patterns and fluid layouts that gracefully scale from mobile devices to large desktop screens.

Does this skill work with specific CSS frameworks?

The principles are framework-agnostic and can be applied to any styling solution including Tailwind CSS, CSS-in-JS, SASS, or standard CSS.

Can this skill help me create a design system?

Yes, it includes guidelines for establishing design tokens, typographic scales, and consistent spacing systems to ensure UI harmony.

How does it help with web accessibility?

It provides specific patterns for WCAG 2.1 compliance, including proper color contrast, ARIA attributes, keyboard navigation, and semantic HTML structures.

UI/UX Design & Frontend Principles

Name: UI/UX Design & Frontend Principles
Author: karchtho

bykarchtho

0•

Design Tools

Implements professional UI/UX design principles, accessibility standards, and responsive layout patterns for modern frontend development.

This skill transforms Claude into a senior UI/UX engineer, providing expert guidance on visual hierarchy, design system architecture, and user experience best practices. It assists developers in implementing mobile-first responsive designs, ensuring WCAG 2.1 accessibility compliance, and creating consistent component libraries using design tokens. By applying core design principles to layouts, styling, and user flows, it helps bridge the gap between functional code and polished, user-centric interfaces across any frontend framework.

Key Features

01Professional interaction design and microinteraction patterns

02Visual hierarchy and information architecture guidance

030 GitHub stars

04Design system tokenization for consistent colors and spacing

05Mobile-first responsive design and fluid typography patterns

06WCAG 2.1 AA accessibility compliance and semantic HTML

Use Cases

01Designing user-friendly forms with complex validation and feedback states

02Building accessible and responsive component libraries from scratch

03Refactoring existing layouts to improve visual consistency and UX

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add karchtho/my-claude-marketplace ui-ux-design

For use in Claude.ai and ChatGPT

Download Skill