Skip to content
Get packs

Directions Lab Scaffolder

Scaffolds a design-exploration page comparing shipped UI with 2-3 design directions in Storybook.

Source Download skill
Repository
paperclipai/paperclip
Stars
110,078
Licence
MIT
Files
15 files

What it does

Once installed, the agent can generate a new 'directions lab' inside the paperclip repo: a separate page that shows the current shipped UI (called Today) side by side with two or three alternative design directions, with tabs for each screen the feature appears on, theme and animation toggles, and a shared hover motion. It also registers the lab in the design-proposals Storybook. The skill ships templates and a Node scaffold script that writes these files, runs tests, and a Vite build, and rolls back its changes if a check fails.

Great for

  • Front-end designers exploring alternatives to a shipped feature in the paperclip repo
  • Developers who maintain the paperclip UI and need a consistent lab structure quickly

Skip it if

  • Projects outside the paperclip repo, since the templates and paths assume its ui/ layout and gates (the skill would produce files that do not fit)
  • Anyone who wants to run it without reviewing generated code, because it writes files, edits shared config and runs scripts in the repo

Try asking

  • “Create a directions lab for the task composer with three directions and a task-thread and right-panel surface”
  • “Scaffold a directions page for the artifacts view with two directions, then add a third later with add-direction”
  • “Show me a dry-run plan for a new directions lab before writing any files”
Step-by-step guide: how to use Directions Lab ScaffolderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    directions-lab.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip directions-lab.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip directions-lab.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run the scaffold with --dry-run first and read the plan (paths, ports, story id) before writing files
  • Run the generator's own tests before scaffolding, since a drifted template produces a broken lab
  • Review the generated files and the edits to shared config files before committing

What's inside

  • agents/openai.yaml
  • assets/motion/v1-mvp-motion.css
  • assets/templates/api-routes.ts.mjs
  • assets/templates/api-stub.ts.mjs
  • assets/templates/build-info.ts.mjs
  • assets/templates/define-lab.ts.mjs
  • assets/templates/direction/index.tsx.mjs
  • assets/templates/direction/MotionSpecimen.tsx.mjs
  • assets/templates/direction/SlotBody.tsx.mjs
  • assets/templates/direction/tokens.css.mjs
  • assets/templates/entry.html.mjs
  • assets/templates/fixtures.ts.mjs
  • assets/templates/frames/AppShell.tsx.mjs
  • assets/templates/frames/Board.tsx.mjs
  • SKILL.md

Redistributed unmodified from paperclipai/paperclip under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.