ui-illustrations — Illustration and imagery for product UIs

Overview

Sources, brands, integrates, and ships illustration in web application UIs. The center of gravity is the data-dense product tool that today shows bare text where imagery would carry warmth and clarity — empty states, onboarding, and error pages — without tipping into decoration. The skill covers the placement doctrine (where imagery helps vs clutters), the free-library sourcing landscape with its license traps, recoloring sourced SVGs to design tokens so one asset follows both themes, correct SVG-in-React integration, animated imagery done accessibly, and the craft of a good empty state. It sources and integrates existing illustration; it does not teach drawing original art.

When to activate

• ✅ A screen shows a bare "No items yet" (or worse, nothing) and needs a real empty state.
• ✅ Adding onboarding/first-run, error-page (404/500/permission), or success-moment imagery.
• ✅ Choosing an illustration source, checking whether attribution is required, or matching sourced art to the app's palette and dark mode.
• ✅ Embedding an SVG or Lottie file in a React codebase and wiring its accessibility.