Khan/wonder-blocks

Letzte erfasste Quellaktivität: 25. Juni 2026 um 20:40

SkillsMP-Katalog aktualisiert: 17. Oktober 2026 um 00:09

gesammelte Skills: 3

GitHub-Stars: 163
GitHub-Forks: 12

README des Repositorys

README-Quelldatei: README.md

# <img width="32" src="./static/logo.svg"> Wonder Blocks ![Release](https://github.com/Khan/wonder-blocks/actions/workflows/release.yml/badge.svg) [![codecov](https://codecov.io/gh/Khan/wonder-blocks/branch/main/graph/badge.svg)](https://codecov.io/gh/Khan/wonder-blocks) The Khan Academy Wonder Blocks design system. This is work-in-progress and a lot of things are still in motion. More information: https://khan.github.io/wonder-blocks/ ## Getting started ### Prerequisites - [Node.JS v20.x](https://nodejs.org/en/download) - [pnpm](https://pnpm.io/installation) ### Installation To install Wonder Blocks, you need to run the following commands: #### `pnpm install` Installs project dependencies #### `pnpm dev` Builds all the packages and watches for changes #### `pnpm start` Runs the docs in dev mode Now you can open http://localhost:6061 to view the docs. This page will automatically update as you make changes to components. **AI agents / Storybook MCP:** To use the Wonder Blocks MCP from another project (e.g. Cursor), clone this repo, run `pnpm install` and `pnpm start`, then add `http://localhost:6061/mcp` to your MCP client config (e.g. `mcp.json`). See [AGENTS.md](./AGENTS.md) for full install steps and agentic workflows. ## Contributing **Note for external contributors:** We are not accepting external contributions at this time. We are working to make this happen in the future, and we will let you know when this is possible! For a more detailed explanation about how to develop Wonder Blocks components, please refer to the [internal documentation](https://khanacademy.atlassian.net/wiki/spaces/FRONTEND/pages/100827261/Developing+wonder-blocks) Please note – before contributing ensure that any design changes you are wanting to make are reflected in the [Wonder Blocks project in Figma](https://khanacademy.atlassian.net/wiki/spaces/WB/pages/4396089552/Resources#Figma). ## Thanks <a href="https://www.chromaticqa.com/"><img src="https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a" width="120"/></a> Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that helps us catch unexpected changes on time.

README-Quelldatei lesen

README des Repositorys wird geladen…

Skills in diesem Repository

Web- und digitale Schnittstellendesigner Softwarequalitätssicherungsanalysten und -tester

2 Berufskategorien · 100% klassifiziert

Skill

Beruf

Beschreibung

Aktualisiert

storybook

Web- und digitale Schnittstellendesigner

Storybook best practices for Wonder Blocks component stories. Use when creating or editing `.stories.tsx` / `.stories.ts` files.

Quellsprache: Englisch

2026-06-25

unit-tests

Softwarequalitätssicherungsanalysten und -tester

Jest + React Testing Library best practices for Wonder Blocks unit tests. Use when creating or editing `.test.ts` / `.test.tsx` files.

Quellsprache: Englisch

2026-05-07

wonder-blocks

Web- und digitale Schnittstellendesigner

Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library. Use this skill whenever the user asks you to build, modify, or review UI components; wants to use or map WB tokens for colors/spacing/typography…

Quellsprache: Englisch

2026-04-10

Es werden 3 von 3 gesammelten Skills angezeigt.

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/Khan/wonder-blocks.