gitwtfhub

wtf is storybook-oversight?

rachelslurs/storybook-oversight — explained in plain English

Analysis updated 2026-05-18

8TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TL;DR

A tool that shows developers when their AI coding agent can't see a component's documentation in Storybook, and flags the gap in CI.

Mindmap

mindmap
  root((oversight))
    What it does
      Lints Storybook manifest
      Flags missing docs
      Warns before agent confusion
    Tech stack
      TypeScript
      Storybook
      pnpm
    Use cases
      Catch doc extraction failures
      Fail CI on broken docs
      Live addon panel
    Audience
      Frontend developers
      Design system teams
    Packages
      oversight-core
      storybook-addon-oversight
      oversight-lint CLI

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Catch components whose documentation silently failed to reach the AI agent's manifest.

REASON 2

Add a live Storybook panel that flags documentation gaps while developing.

REASON 3

Fail a CI build automatically when a code change breaks a component's docs.

What's in the stack?

TypeScriptStorybookpnpmtsupReact

How it stacks up

rachelslurs/storybook-oversightabdulkader-safi/obsidian-image-magick-pluginsacartag7/mcp-sso
Stars888
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/52/54/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 30min

Requires an existing Storybook setup with pnpm for development.

MIT license: free to use, modify, and distribute, including commercially, as long as the copyright notice is kept.

Wtf does this do

Oversight is a tool for developers who use AI coding agents alongside Storybook, the popular tool for building and documenting user interface components. When a coding agent looks at your components, it does not read your source code directly. Instead it reads a manifest file that Storybook's MCP server generates, a kind of summary of what each component does. The problem this project solves is that sometimes a component's description never makes it into that manifest, because the extraction process failed, the wrong tool ran, or the documentation comments were missing in the first place. When that happens, the agent sees a component with no description and nothing warns you that this happened. Oversight checks that manifest for each component and flags the gaps, either while you are actively working in Storybook or automatically during continuous integration checks before code is merged. The actual checking rules live in one shared core package so that both the interactive version and the automated version always agree on what counts as a problem. There are two ways to use it. The Storybook addon adds a panel to every component story and an inline block on the documentation page, so you see issues while you work. The command line tool, called oversight, checks the manifest during your CI pipeline and fails the build if a change breaks or removes a component's documentation. The project is organized as a set of packages: a core package holding the diagnostic rules as plain functions, the Storybook addon itself, and the command line linter. There is also a demo Storybook included that showcases components deliberately built to trigger each rule, so you can see the tool in action. To develop the project, you install dependencies with pnpm, then use commands to build every package, run tests, check linting, and build or run the demo Storybook locally. The project is released under the MIT license, a permissive license that allows free use, modification, and distribution.

Yoink these prompts

Prompt 1
Help me install the storybook-addon-oversight package in my Storybook project.
Prompt 2
Show me how to run oversight-lint in my CI pipeline to catch broken component docs.
Prompt 3
Explain why my coding agent can't see a component's description using Oversight's findings.
Prompt 4
Walk me through building and running the demo Storybook for this project.

Frequently asked questions

wtf is storybook-oversight?

A tool that shows developers when their AI coding agent can't see a component's documentation in Storybook, and flags the gap in CI.

What language is storybook-oversight written in?

Mainly TypeScript. The stack also includes TypeScript, Storybook, pnpm.

What license does storybook-oversight use?

MIT license: free to use, modify, and distribute, including commercially, as long as the copyright notice is kept.

How hard is storybook-oversight to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is storybook-oversight for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.