compile-design-spec

Compile personas, screens, and user flows into a UX design-spec with Mermaid diagrams.

3|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/kapilvirenahuja/garura --skill compile-design-spec
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compile-design-spec
Source: https://github.com/kapilvirenahuja/garura/tree/main/core/components/skills/compile-design-spec
Command: npx skills add https://github.com/kapilvirenahuja/garura --skill compile-design-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates scattered UX artifacts by consolidating personas, screens, flows, and interaction patterns into a single design-spec handoff that arch and implementation can reliably read.

Core Features & Use Cases

  • Single compiled deliverable: Produces a consolidated design-spec.md at the product experience path for end-to-end handoff.
  • Exhaustive traceability: Pulls personas, screen frontmatter and wireframe details, user flows, scope, and accessibility targets to ensure coverage.
  • Decision Manifest discipline: Emits a decision-manifest.yaml that records any new inferred decisions (tiered and grounded), enabling orchestrator-driven surfacing.

Quick Start

Use compile-design-spec with the designer outputs (personas.md, screens/.md, flows/.md, scope.yaml, quality-profile.yaml, and design-system.md) to generate {product_base}experience/design-spec.md and {product_base}experience/decision-manifest-compile-design-spec.yaml.

Frequently Asked Questions about compile-design-spec

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

FAQPage Schema
How do I consolidate UX design artifacts into a single handoff document?

A UX design specification consolidates personas, screens, and user flows into a single self-contained document. It embeds Mermaid flow diagrams and references design system paths to ensure architecture and implementation teams receive exhaustive traceability during handoff.

What is the best way to generate a decision manifest alongside UX specifications?

The best way to generate a decision manifest is to consolidate UX artifacts into a design specification. This process automatically emits a decision-manifest.yaml file that records newly inferred design decisions, enabling orchestrator-driven surfacing of grounded architectural choices during handoff.

How do I compile user flows and accessibility targets into an executable design spec?

You compile user flows and accessibility targets by reading input markdown frontmatter, scope.yaml, and quality-profile.yaml files. The process aggregates these inputs to produce a comprehensive design-spec.md that ensures complete accessibility coverage and end-to-end traceability for implementation handoff.

Can I reference a design system without copying token values into the design spec?

Yes, you can reference a design system by path without copying token values into the compiled design spec. The specification consolidates UX artifacts while linking to the design-system.md, maintaining a single source of truth for visual styles and tokens during architecture handoff.

What inputs are required to compile a UX design specification for architecture handoff?

Compiling a UX design specification requires designer outputs rooted at the product base path, including personas.md, screen markdown files, flow definitions, scope.yaml, quality-profile.yaml, and design-system.md. These inputs ensure exhaustive traceability and accessibility coverage in the final handoff document.