skills.rest
metabench
metabenchCOMMUNITY
Explore all skills by this author →
GitHub

wlilo

Generate luxury-styled SVG diagrams, posters, and CSS themes using the WLILO design language.

1|Updated Sep 12, 2025
Search Tags:#typography#design system#visualization#svg#diagram generation#css theme#luxury design
One-click install
npx skills add https://github.com/metabench/copilot-dl-news --skill wlilo-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wlilo
Source: https://github.com/metabench/copilot-dl-news/tree/main/.claude/skills/wlilo
Command: npx skills add https://github.com/metabench/copilot-dl-news --skill wlilo-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Creating polished, consistent visual artifacts (diagrams, dashboards, posters, UI mockups) is slow and error-prone for AI agents: text overflows, colors clash, and layouts collide because the render cannot be seen. This Skill provides a complete design language — exact palette tokens, typography rules, construction recipes, and validation passes — so generated SVGs and CSS are both correct and professionally composed. ## Core Features & Use Cases - Tiered vector intensity: Choose between glyph-led status cards, hybrid explanatory diagrams, or full-luxe hero posters with gemstone CTAs, matching effort to the task. - Canonical token system: Two coordinated palettes (diagram and Luxe/UI registers), typography scales, spacing, shadows, and a machine-readable JSON theme for CSS generation via --wlilo-* custom properties. - Construction recipes and validation: Paste-ready SVG defs blocks, obsidian panel and gemstone button recipes, text-width math to prevent overflow, plus a finish pass and validation checklist. - Use Case: Ask for a WLILO diagram explaining HTTP caching, and receive a validated SVG with obsidian panels, scarce gold accents, emoji node icons, and technically accurate content researched before drawing. ## Quick Start Create a WLILO-style SVG diagram explaining how our authentication flow works, with obsidian panels and gold accents.

Frequently Asked Questions about wlilo

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

FAQPage Schema
How do I create a luxury-styled SVG diagram with AI?▼

Describe the topic and ask for a WLILO-style SVG. The skill researches the subject first, builds a structured data model, then composes the diagram using leather backgrounds, obsidian panels, and scarce gold accents, finishing with a validation pass to catch text overflow and collisions.

How do I generate a CSS theme matching an SVG design?▼

Request a matching CSS snippet alongside the SVG. The skill defines --wlilo-* custom properties on :root or a .wlilo-app scope from the token tables, applied through semantic classes like .wlilo-panel and .wlilo-cta--ruby rather than inline styles.

Can I use emoji icons inside SVG text elements?▼

Yes, emoji render through system emoji fonts in SVG text, but give them their own text element or generous padding since metrics vary by platform. Emoji ignore fill colors, so use geometric glyphs like ◆ or ✦ when you need token-colored marks.

Why does text overflow in generated SVG diagrams?▼

SVG never auto-wraps text, so width must be budgeted before placement: characters times font size times a ratio (0.60 mono, 0.52 sans, 0.55 serif), with emoji counting double. The skill's validation pass re-checks every text against its container's 80% rule.

When should I use a simple status card versus a full poster design?▼

Use the glyph-led tier for quick status boards and lists where text and unicode block-bars carry the data. Reserve the full-luxe tier with gemstone buttons, brushed metal, and grain textures for hero pieces, launch posters, and UI mockups.

Related Skills

Explore More Design & Creative Skills→
dapperdiversdapperdivers
1

web-search

Query a SearXNG metasearch endpoint to retrieve structured web results.

Community
Intermediate
AvaloniaUIAvaloniaUI
157

docusaurus-styling

Align Docusaurus visuals with the Avalonia Customer Portal theme using TailwindCSS and CSS variables.

Official
Intermediate
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
ItsJooLItsJooL

d2

Write and render D2 diagram code to SVG without the d2 binary.

Community
Advanced