skills.rest
bm629
bm629COMMUNITY
Explore all skills by this author →
GitHub

ui-illustrations

Source, recolor, and integrate licensed SVG and Lottie illustrations into React web app UIs.

1|1|Updated May 24, 2026
Search Tags:#accessibility#react#svg#dark mode#illustration#lottie#empty state
One-click install
npx skills add https://github.com/bm629/agent-skills --skill ui-illustrations-bm629
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-illustrations
Source: https://github.com/bm629/agent-skills/tree/main/skills/ui-illustrations
Command: npx skills add https://github.com/bm629/agent-skills --skill ui-illustrations-bm629

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web app screens often ship with bare text where imagery would help — empty states, onboarding, and error pages — or with illustrations that break dark mode, violate free-library licenses, or bloat the JavaScript bundle. This Skill provides the placement doctrine, sourcing and licensing rules, and React integration patterns to add imagery correctly. ## Core Features & Use Cases - Placement doctrine: Decides where imagery belongs (empty states, onboarding, 404/500 pages, success moments) and where it clutters (data tables, dashboards, loading states). - Sourcing and licensing: Compares unDraw, Storyset, and LottieFiles free tiers, covering attribution obligations, share-alike terms, and a record-the-license practice at adoption. - React/Vite integration: Covers inline SVG vs <img> vs Lottie embedding, token-based recoloring for light/dark themes, layout-shift prevention, and bundle discipline. - Accessibility defaults: Enforces aria-hidden/empty alt for decorative art, prefers-reduced-motion handling, and WCAG 2.2.2 pause controls for long animations. - Use Case: A React app shows a bare "No projects yet" message. Use this Skill to pick an unDraw illustration, recolor it to design tokens, embed it via SVGR with reserved dimensions, and wire reduced-motion-safe behavior. ## Quick Start Use ui-illustrations to add a licensed, dark-mode-safe illustration to the empty state on my projects page.

Frequently Asked Questions about ui-illustrations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add illustrations to empty states in a React app?▼

Pick one illustration family (unDraw is the default), recolor its SVG fills to CSS design tokens, and embed it inline via vite-plugin-svgr's `?react` import or as an `<img>` with `?url`. Reserve the slot's dimensions to prevent layout shift and mark decorative art `aria-hidden`.

unDraw vs Storyset vs LottieFiles — which free illustration library should I use?▼

unDraw is the default: one consistent style, commercial use, and no attribution required. LottieFiles free tier suits animated imagery with no attribution but share-alike modifications. Storyset offers richer scenes but its free tier requires visible attribution to Freepik.

Does Storyset require attribution for free illustrations?▼

Yes, Storyset's free tier requires visible attribution ("Designed by Freepik" plus a link) that end users can actually find. A paid Freepik-company subscription removes the requirement. unDraw and Lottie Simple License assets need no attribution.

How do I make SVG illustrations work with dark mode?▼

Inline the SVG and replace hardcoded accent fills with CSS variables like `var(--primary)` so one asset follows theme switches. Alternatives are per-theme asset pairs or CSS filters for monochrome art. Audit every illustration in both themes, since baked-in white shapes glow on dark backgrounds.

How do I handle Lottie animations with prefers-reduced-motion?▼

Gate `autoplay` on the media query and explicitly pause or play the Lottie instance in an effect so mid-session preference changes stop a running animation. Auto-playing motion over 5 seconds total also needs a visible pause control per WCAG 2.2.2.

When should I not add illustrations to a UI screen?▼

Skip imagery on persistent data surfaces like tables and dashboards, loading states (skeletons own those), and beside forms as decoration. Illustration belongs in empty states, onboarding, error pages, and success moments where it carries a message.

Related Skills

Explore More Design & Creative Skills→
leonardoteodorooleonardoteodoroo

design-system-patterns

Define design system tokens, theming, and component architecture patterns.

Community
Intermediate
GenEducationGenEducation

bmad-create-architecture

Create a complete architecture decision workflow for AI-assisted software projects.

Official
Advanced
Nabole05Nabole05

blast-motion

Choreograph physics-based UI motion in React Native with Reanimated spring dynamics.

Community
Advanced
wpankwpank
11

design-system-creation

Create design systems with aesthetic foundations, token architectures, and CVA components.

Community
Advanced