design-approve

Convert approved design variants into canonical brand spec files and runtime configuration.

Updated Aug 27, 2026

Search Tags:#design validation #remotion #brand design #runtime configuration #HTML preview #variant approval #snapshot caching

Ready to run

npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill design-approve

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-approve
Source: https://github.com/CleanExpo/Pi-Dev-Ops/tree/main/skills/design-approve
Command: npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill design-approve

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents brand design variants from drifting by turning a user-approved iteration into a canonical, validated set of brand spec files and runtime configuration.

Core Features & Use Cases

Final approval as a commit point: Re-validates the selected design/motion/scene artifacts and blocks on any lint/Zod errors.
Canonicalization and mirroring: Copies approved {variant} files into {slug} canonical locations and mirrors them to the runtime brand-config directory.
Preview + snapshot + codify: Generates a standalone HTML preview, snapshots the approved state for cache/reference, and triggers codification to regenerate BrandConfig.ts and the human-readable projection.

Quick Start

Use design-approve to approve variant variant-2 from job acme-1 for brand slug acme as precision-trust, including any final notes, and regenerate the runtime brand config and canvas preview.

Frequently Asked Questions about design-approve

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

FAQPage Schema

How do I lock an approved brand design variant and prevent configuration drift?▼

To lock an approved brand design variant, you validate the selected design and motion artifacts, copy them into canonical slug locations, and regenerate the runtime brand configuration to prevent future drift.

How does design validation work with Remotion before final variant approval?▼

Design validation runs Remotion and motion/scene loaders to enforce correctness by blocking the approval on any lint or Zod errors before generating the final approved-variant snapshot.

What do I need to generate a browser preview and snapshot for an approved design variant?▼

You need validated design and motion artifacts, plus an optional scene, to generate a standalone HTML browser preview and a labeled approved-variant snapshot for cache and reference.

Can I regenerate BrandConfig.ts automatically after approving a design iteration?▼

Yes, approving a design iteration delegates BrandConfig.ts generation to the brand codify process, which also creates a human-readable projection and triggers a canvas reload for confirmation.

Why does design variant approval block lint and Zod errors during re-validation?▼

Design variant approval blocks lint and Zod errors during re-validation to ensure the final commit point is safe, preventing broken motion or scene artifacts from becoming canonical brand specifications.

What is the best way to canonicalize approved brand design files into a runtime directory?▼

The best way to canonicalize approved files is to copy the approved variant files into canonical slug locations and mirror them directly into the runtime brand-config directory.