← ClaudeAtlas

design-tastelisted

Use whenever building, modifying, or reviewing UI — React components, pages, layouts, CSS, animations, micro-interactions, or design system work. Encodes a curated set of design-engineering philosophies (Emil Kowalski, animations.dev, impeccable.style, tasteskill.dev) covering taste, motion, polish, and the unseen details that make software feel right. Auto-invoke alongside ui-ux-pro-max for all frontend work.
iamnolanhu/claude-dotfiles · ★ 1 · Web & Frontend · score 62
Install: claude install-skill iamnolanhu/claude-dotfiles
# Design Taste This skill bundles four curated philosophies on craft, taste, and design engineering. Read this file in full when starting any UI work — it is the meta-index. Deep dives live in the referenced docs and URLs. ## When this skill applies - Any work touching `apps/*/`, `packages/ui/`, or any component, page, layout, or stylesheet - Animation, transition, easing, or motion design decisions - Code review on UI/visual changes - Picking durations, easings, hover states, button feedback, popover/modal behavior - Anything where the answer to "does this feel right?" matters Compose with `ui-ux-pro-max` (general UI principles) and project-local `/design-system` skill (monorepo brand enforcement). All three layer. ## The four sources (in priority order) ### 1. Emil Kowalski — Design Engineering ★ primary The deepest, most actionable of the four. Covers animation decision framework, easings, durations, component-by-component patterns (buttons, popovers, tooltips, toasts), gestures, clip-path tricks, performance, accessibility, and the Sonner principles. **Full content cached locally:** `~/.claude/references/design-engineering-emil.md` — read this before non-trivial animation or component polish work. Verbatim from Emil's repo, link-rot proof. **Source:** [emilkowal.ski/skill](https://emilkowal.ski/skill) · repo: [github.com/emilkowalski/skill](https://github.com/emilkowalski/skill) · course: [animations.dev](https://animations.dev/) **Hot-loaded must-knows** (the r