vercel-labs

PR Merged Switch Dark Mode — Design skill for Claude Code

Design community

This UI must be built with Primer React (@primer/react).

How to install PR Merged Switch Dark Mode

Installs to ~/.claude/skills/vercel-labs-ds-skill-extraction-workshop-pr-merged-switch-dark-mode/SKILL.md

Terminal

mkdir -p ~/.claude/skills/vercel-labs-ds-skill-extraction-workshop-pr-merged-switch-dark-mode && curl -fsSL https://raw.githubusercontent.com/vercel-labs/ds-skill-extraction-workshop/HEAD/prompts/pr-merged-switch-dark-mode.md -o ~/.claude/skills/vercel-labs-ds-skill-extraction-workshop-pr-merged-switch-dark-mode/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What PR Merged Switch Dark Mode does

role: user phase: 2 audience: stage

This UI must be built with Primer React (`@primer/react`).

This is the **encore** of the merged-PR theater: the same satisfying flip from waiting to **Merged**, but staged on a panel as dense and alive as a real GitHub pull request — labels, counts, an editable merge box, motion you can feel, and a color mode the reader can flip on demand.

Edit `app/page.tsx` and put the composition in `components/showcase/pr-merged-theater.tsx` (`"use client"` on b

Alternatives in Design

Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★
Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Poco Claw — A more beautiful and easier-to-use alternative to OpenClaw 1.3k ★