What resources does the skill use for its advice?

The skill utilizes dedicated resources for design principles and a comprehensive UI checklist to ensure every recommendation is grounded in industry best practices.

Can it help me learn design theory while I code?

Yes, it uses an 'Analytic & Constructive' style that explains the 'why' behind design decisions using principles like Contrast, Repetition, Alignment, and Proximity.

Does it support specific CSS frameworks?

While it understands general CSS, it is highly optimized for Tailwind CSS, providing specific classes and implementation patterns for modern web development.

How does this skill help with web accessibility?

The skill references WCAG contrast ratios and accessibility checklists to ensure that color palettes and typography are legible and inclusive for all users.

Graphic Design & UI Expert

Name: Graphic Design & UI Expert
Author: Beerspitnight

byBeerspitnight

0•

Design Tools

Empowers developers with professional UI/UX guidance, typography strategies, and design-to-code implementation patterns.

This skill transforms Claude into a Senior Product Designer capable of auditing layouts, generating accessible color palettes, and optimizing typography. It is particularly useful for developers who need to translate complex visual concepts into production-ready CSS or Tailwind code while adhering to established design principles like CRAP (Contrast, Repetition, Alignment, Proximity) and WCAG accessibility standards. By bridging the gap between design theory and technical implementation, it ensures that every UI component is both aesthetically pleasing and functional.

Key Features

010 GitHub stars

02Design audits based on industry-standard UI checklists

03Layout strategy guidance using professional design axioms

04Typography and visual hierarchy optimization

05WCAG-compliant color palette generation

06Direct conversion of design concepts to Tailwind CSS or React

Use Cases

01Generating a cohesive and accessible color scheme for a new web application

02Critiquing an existing UI component for improved usability and balance

03Translating a descriptive layout concept into responsive, production-ready code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add beerspitnight/cc-skills graphic-design-expert

For use in Claude.ai and ChatGPT

Download Skill