breadboard

How authenticated HTTP calls to the Opal backend work — the host/guest architecture, fetchWithCreds, the fetch allowlist, and the OpalBackendClient migration. Read this before adding, modifying, or debugging any backend call.

Learn how to make widgets on canvas

Produce high-quality React apps from natural language descriptions.

Teaches you how to properly operate in the sandboxed environment you're in.

Learn how to present your work as a structured surface — a curated manifest of artifacts that the user's application renders in real time.

Learn how to use `window.opalSDK` inside your sandboxed React component to read files, call host services, and listen for events from the application.

Learn how to design and write custom agent templates (sub-agents) inside your workspace, so you can delegate specialized work to custom sub-agents.

Uplevel your researching abilities and learn how to research properly.

Learn how to make widgets on canvas

Produce high-quality React apps from natural language descriptions.

Learn how to present your work as a structured surface — a curated manifest of artifacts that the user's application renders in real time.

Decompose a user objective into a segmented app. Each segment is a multi-view mini-app. Segments are separated by LLM decision points where the orchestrator decides what comes next.

Generate multi-file React component bundles with design tokens from natural language descriptions.

Spec-driven development for Python projects. Write protocols and conformance tests first, then migrate code to satisfy them. The spec is the source of truth across conversation sessions.

Read it to understand the style and workflow for interviewing a user.

Shapes how you behave — calming presence, discretion, no branding. Read this before every interaction.

Magazine-style layout principles for curated editorial digests. Defines layout sections, visual anti-patterns, and narrative prioritization rules. Pairs with ui-generator for technical constraints.

Generate multi-file React component bundles with design tokens from natural language descriptions.

Art direction for presenting user data as a personal morning briefing. Defines editorial techniques, layout sections, anti-patterns, and tone. Technical infrastructure comes from the UI Skill, not this file.

Generate multi-file React component bundles with design tokens from natural language descriptions.

Decompose a user objective into a segmented journey. Each segment is a multi-view mini-app. Segments are separated by LLM decision points where the orchestrator decides what comes next.

Generate multi-file React component bundles with design tokens from natural language descriptions.

Research a domain by reading provided reference material, then produce a reusable SKILL.md that teaches any agent how to work in that domain.

Audit, diff, and port changes between TypeScript and Python codebases to keep them in sync during the migration.

A proactive bug hunt across the Breadboard codebase. Pick an area, go looking, and produce a concrete artifact (test, lint rule, or codemod) for anything you find.

A system that detects when you're writing code that already exists as a shared utility. Instead of relying on memory or discipline, ESLint rules surface existing helpers in real-time through IDE errors.

A living reference for writing idiomatic TypeScript and Lit in the Breadboard Visual Editor. Covers type safety, import hygiene, component design, and the patterns that distinguish a great frontender from a merely competent one.

Mechanical, multi-file, type-aware refactors powered by ts-morph. Use when a pattern repeats across many files and regex is too fragile.