svg-illustration

Token-matched SVG illustrations inherit theme colors via currentColor or CSS variables, avoiding hardcoded hex values. This ensures your artwork automatically adapts to your UI design system's theme colors and maintains visual consistency.

Accessible SVG illustrations require proper labeling for UI empty states. This Skill automatically includes title or desc elements for meaningful graphics and applies aria-hidden for decorative artwork, aligning with interactive state expectations and reduced-motion compatibility.

The best way to ensure correct SVG viewBox and stroke-width proportions is by applying canonical viewBox sizes and proportional stroke-width rules. This guarantees graphics render crisply and scale predictably at any size without using fixed width or height attributes.

Yes, this SVG generation approach supports gradients and filters by generating unique gradient and filter IDs. This prevents rendering conflicts when multiple illustrations are placed on the same page, ensuring two-tone or gradient-based artwork displays correctly.

SVG illustrations fail to scale responsively when hardcoded with fixed width and height attributes. This Skill enforces safe root sizing and viewBox conventions, allowing graphics to render crisply at any dimension within responsive in-project illustration workflows.

Yes, you can create line art and hero band illustrations using a token-aware workflow. This Skill applies token-aware two-tone or gradient-based artwork generation, satisfying design constraints for marketing bands, icons, and UI empty states.