skills.rest
ahostbr
ahostbrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ls-mockup

Generate visual mockup pages in the Light Mock-Up Next.js project.

Updated Aug 5, 2026
Search Tags:#data visualization#design system#next.js#ui design#mockup#visual prototype#section composition
One-click install
npx skills add https://github.com/ahostbr/liteharness --skill ls-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ls-mockup
Source: https://github.com/ahostbr/liteharness/tree/main/liteharness/catalog/skills/ls-mockup
Command: npx skills add https://github.com/ahostbr/liteharness --skill ls-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about ls-mockup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create visual mockups in a Next.js project without losing design system consistency?▼

Creating visual mockups in a Next.js project requires a structured workflow that registers mockup IDs, composes section components, and wires routes to maintain design system consistency. This approach ensures page prototypes render with correct animations and interactive components.

What's the best way to build data visualization mockups using React charting libraries?▼

Building data visualization mockups involves choosing installed charting libraries like Recharts, Nivo, visx, or D3 to match the story the data tells. The mockup architecture guides section composition to ensure visual prototypes render correctly within the project's interactive framework.

How do I prototype a dashboard layout using section composition in Next.js?▼

Prototyping a dashboard layout using section composition in Next.js involves adding required section components to a registered mockup ID and creating a corresponding route page. This process fits scenarios like dashboard prototypes and screenshot layout previews.

Do I need to set up a frontend design system before generating UI mockups?▼

A frontend design system setup is required before generating UI mockups to enforce anti-slop typography, color, and composition rules. Invoking frontend design first ensures your visual mockups inherit structured design principles and consistent styling.

Can I render Three.js or force graph visualizations inside a Next.js mockup project?▼

You can render Three.js, R3F, and force graph visualizations inside a Next.js mockup project by following the repository's mockup registration and routing architecture. The system supports these visualization libraries to match interactive data stories.

Why does my visual prototype not render with the correct animations in standalone HTML?▼

Visual prototypes do not render correctly in standalone HTML because the mockup generation targets a specific Next.js project path to deliver the full UI and animation experience. It requires the project's component and visualization libraries for consistent results.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
dezverevdezverev

animal-kernel-web-dev

Start the AnimalKernel.Web dev server and verify UI with Cursor's browser.

Community
Intermediate
AltimateAIAltimateAI
792

data-viz

Create interactive data visualizations and dashboards with code-based libraries.

Official
Advanced
HR-ARHR-AR
1

ux-designer

Audit HTML, CSS, and vanilla JavaScript interfaces for UX bugs.

Community
Advanced