bilioveloso

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Curated named color palettes grouped by mood, style, and intent. Use when choosing colors for UI, branding, content, or visual design. Includes hex codes, color roles, gradient pairs with CSS, and WCAG contrast notes. Trigger on: "choose colors", "color palette", "color scheme", "what colors should I use", "palette for", "/color-combo-skill", intent=color_choice, intent=design.

Visual effects, animation patterns, morphism systems, interaction states, and layout patterns for UI and branding contexts. Use when choosing or implementing animated backgrounds, text effects, morphism styles, micro-interactions, motion patterns, cursor effects, image/media effects, liquid/glass FX, shader gradients, depth systems, border effects, scroll animations, dark-mode adaptations, or 3D elements. Activate on: "add animation", "make it more dynamic", "animated background", "text effect", "visual effect", "glassmorphism", "neumorphism", "claymorphism", "brutalism", "bento grid", "shader", "3D hero", "micro-interaction", "hover effect", "loading state", "gradient border", "lottie", "custom cursor", "image reveal", "scroll timeline", "page recipe", "saas landing", "portfolio", "gaming page", "wellness app", "/design-effects-skill".

Typeface selection, pairing rules, loading strategy, and variable font guidance for UI and branding design. Use when choosing fonts, pairing a display with a body typeface, selecting a monospace font for code, setting type scale, or matching typography to a brand tier or palette. Works alongside color-combo-skill, design-effects-skill, and icon-system-skill. Activate on: "what font", "choose a typeface", "font pairing", "heading font", "body font", "monospace font", "type scale", "web font", "variable font", "/font-pairing-skill".

Icon library selection, sizing system, optical alignment, stroke vs fill decisions, color inheritance, icon weight matching to typography, and animated icon patterns for UI and branding. Use when choosing an icon set, sizing icons in a layout, matching icons to a font, adding icon animation, or deciding between stroke and fill icon styles. Works alongside color-combo-skill, design-effects-skill, and font-pairing-skill. Activate on: "what icon library", "icon size", "icon weight", "icon animation", "icon system", "stroke icons", "fill icons", "/icon-system-skill".