Full workflow for adding a new UI illustration to ui-flx. Illustrations are elegant compositions across a fidelity spectrum — abstract shapes, conceptual mockups, or real UI built from shadcn primitives (Card/Button/Badge/Avatar), text, and images with a fade — for marketing blocks and empty states. The only hard no is a lone icon/glyph. Motion is optional polish, never mandatory. Covers category axis (style, not subject), grid span sizing, the design/taste bar, file structure, registry/illustrations/<category>/catalog.ts registration, registry.json entry, and sync/build commands. Triggers: "add illustration", "new illustration", "criar illustration", "nova ilustração", "add-illustration", or any request to create a new Flexnative illustration under registry/illustrations.
How to install add-illustration?
felipemenezes098/ui-flx/add-illustration
$npx -y skills add felipemenezes098/ui-flx --skill add-illustrationInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/felipemenezes098/ui-flx" --skill "felipemenezes098/ui-flx/add-illustration"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/felipemenezes098/ui-flx" that are relevant to the current task. Run `npx skills add "https://github.com/felipemenezes098/ui-flx"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
