skills.rest
Raynos
RaynosCOMMUNITY
Explore all skills by this author →
𝕏@RaynosGitHub

diverge

Generates 2-3 working UI design variants wired into a DEV-panel toggle for live human review.

1|Updated Jun 29, 2026
Search Tags:#frontend#ui design#human-in-the-loop#a/b testing#self-review#design variants#dev panel
One-click install
npx skills add https://github.com/Raynos/kami-kakushi --skill diverge-raynos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diverge
Source: https://github.com/Raynos/kami-kakushi/tree/main/.claude/skills/diverge
Command: npx skills add https://github.com/Raynos/kami-kakushi --skill diverge-raynos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When building or restyling a UI surface, committing to a single design without comparison risks shipping a weak approach. This Skill enforces a disciplined workflow that produces multiple genuinely distinct, fully working design variants so a human can compare them live in the running application before a final choice is made. ## Core Features & Use Cases - Multi-variant generation: Authors 2-3 genuinely distinct UI approaches (layout, hierarchy, density, motion) as render-only branches against an existing pure-core state layer, never palette swaps. - DEV-panel live toggle: Registers each variant in a SURFACES registry so reviewers switch between them instantly in the running dev UI, while production builds strip all alternates via a grep guard for zero flag-debt. - Self-review and audit trail: Scores every variant against a 21-principle taste scorecard and a weighted rubric, self-picks a conservative prod default, and files one human-review line item per variant with automatic 14-day expiry. - Use Case: When adding a new market screen to an incremental RPG, the agent builds three layout variants, toggles them live in the dev panel, scores each against the design bible, ships the default, and queues the alternates for human override. ## Quick Start Ask the agent to diverge the new UI surface into variants so you can review each option live in the DEV panel.

Frequently Asked Questions about diverge

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

FAQPage Schema
How do I generate multiple UI design variants for review?▼

Author the default variant inline in the surface's render module, add alternates in the dev variant-renderers file, and register all variants in the SURFACES registry. Each variant then appears as a live toggle in the DEV panel for side-by-side comparison.

When should I use a design variant workflow for UI changes?▼

Use it for any new UI surface or major restyle involving layout, hierarchy, density, or motion changes. One-line tweaks, copy edits, token-value nudges, and bug fixes are exempt, and the change must be expressible as render-only against existing state props.

Do UI variants affect the production build?▼

No. Alternates live behind an import.meta.env.DEV gate and are tree-shaken from production. A build-time grep guard verifies the dist bundle contains zero variant strings, so the shipped code carries no flag-debt.

What happens if nobody reviews the UI variants?▼

Silence is safe because the self-picked default already ships. After a 14-day TTL, or immediately if the surface's render-props contract changes, the self-pick is auto-confirmed and the alternates are pruned, with rationale preserved in git history.

Why must UI variants be render-only against the pure core?▼

Restricting variants to render-only diffs keeps them cheap branches in the UI layer and guarantees the core state and RNG logic never fork per variant. Any approach needing core or state changes is routed through normal planning instead.

Related Skills

Explore More Design & Creative Skills→
igot-aiigot-ai

shape

Run a structured discovery interview and generate a design brief.

Official
Intermediate
PthahnixPthahnix
393

SCAMPER Put Other Use

Generate alternative problem frames by applying the Put Other Use lens.

Community
Basic
borderuxborderux
1

stu

Launches a local traceability app verifying research tags and findings against transcript lines.

Official
Advanced
AIDotNetAIDotNet
634

product-design-design-qa

Compares source designs against rendered implementations and produces prioritized fix lists before handoff.

Official
Advanced