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

gk-design-brief

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

Updated Mar 28, 2026
Search Tags:#design system#storybook#design brief#ui mockups#component inventory#ui spec#container context
One-click install
npx skills add https://github.com/MartinoPolo/Grovekeeper --skill gk-design-brief
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gk-design-brief
Source: https://github.com/MartinoPolo/Grovekeeper/tree/main/.agents/skills/gk-design-brief
Command: npx skills add https://github.com/MartinoPolo/Grovekeeper --skill gk-design-brief

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It speeds up building consistent Grovekeeper UI documentation by turning vague requests into structured, container-correct design briefs with required elements, states, and adoption guidance.

Core Features & Use Cases

  • Component inventory & format alignment: Uses the repository’s existing design system and prior briefs to match Grovekeeper’s established structure.
  • Container-context correctness: Forces the brief author to identify whether the component is tab content, session content, modal content, standalone, or embedded so chrome duplication is avoided.
  • Storybook-driven coverage & adoption suggestions: Inventories available UI components and recommends missing primitives by checking shadcn-svelte and Bits UI when needed.
  • Next-step visual generation: After saving, triggers /gk-mockup to produce visual variants for the new brief.

Quick Start

Use gk-design-brief with the target component name provided after the prompt keyword, then save the generated brief into designs/<component-name>/DESIGN_BRIEF_<COMPONENT_NAME>.md to proceed to mockup generation.

Frequently Asked Questions about gk-design-brief

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

FAQPage Schema
How do I create a design brief for UI components that matches an existing design system?▼

A component design brief needs required UI elements, interactive states, container-context identification (tab, modal, or standalone), and adoption guidance to prevent chrome duplication and ensure design system consistency.

How do I generate UI mockups after finalizing a component design spec?▼

You can check available Storybook component variants and inventory existing shadcn-svelte and Bits UI primitives to identify missing UI elements and recommend adoption suggestions for your brief.

Why does my UI component spec duplicate container chrome during design?▼

Container chrome duplication occurs when the container context is undefined; the brief forces authors to identify whether the component is tab, session, modal, standalone, or embedded to avoid this issue.

Can I use Storybook variants to build a state-complete component spec?▼

Yes, the Skill inventories available Storybook component variants alongside your existing design system to ensure the generated component spec is container-correct and state-complete.

Related Skills

Explore More Design & Creative Skills→
djkloopdjkloop

shape

Conduct a structured discovery interview and produce a design brief.

Community
Intermediate
a29paula29paul
1

design-shotgun

Generate design variants from a text brief and present them in a comparison board.

Community
Advanced
MartinoPoloMartinoPolo

gk-shadcn-investigate

Resolve shadcn-svelte and Bits UI component API and styling uncertainties via documentation and source inspection.

Community
Intermediate
vinhnxvvinhnxv
6

storybook

Guide agents through Storybook MCP tools and CSF3 conventions for component verification.

Community
Intermediate