Does it support animation?

Yes, it focuses on well-orchestrated motion and high-impact micro-interactions, preferring CSS-only solutions for better performance and smoothness.

Does this skill work with modern CSS frameworks?

Yes, it applies high-level design principles across various technical stacks, including Tailwind CSS, CSS Modules, and vanilla CSS, while prioritizing performance.

Do I need design mockups to use this skill?

No, this skill is specifically designed to create high-quality UI/UX even when no design mockups are provided, acting as both the designer and the developer.

What makes this skill different from standard Claude coding?

It enforces a designer-first mindset, intentionally avoiding generic fonts like Inter or Arial and predictable 'AI slop' color schemes in favor of bold, professional aesthetic directions.

How does it handle web accessibility?

While focusing on bold aesthetics, the skill treats accessibility and technical performance as core constraints within the design process.

Frontend UI/UX Design

Name: Frontend UI/UX Design
Author: jobc90

byjobc90

0•

디자인 도구

Crafts distinctive, production-grade frontend interfaces with a designer's eye for typography, spatial composition, and micro-interactions.

This skill transforms Claude into a designer-turned-developer who prioritizes high-fidelity aesthetics and intentional user experiences. It bypasses generic 'AI-generated' design tropes—like predictable layouts and overused gradients—to create bold, memorable interfaces through curated typography, cohesive color palettes, and sophisticated CSS-driven motion. It is ideal for developers who need to build visually stunning applications without pre-existing design mockups or Figma files.

주요 기능

01Non-Standard Spatial Composition and Grid-Breaking Layouts

020 GitHub stars

03Atmospheric Visual Details including Gradient Meshes and Noise Textures

04Aesthetic Direction Selection (Brutalist, Minimalist, Luxury, etc.)

05High-Impact CSS Motion and Micro-interactions

06Curated Typography and Custom Color Harmony

사용 사례

01Building high-end landing pages from functional requirements without mockups.

02Refactoring generic dashboards into branded, professional interfaces.

03Implementing complex, performance-optimized CSS animations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jobc90/multi-ai-orchestration frontend-ui-ux

For use in Claude.ai and ChatGPT

Download Skill