# Prototype

Build several different design directions (3 by default) for a feature or issue as...

- Repository: https://github.com/nightly-labs/openbot (4509 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nightly-labs/openbot --skill prototype -g -a claude-code -y`
Codex: `npx skills add nightly-labs/openbot --skill prototype -g -a codex -y`
Cursor: `npx skills add nightly-labs/openbot --skill prototype -g -a cursor -y`
Gemini CLI: `npx skills add nightly-labs/openbot --skill prototype -g -a gemini-cli -y`

## Description

Build several different design directions (3 by default) for a feature or issue as Storybook stories, show them to the user, and let the user choose one. Use when the user writes `$prototype <feature>`, "prototype X", or asks for design variants, options, or directions before implementation.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Prototype

Make a small number of different, clickable directions for one feature in
Storybook. Show them to the user. The user chooses the direction. Do not
implement the feature in product code before the user chooses.

The usual call is short, for example `$prototype new pricing page`. Get the
missing details from the issue and the code. Ask only when you cannot
continue without the user.

## Inputs

- **Subject**: the text after `$prototype`, an issue number, or an issue URL.
- **Count**: 3 variants, unless the user gives a different number.
- **Style**: follow the repository style and reuse its components, unless the
  user says otherwise (for example "go wild", "new visual style", "ignore the
  current design"). When the user sets the style aside, say which parts you
  changed.

## Step 1, Understand the subject

1. When the subject is an issue, read it: `gh issue view <n> --comments`.
   Otherwise search open issues for the subject:
   `gh issue list --search "<subject>" --state open`. Use a match only when
   it is clearly the same feature.
2. Find the current code for the feature, when it exists. Read it and its
   existing stories. Note what the user can do now, and the states it has
   (empty, loading, error, long data, narrow width).
3. Find the surface:

   | Surface | Story location | Stylesheet |
   | --- | --- | --- |
   | Desktop renderer, shared UI | `src/renderer/stories/` | Global; `.storybook/preview.tsx` loads it |
   | Public web (`apps/auth-api`) | Beside the page, in `apps/auth-api/src/components/<area>/`. For a new page, use `landing/` | Import `apps/auth-api/src/styles.css` in the story, as `DiscordConnectPage.stories.tsx` does |

   A pricing page, landing page, or article is public web. A dialog, panel,
   sidebar, or settings screen is desktop.

The rest: https://github.com/nightly-labs/openbot/blob/HEAD/.agents/skills/prototype/SKILL.md