Vibe Coding Skill

Goal

Translate abstract user intents ("Vibes") into concrete implementation details (Design Tokens, CSS, Animation, Tone of Voice).

Flow

Steps

1. Vibe Analysis

Input: User Request (e.g., "Make the dashboard feel like a spaceship HUD") Action: Decompose "The Vibe" into technical primitives.

• Color Palette: High contrast? Neons? Pastels? Dark mode?
• Typography: Monospace? Serif? Sans-Serif? Size/Weight?
• Motion: Snappy? Float? ease-in-out? Glitch effects?
• Border/Shape: Rounded? Sharp? Glassmorphism? Brutalist?