# Startup Skills: Design

> Every Design skill in the index, with a line saying when to use each one.

I index these, I do not host them. Every entry points at the original author's
repo and carries a source byline.

## Entries (50)

- [DS adoption plan](https://github.com/bradfrost/skills/tree/main/skills/design-systems/ds-adoption-plan) by Brad Frost: Use when moving an existing product onto its design system needs a phased estimate.
- [DS ASCII](https://github.com/bradfrost/skills/tree/main/skills/design-systems/ds-ascii) by Brad Frost: Use when sketching an ASCII wireframe built from real components in the design system.
- [DS inspection](https://github.com/bradfrost/skills/tree/main/skills/design-systems/ds-inspection) by Brad Frost: Use when a design system needs a station-by-station audit and a prioritised work order.
- [Product inspection](https://github.com/bradfrost/skills/tree/main/skills/product-design/product-inspection) by Brad Frost: Use when a shipping product, not its design system, needs a prioritised health check.
- [Vibe killer](https://github.com/bradfrost/skills/tree/main/skills/product-design/vibe-killer) by Brad Frost: Use when a generated page carries bespoke CSS instead of the design system.
- [Chiaroscuro](https://github.com/howells/skills/blob/main/chiaroscuro/SKILL.md) by Daniel Howells: Use when designing polished responsive web UI with Tailwind v4.
- [Signage](https://github.com/howells/skills/blob/main/signage/SKILL.md) by Daniel Howells: Use when interface labels read in company language rather than the user's own.
- [Typecase](https://github.com/howells/skills/blob/main/typecase/SKILL.md) by Daniel Howells: Use when raw font utilities have multiplied and a type ramp needs consolidating.
- [Animate](https://github.com/emilkowalski/skills/tree/main/skills/animate) by Emil Kowalski: Use when something needs to animate and no motion exists for it yet.
- [Animate Expo](https://github.com/emilkowalski/skills/tree/main/skills/animate-expo) by Emil Kowalski: Use when animating screens, gestures or sheets in an Expo or React Native app.
- [Animation vocabulary](https://github.com/emilkowalski/skills/tree/main/skills/animation-vocabulary) by Emil Kowalski: Use when a motion effect can be described but its name is not known.
- [Apple design](https://github.com/emilkowalski/skills/tree/main/skills/apple-design) by Emil Kowalski: Use when web UI should follow Apple's approach to gestures, springs and physical motion.
- [Design Engineering](https://github.com/emilkowalski/skills/tree/main/skills/emil-design-eng) by Emil Kowalski: Use when UI polish, component design or animation calls should follow Emil Kowalski's approach.
- [Improve animations](https://github.com/emilkowalski/skills/tree/main/skills/improve-animations) by Emil Kowalski: Use when a whole codebase's motion needs a prioritised plan rather than a review.
- [Pick UI library](https://github.com/emilkowalski/skills/tree/main/skills/pick-ui-library) by Emil Kowalski: Use when a frontend task needs one library chosen from a curated shortlist.
- [Prototype](https://github.com/emilkowalski/skills/tree/main/skills/prototype) by Emil Kowalski: Use when trying genuinely different builds of one UI piece behind a live picker.
- [Review animations](https://github.com/emilkowalski/skills/tree/main/skills/review-animations) by Emil Kowalski: Use when finished motion needs judging against a craft bar before it ships.
- [Transitions.dev](https://github.com/Jakubantalik/transitions.dev/blob/main/skills/transitions-dev/SKILL.md) by Jakub Antalik: Use when building CSS transitions for badges, dropdowns, modals and page changes.
- [Transitions polish](https://github.com/Jakubantalik/transitions.dev/blob/main/skills/transitions-polish/SKILL.md) by Jakub Antalik: Use when motion already works and the durations, easing and stagger need tuning.
- [Better accessibility](https://github.com/jakubkrehel/skills/blob/main/skills/better-accessibility/SKILL.md) by Jakub Krehel: Use when a project needs checking against accessibility standards and best practices.
- [Better colors](https://github.com/jakubkrehel/skills/blob/main/skills/better-colors/SKILL.md) by Jakub Krehel: Use when building a colour system, palettes or semantic colour tokens.
- [Better interface](https://github.com/jakubkrehel/skills/blob/main/skills/better-interface/SKILL.md) by Jakub Krehel: Use when one review should cover accessibility, layout, writing, type, colour and polish.
- [Better layout](https://github.com/jakubkrehel/skills/blob/main/skills/better-layout/SKILL.md) by Jakub Krehel: Use when a layout's grouping, alignment and reading order need working out.
- [Better typography](https://github.com/jakubkrehel/skills/blob/main/skills/better-typography/SKILL.md) by Jakub Krehel: Use when type scale, spacing, wrapping or OpenType features need working out.
- [Better UI](https://github.com/jakubkrehel/skills/blob/main/skills/better-ui/SKILL.md) by Jakub Krehel: Use when UI details like border radius, alignment, depth and hit areas need polish.
- [Better writing](https://github.com/jakubkrehel/skills/blob/main/skills/better-writing/SKILL.md) by Jakub Krehel: Use when a product's interface copy needs improving.
- [Break](https://github.com/jakubkrehel/skills/blob/main/skills/break/SKILL.md) by Jakub Krehel: Use when a component needs rendering in every state to stress test it.
- [Explain interface](https://github.com/jakubkrehel/skills/blob/main/skills/explain-interface/SKILL.md) by Jakub Krehel: Use when working out how something on the web was built.
- [Interface review](https://github.com/jakubkrehel/skills/blob/main/skills/interface-review/SKILL.md) by Jakub Krehel: Use when existing work needs a detailed findings report across UI, type and layout.
- [Variant](https://github.com/jakubkrehel/skills/blob/main/skills/variant/SKILL.md) by Jakub Krehel: Use when one component needs several versions to compare before picking one.
- [Build comments](https://github.com/johannesmutter/interface-skills/tree/main/skills/build-comments) by Johannes Mutter: Use when adding comments, replies, reactions or annotation to a product.
- [Review comments](https://github.com/johannesmutter/interface-skills/tree/main/skills/review-comments) by Johannes Mutter: Use when an existing comment thread implementation needs judging against a high bar.
- [Baseline UI](https://github.com/ibelick/ui-skills/tree/main/skills/baseline-ui) by Julien Thibeaut: Use when UI code needs a fast cleanup of spacing, hierarchy and typography.
- [Create DESIGN.md](https://github.com/ibelick/ui-skills/tree/main/skills/create-design-md) by Julien Thibeaut: Use when a product's design language needs documenting as a DESIGN.md for agents.
- [Fixing accessibility](https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility) by Julien Thibeaut: Use when adding forms, dialogs or controls, or checking a page against WCAG.
- [Fixing motion performance](https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance) by Julien Thibeaut: Use when a transition drops frames and the cause is layout or compositing.
- [Improve UI](https://github.com/ibelick/ui-skills/tree/main/skills/improve-ui) by Julien Thibeaut: Use when refining an interface means written plans for another agent, not direct edits.
- [AI output judgement](https://github.com/kemiljk/skills/blob/main/skills/ai-output-judgement/SKILL.md) by Karl Koch: Use when generated UI, copy or code needs a quality critique.
- [Android native UI](https://github.com/kemiljk/skills/blob/main/skills/android-native-ui/SKILL.md) by Karl Koch: Use when building or reviewing Android interfaces in Compose or Views.
- [Apple native UI](https://github.com/kemiljk/skills/blob/main/skills/apple-native-ui/SKILL.md) by Karl Koch: Use when building or reviewing native Apple interfaces, including macOS window behaviour.
- [dxe](https://github.com/kemiljk/skills/blob/main/skills/dxe/SKILL.md) by Karl Koch: Use when a repository or UI surface needs a design engineering review.
- [Fluid design](https://github.com/kemiljk/skills/blob/main/skills/fluid-design/SKILL.md) by Karl Koch: Use when springs, gestures or interruptible motion need physical continuity under direct manipulation.
- [Humane functionalism](https://github.com/kemiljk/skills/blob/main/skills/humane-functionalism/SKILL.md) by Karl Koch: Use when a screen or flow needs a Danish functionalist design pass.
- [Modern CSS & HTML](https://github.com/kemiljk/skills/blob/main/skills/modern-css-html/SKILL.md) by Karl Koch: Use when a legacy CSS or HTML workaround may have a native replacement.
- [12 principles of animation](https://github.com/raphaelsalaja/skill/blob/main/skills/12-principles-of-animation/SKILL.md) by Raphael Salaja: Use when motion is technically fine but reads as lifeless or mechanical.
- [Mastering AnimatePresence](https://github.com/raphaelsalaja/skill/blob/main/skills/mastering-animate-presence/SKILL.md) by Raphael Salaja: Use when reviewing exit animations or presence state in Motion code.
- [Morphing icons](https://github.com/raphaelsalaja/skill/blob/main/skills/morphing-icons/SKILL.md) by Raphael Salaja: Use when icons should morph into one another through SVG line transformation.
- [Pseudo-elements](https://github.com/raphaelsalaja/skill/blob/main/skills/pseudo-elements/SKILL.md) by Raphael Salaja: Use when reviewing CSS pseudo-elements or View Transitions in hover effects and page changes.
- [Sounds on the web](https://github.com/raphaelsalaja/skill/blob/main/skills/sounds-on-the-web/SKILL.md) by Raphael Salaja: Use when reviewing how a UI uses sound for feedback.
- [To spring or not to spring](https://github.com/raphaelsalaja/skill/blob/main/skills/to-spring-or-not-to-spring/SKILL.md) by Raphael Salaja: Use when choosing between a spring and an easing curve for one interaction.

## Links

- [Page](https://startupskills.dev/design): the same list, for a person.
- [The whole index](https://startupskills.dev/llms.txt): all 189 entries.
- [Skills index](https://startupskills.dev/skills): every skill, with search.