Design
Every Design skill, in alphabetical author order. Filter by author or keyword.
Brad Frost
Wrote Atomic Design, teaches design systems.
- DS adoption planskillsUse when moving an existing product onto its design system needs a phased estimate.
- DS ASCIIskillsUse when sketching an ASCII wireframe built from real components in the design system.
- DS inspectionskillsUse when a design system needs a station-by-station audit and a prioritised work order.
- Product inspectionskillsUse when a shipping product, not its design system, needs a prioritised health check.
- Vibe killerskillsUse when a generated page carries bespoke CSS instead of the design system.
Daniel Howells
Founded and still runs Siteinspire.
Emil Kowalski
Created Sonner and the animations.dev course.
- AnimateskillsUse when something needs to animate and no motion exists for it yet.
- Animate ExposkillsUse when animating screens, gestures or sheets in an Expo or React Native app.
- Animation vocabularyskillsUse when a motion effect can be described but its name is not known.
- Apple designskillsUse when web UI should follow Apple's approach to gestures, springs and physical motion.
- Design EngineeringskillsUse when UI polish, component design or animation calls should follow Emil Kowalski's approach.
- Improve animationsskillsUse when a whole codebase's motion needs a prioritised plan rather than a review.
- Pick UI libraryskillsUse when a frontend task needs one library chosen from a curated shortlist.
- PrototypeskillsUse when trying genuinely different builds of one UI piece behind a live picker.
- Review animationsskillsUse when finished motion needs judging against a craft bar before it ships.
Jakub Antalik
Collects CSS transitions and UI motion patterns.
Jakub Krehel
Publishes interfaces.dev, a design engineering magazine.
- Better accessibilityskillsUse when a project needs checking against accessibility standards and best practices.
- Better colorsskillsUse when building a colour system, palettes or semantic colour tokens.
- Better interfaceskillsUse when one review should cover accessibility, layout, writing, type, colour and polish.
- Better layoutskillsUse when a layout's grouping, alignment and reading order need working out.
- Better typographyskillsUse when type scale, spacing, wrapping or OpenType features need working out.
- Better UIskillsUse when UI details like border radius, alignment, depth and hit areas need polish.
- Better writingskillsUse when a product's interface copy needs improving.
- BreakskillsUse when a component needs rendering in every state to stress test it.
- Explain interfaceskillsUse when working out how something on the web was built.
- Interface reviewskillsUse when existing work needs a detailed findings report across UI, type and layout.
- VariantskillsUse when one component needs several versions to compare before picking one.
Johannes Mutter
Designs user interfaces and corporate identities.
Julien Thibeaut
Made motion-primitives and prompt-kit, runs Interface Office.
- Baseline UIui-skillsUse when UI code needs a fast cleanup of spacing, hierarchy and typography.
- Create DESIGN.mdui-skillsUse when a product's design language needs documenting as a DESIGN.md for agents.
- Fixing accessibilityui-skillsUse when adding forms, dialogs or controls, or checking a page against WCAG.
- Fixing motion performanceui-skillsUse when a transition drops frames and the cause is layout or compositing.
- Improve UIui-skillsUse when refining an interface means written plans for another agent, not direct edits.
Karl Koch
Built Kernel UI, writes about design engineering.
- AI output judgementskillsUse when generated UI, copy or code needs a quality critique.
- Android native UIskillsUse when building or reviewing Android interfaces in Compose or Views.
- Apple native UIskillsUse when building or reviewing native Apple interfaces, including macOS window behaviour.
- dxeskillsUse when a repository or UI surface needs a design engineering review.
- Fluid designskillsUse when springs, gestures or interruptible motion need physical continuity under direct manipulation.
- Humane functionalismskillsUse when a screen or flow needs a Danish functionalist design pass.
- Modern CSS & HTMLskillsUse when a legacy CSS or HTML workaround may have a native replacement.
Raphael Salaja
Publishes userinterface.wiki.
- 12 principles of animationskillUse when motion is technically fine but reads as lifeless or mechanical.
- Mastering AnimatePresenceskillUse when reviewing exit animations or presence state in Motion code.
- Morphing iconsskillUse when icons should morph into one another through SVG line transformation.
- Pseudo-elementsskillUse when reviewing CSS pseudo-elements or View Transitions in hover effects and page changes.
- Sounds on the webskillUse when reviewing how a UI uses sound for feedback.
- To spring or not to springskillUse when choosing between a spring and an easing curve for one interaction.