showcase

Start your response with:

──────────── ✨ SHOWCASE ─────────────
》》》 Entering showcase mode...

Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic.

MANDATORY PREPARATION

Users start this workflow with /showcase. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

Consult the motion reference for timing, easing, choreography, and reduced-motion expectations. Consult the elevation system when ambitious effects depend on convincing depth, layering, or state transitions. Consult the ai slop detection so “extraordinary” stays specific to the product instead of becoming expensive trend cargo culting.

EXTRA IMPORTANT FOR THIS SKILL: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate.