Menu

Individual skill

open-design-setup

0upvotes

Prepare or repair a project's prototyping environment so open-design can build prototypes with the project's own component library and render them through the project's toolchain. Use when the library target is needed and docs/design/prototyping.md is missing, stale, or failing; excludes HTML-only design work and production feature implementation.

extensions/open-design/skills/open-design-setup/SKILL.md

Read pinned source

Source commit 14f57173e5cae483392cce90a06098fd04dcfda0

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 3, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
2,858
Repository last updated
Nov 8, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Set up library prototyping

Library prototypes are ordinary source files that import the project's real components and render through the project's own toolchain. This skill prepares that environment once per project and records it in `docs/design/prototyping.md`. Later sessions read the record instead of repeating the setup. Work like an engineer joining the repository: inspect what exists, reuse it, and add the smallest missing piece.

## Inspect the project

Read the project's agent instructions, `DESIGN.md` or equivalent design authority, and package manifests before choosing anything. Establish:

- **Library:** the import path of the components a prototype should use, for example a workspace package, a local `components/ui` directory, or an npm design system. Note shadcn-style `components.json` aliases and registries; they also tell you how missing components are added.
- **Catalog:** where the agent learns components, props, and examples: component source and types, a registry, a Storybook or other component manifest, documentation, examples, or a project skill describing the library.
- **Toolchain:** package manager, bundler and framework, TypeScript configuration and path aliases, the global stylesheet or token entry, and the providers the library needs (theme, router, data, i18n).
- **Existing preview hosts:** Storybook, Ladle, React Cosmos, a playground route, a sandbox app, or an examples site. A host the project already maintains is the first choice.
- **Constraints:** ignored directories, lint rules such as unused-file checks, test runners or visual baselines that would collect new files, and rules about adding dependencies.