skills.rest
MartinoPolo
MartinoPoloCOMMUNITY
Explore all skills by this author →
GitHub

gk-mockup

Generate HTML UI mockup variants from Grovekeeper design briefs.

Updated Mar 28, 2026
Search Tags:#html generation#design system#design brief#component variants#ui mockup#tauri desktop ui#svelte-based workflow
One-click install
npx skills add https://github.com/MartinoPolo/Grovekeeper --skill gk-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gk-mockup
Source: https://github.com/MartinoPolo/Grovekeeper/tree/main/.agents/skills/gk-mockup
Command: npx skills add https://github.com/MartinoPolo/Grovekeeper --skill gk-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

gk-mockup removes the friction of manually designing UI variants by generating realistic HTML mockups directly from Grovekeeper design briefs.

Core Features & Use Cases

  • Generate variant mockups: Creates one or multiple HTML variants from a component brief, supporting quick iteration on layout and density.
  • Uses the Grovekeeper design system: Reads the design system docs to apply consistent gk-* and cb-* classes while keeping token values external via tokens.css.
  • Supports realistic context: Can render container context (like panel chrome or tab bars) with reduced opacity so the target component is shown within its intended boundaries.

Quick Start

Run gk-mockup assigned-issues-panel to generate a single HTML mockup variant for that component based on its DESIGN_BRIEF file.

Frequently Asked Questions about gk-mockup

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

FAQPage Schema
How do I generate HTML UI mockups from a design brief?▼

To generate HTML UI mockups, provide a Grovekeeper design brief to produce token-safe, design-system-compliant HTML files referencing tokens.css with consistent fonts and required structural elements.

Can I generate multiple UI variant layouts for the same component?▼

Yes, you can generate multiple UI variant layouts by specifying N>1, which produces parallel variant mockups from a single design brief to support quick visual iteration on layout and density.

Does HTML mockup generation support realistic container context like panel chrome?▼

HTML mockup generation supports realistic context by rendering container elements like panel chrome or tab bars with reduced opacity, showing the target component within its intended boundaries.

How do mockups maintain design system consistency with gk-* and cb-* classes?▼

Mockups maintain design system consistency by reading design system docs to apply gk-* and cb-* classes uniformly, while keeping token values external via tokens.css for structural and visual compliance.

What is the best way to speed up visual iteration for Tauri desktop UI components?▼

The best way to speed up visual iteration is generating variant HTML mockups directly from design briefs, removing the friction of manual layout design for Svelte-based workflows and Tauri desktop UI components.

Related Skills

Explore More Design & Creative Skills→
MartinoPoloMartinoPolo

gk-design-brief

Creates Grovekeeper UI component briefs and triggers /gk-mockup for visuals.

Community
Intermediate
xztxyxztxy

svelte

Convert JSON UI specs into runnable Svelte component trees.

Community
Intermediate
guichefferguicheffer
3

zest-components-web-patterns

Generate Zest design system components with TypeScript, styles, variants, tests, and Storybook documentation.

Community
Intermediate
ShaheerKhawajaShaheerKhawaja
8

designer-upgrade

Orchestrate UI/UX redesign workflows producing HTML mockups and design tokens.

Community
Advanced