ls-mockup

What problem does it solve?

This Skill removes the friction of producing consistent, high-impact visual mockups by giving you a structured, design-principle-driven workflow that outputs directly into the Light Mock-Up Next.js project.

Core Features & Use Cases

• Direct Light Mock-Up output: Always generates mockups in the Light Mock-Up Next.js project at C:\Projects\light-mock-up with the full UI/animation experience (no standalone HTML mode).
• Opinionated mockup architecture: Provides a repeatable process for registering mockups, composing section components, wiring routes, and keeping library navigation auto-discovered.
• Design taste + structure separation: Enforces a mandatory first step to invoke frontend-design:frontend-design so your mockups inherit anti-slop typography, color, and composition rules.
• Section and data visualization guidance: Includes guidance for building mockup sections and choosing installed visualization libraries (Recharts, Nivo, visx, D3, force graphs, Three.js/R3F) to match the story the data tells.

Quick Start

Ask the agent to create a new visual mockup in the Light Mock-Up project by registering a new mockup id, adding the required section components, and creating the corresponding route page.