Khan/wonder-blocks

Última atividade de origem registrada: 6 de novembro de 2026 às 17:30

Catálogo do SkillsMP atualizado: 12 de novembro de 2026 às 12:52

skills coletadas: 3

Estrelas no GitHub: 163
Forks no GitHub: 12

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

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

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

# <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.

Carregando o README do repositório…

Skills neste repositório

Analistas de garantia de qualidade de software e testadores Designers de interfaces web e digitais

2 categorias ocupacionais · 67% classificado

skill

ocupação

descrição

atualizado

wonder-blocks

sem classificação

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…

Idioma do texto original: inglês

2026-11-06

storybook

Designers de interfaces web e digitais

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

Idioma do texto original: inglês

2026-06-25

unit-tests

Analistas de garantia de qualidade de software e testadores

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

Idioma do texto original: inglês

2026-05-07

Mostrando 3 de 3 skills coletadas.