How does it improve loading experiences?

It provides patterns for skeleton screens that match content shapes, progressive loading with context, and optimistic UI updates that show success before server confirmation.

What is the 'Delight Gap' addressed by this skill?

The Delight Gap refers to the difference between a functional, usable app and one that users emotionally resonate with through high-level polish, aesthetics, and thoughtful feedback.

Can it help with AI image generation for my app?

Yes, it includes specific prompt templates for generating flat illustrations, background patterns, and icons tailored for web application interfaces.

Does this skill work with specific CSS frameworks?

While the examples focus on Tailwind CSS and shadcn/ui, the design principles and Framer Motion patterns are applicable to most modern frontend frameworks and styling libraries.

Design Craft

Name: Design Craft
Author: get-caio

byget-caio

0•

デザインツール

Transforms functional software into delightful user experiences through advanced UI patterns, micro-interactions, and emotional design.

Design Craft is a specialized skill for Claude Code designed to bridge the gap between basic professional UI and emotionally resonant applications. It provides expert guidance on implementing high-polish frontend features, including sophisticated empty and loading states, Framer Motion animations, optimistic UI updates, and strategic visual hierarchy. By focusing on the 'delight gap,' this skill helps developers move beyond standard component libraries to create interfaces that users truly love through intentional aesthetic choices and thoughtful interactive feedback.

主な機能

010 GitHub stars

02Emotional design techniques including celebration moments and personality injection

03Framer Motion implementation for polished micro-interactions and transitions

04Advanced UI patterns for inviting empty states and contextual feedback

05Optimistic UI and skeleton screen patterns to reduce perceived latency

06AI-driven illustration prompting for brand-consistent imagery and backgrounds

ユースケース

01Implementing complex loading skeletons and optimistic updates for data-heavy applications

02Refining visual hierarchy and dark mode palettes for improved readability and brand identity

03Polishing standard shadcn/ui dashboards with animations and better feedback loops

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add get-caio/harness design-craft

For use in Claude.ai and ChatGPT

Download Skill