[Experiment] Storybook-to-Markdown Skill Convertor for Wonder Blocks#2967
Open
[Experiment] Storybook-to-Markdown Skill Convertor for Wonder Blocks#2967
Conversation
…tor for Wonder Blocks
🦋 Changeset detectedLatest commit: 49d1b04 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (a8ea49b) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR2967"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2967 |
Contributor
|
Size Change: 0 B Total Size: 118 kB ℹ️ View Unchanged
|
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-cftoxhanbs.chromatic.com/ Chromatic results:
|
jeresig
commented
Feb 19, 2026
| @@ -0,0 +1,1956 @@ | |||
| #!/usr/bin/env node | |||
Member
Author
There was a problem hiding this comment.
This is the new script - I have not reviewed this at all.
jandrade
reviewed
Feb 26, 2026
Member
jandrade
left a comment
jandrade
left a comment
There was a problem hiding this comment.
This looks promising, and definitively worth experimenting. I left some initial comments to exclude some pages before giving final approval.
I'm going to be creating a PR to improve a bit the documentation around deprecated components that I'd like to land before this PR gets merged so we don't generate unwanted MD files.
Thanks for working on this!
| const storyFiles = await fg("__docs__/**/*.stories.tsx", { | ||
| cwd: ROOT, | ||
| ignore: [ | ||
| "__docs__/**/*-testing-snapshots.stories.tsx", |
Member
There was a problem hiding this comment.
suggestion: We should also ignore playtesting stories. We use them just to do some internal manual testing (and some interactive testing). For example: https://github.com/Khan/wonder-blocks/blob/main/__docs__/wonder-blocks-tabs/tabs-testing-playtesting.stories.tsx
| cwd: ROOT, | ||
| ignore: [ | ||
| "__docs__/**/*-testing-snapshots.stories.tsx", | ||
| "__docs__/components/**", |
Member
There was a problem hiding this comment.
suggestion: We should also ignore any files that include the deprecated word. For example: tokens/deprecated-color...
Member
There was a problem hiding this comment.
I'm also going to be experimenting with some visual badges (which uses Storybook tags) to be able to filter out deprecated components.
Member
There was a problem hiding this comment.
For some reason, the tool skipped creating the Switch Docs page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This is an experiment to see if we can convert all of our storybook files to passable markdown so that it can then be accessed by a skill (that is then baked into this repo so that folks can install it by running:
npx skills @khan/wonder-blocks).This change was 99.9% created by Claude Code using Opus 4.6, my only change was adding in the
.gitattributesbit to mark the output as generated files.I used these prompts to produce this output:
Now, is this perfect? Definitely not. I have some ideas on how we could improve the code output (making a linter to require all variables to be inline inside all Storybook examples, and then have Claude tackle that work). But I'm wondering if this might be "good enough" for folks to get experimenting?
I also added in a Github workflow so that the files will get regenerated whenever they land on
main. I'm open to other suggestions here!Issue: FEI-XXXX
Test plan:
A cool side effect of this is that you can now browse the docs using tools like Obsidian!