ui-asset-sourcinglisted

Source the actual assets a website or app needs — icons, imagery, logos, avatars, empty-state art — without hallucinating SVG paths, shipping emoji as icons, or dropping in stock photos that fight the palette. Trigger for "what icons should I use", "给这个网站配图", "add icons to this UI", "generate a hero image for this landing page", "这个空状态要放什么插图", "need a logo for this brand", or whenever a design direction exists and the remaining gap is the visual material to fill it. Names which icon set fits which aesthetic, how to fetch real icon and brand SVGs rather than inventing path data, and how to generate on-palette imagery with Aria Code's own image tools (`aria.report.generate_image_local` free/local, or `aria.report.generate_image` paid) when a stock photo would be wrong. Do NOT trigger to choose the design direction itself (use `industry-design-direction`) or to compile a single editorial poster (`minimal-editorial-poster`). Portable: self-contained prose, no script dependency.
artherahq/skills · ★ 2 · Web & Frontend · score 75

Install: claude install-skill artherahq/skills

# UI asset sourcing A design direction with no assets becomes a wireframe with lorem ipsum and grey boxes. Filling those boxes is where two specific, very visible failures happen: 1. **Invented SVG path data.** A model asked for "a Stripe logo" or "a calendar icon" will confidently emit a `<path d="M12 2L2 7...">` that renders as an unrecognizable blob. Path data cannot be recalled correctly. 2. **Emoji standing in for icons.** 🚀 in a feature card is the single fastest tell of generated UI, and it breaks cross-platform (rendering differs per OS) and for screen readers. Both are avoidable by *fetching* rather than *recalling*. That is most of what this skill is. ## Icons **Pick one set and stay in it.** Mixing sets is visible immediately — stroke weights and corner radii will not match, and the interface reads as assembled rather than designed. | Set | Fits | Notes | | --- | --- | --- | | Lucide | Most product UI; the safe default | ~1500 icons, consistent 24×24 / 2px stroke, MIT | | Heroicons | Tailwind projects | Outline + solid pairs, by Tailwind's authors, MIT | | Phosphor | When you need weight variation | 6 weights including duotone, flexible, MIT | | Tabler | Dense/data UI needing breadth | ~5000 icons, 24×24 / 2px stroke, MIT | | Material Symbols | Android/Material products | Variable axes (weight, fill, grade), Apache 2.0 | | Simple Icons | **Brand/company logos only** | Official marks — the correct source when you need a real logo | **How to get t