Which CSS frameworks are supported by this skill?

The skill primarily focuses on Tailwind CSS, but also includes patterns for CSS Modules, Radix UI, Headless UI, and shadcn/ui.

Does it provide guidance on animations?

Yes, it offers implementation patterns for Framer Motion and standard CSS transitions for common states like fades and slides.

Can this skill help with responsive web design?

Yes, it includes specific mobile-first responsive patterns and logic for handling different breakpoints using Tailwind utility classes.

How does the spacing system work?

It uses a standardized 4px-based scale (e.g., space-1 for 4px, space-4 for 16px) to ensure consistent padding and margins across the entire UI.

Frontend Design

Name: Frontend Design
Author: KreativReason

byKreativReason

デザインツール

Streamlines UI development by providing standardized design system tokens, responsive layout patterns, and production-grade component blueprints.

概要

The Frontend Design skill equips Claude with expert-level knowledge of modern design systems and UI/UX best practices. It enables the implementation of consistent interfaces using popular libraries like shadcn/ui, Tailwind CSS, and Framer Motion. By providing structured patterns for spacing, typography, and semantic color usage, this skill helps developers build accessible, responsive, and visually polished applications while ensuring that every component adheres to established architectural standards and interactive state logic.

主な機能

Standardized spacing and typography scales for visual consistency
Comprehensive design system reference for Tailwind CSS and shadcn/ui
Integrated animation patterns using Framer Motion and CSS transitions
0 GitHub stars
Interactive component blueprints for cards, forms, and navigation
Pre-defined layout patterns for mobile-first and sidebar-based interfaces

ユースケース

Reviewing and enforcing design pattern compliance across a frontend codebase
Refactoring legacy CSS into modern, utility-first Tailwind layouts
Building a consistent component library from scratch using semantic design tokens

概要

主な機能

Standardized spacing and typography scales for visual consistency
Comprehensive design system reference for Tailwind CSS and shadcn/ui
Integrated animation patterns using Framer Motion and CSS transitions
0 GitHub stars
Interactive component blueprints for cards, forms, and navigation
Pre-defined layout patterns for mobile-first and sidebar-based interfaces

ユースケース

Reviewing and enforcing design pattern compliance across a frontend codebase
Refactoring legacy CSS into modern, utility-first Tailwind layouts
Building a consistent component library from scratch using semantic design tokens