# design-kit

A design library for AI coding agents: a /design router that picks the right skill or recipe, plus vetted skills for typography, color, motion, UX writing, usability, landing copy, native iOS and more.

Version 1.0.0.

## Install

```sh
claude plugin marketplace add AtlasScope/agent-kit
claude plugin install design-kit@agent-kit
```

## Skills (37)

- [animate](https://atlasscope.dev/skills/animate): Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits.
- [animate-expo](https://atlasscope.dev/skills/animate-expo): Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades.
- [animation-performance](https://atlasscope.dev/skills/animation-performance): Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames.
- [animation-vocabulary](https://atlasscope.dev/skills/animation-vocabulary): Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding).
- [apple-design](https://atlasscope.dev/skills/apple-design): Apple's approach to interface design and fluid, physical motion, translated for the web.
- [ask-sonner](https://atlasscope.dev/skills/ask-sonner): Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters.
- [break-ui](https://atlasscope.dev/skills/break-ui): Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each.
- [color-expert](https://atlasscope.dev/skills/color-expert): Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology.
- [copywriting](https://atlasscope.dev/skills/copywriting): When the user wants to write, rewrite, or improve marketing copy for any page, including homepage, landing pages, pricing pages, feature pages, about pages, or product pages.
- [cro](https://atlasscope.dev/skills/cro): When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms.
- [design](https://atlasscope.dev/skills/design): Use only when the user explicitly invokes /design or $design.
- [design-everyday-things](https://atlasscope.dev/skills/design-everyday-things): Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models.
- [emil-design-eng](https://atlasscope.dev/skills/emil-design-eng): This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
- [find-animation-opportunities](https://atlasscope.dev/skills/find-animation-opportunities): Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't.
- [fix-writing](https://atlasscope.dev/skills/fix-writing): One command for text the user dislikes.
- [hallmark](https://atlasscope.dev/skills/hallmark): Design skill for websites and new pages that look designed, not generated.
- [hooked-ux](https://atlasscope.dev/skills/hooked-ux): Design habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment).
- [improve-animations](https://atlasscope.dev/skills/improve-animations): Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute.
- [improve-retention](https://atlasscope.dev/skills/improve-retention): Diagnose and fix retention problems using behavior design (B=MAP).
- [ios-hig-design](https://atlasscope.dev/skills/ios-hig-design): Design native iOS interfaces following Apple Human Interface Guidelines.
- [lean-ux](https://atlasscope.dev/skills/lean-ux): Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables.
- [microinteractions](https://atlasscope.dev/skills/microinteractions): Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones.
- [mobile-native](https://atlasscope.dev/skills/mobile-native): Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed.
- [oklch-skill](https://atlasscope.dev/skills/oklch-skill): OKLCH color space for web projects.
- [pick-ui-library](https://atlasscope.dev/skills/pick-ui-library): Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more.
- [product-marketing](https://atlasscope.dev/skills/product-marketing): When the user wants to create or update their product marketing context document.
- [prototype](https://atlasscope.dev/skills/prototype): Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right.
- [refactoring-ui](https://atlasscope.dev/skills/refactoring-ui): Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
- [review-animations](https://atlasscope.dev/skills/review-animations): Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy.
- [steve-jobs-design-review](https://atlasscope.dev/skills/steve-jobs-design-review): Review designs, products, and features with Steve Jobs' standards: ruthless simplicity, focus, and end-to-end excellence.
- [stop-slop](https://atlasscope.dev/skills/stop-slop): Remove AI writing patterns from prose.
- [swiftui-pro](https://atlasscope.dev/skills/swiftui-pro): Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.
- [top-design](https://atlasscope.dev/skills/top-design): Create award-winning, immersive web experiences at the level of Awwwards-featured agencies.
- [ux-heuristics](https://atlasscope.dev/skills/ux-heuristics): Evaluate and improve interface usability using heuristic analysis.
- [ux-writing](https://atlasscope.dev/skills/ux-writing): Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text.
- [web-typography](https://atlasscope.dev/skills/web-typography): Select, pair, and implement typefaces for web projects.
- [write-swift](https://atlasscope.dev/skills/write-swift): How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet.

Source: https://atlasscope.dev/kits/design-kit