vizual

Generate structured JSON specs for Vizual's 31 visualization components. Use this skill whenever the user needs ANY kind of visual output — charts, dashboards, reports, KPIs, kanban boards, timelines, data tables, forms, interactive parameter tuning, annotatable documents, or even just "show me the data." Trigger on: charts, graphs, dashboards, reports, metrics, data visualization, kanban, timeline, gantt, forms, tables, "visualize this", "show me", "render", "display", "make a dashboard", interactive, playground, adjustable, slider, or any request involving data + visuals.

Create, extend, or reverse-engineer DESIGN.md files — with a live interactive preview page so users see and tweak their design system in real-time before exporting. Use this skill whenever the user wants to define or refine a visual design system: "create our brand design system", "make a DESIGN.md for our startup", "I like how Linear looks, create a design spec", "turn our Figma tokens into DESIGN.md", "we have brand colors but no design system", "reverse-engineer this screenshot into a design spec", or any request involving design tokens, style guides, brand guidelines, or design system creation. Also trigger when the user pastes a screenshot, brand guide PDF content, or says "make it look like [company/product]." This skill outputs an interactive preview HTML page (powered by Vizual) where users adjust colors, typography, and spacing in real-time, then export the final DESIGN.md with one click.

Parse any design system document (DESIGN.md, style guide, brand guide, design tokens file) into structured tokens that drive Vizual's theme engine. Use this skill whenever the user provides any design document — even a partial one, a pasted snippet of brand colors, or a vague description like "our brand uses dark backgrounds with green accents." Also trigger when the user says "apply this theme", "parse this design system", "extract tokens", "switch to our brand colors", or when they paste content containing hex colors, font specs, or spacing values. This skill gives any AI agent its own theme engine — parse tokens → apply theme → all Vizual components auto-restyle. Always apply the theme after parsing so the user sees immediate results. For theme-level comparison with multiple presets, use the vizual skill's HTML output mode.