Skip to content

Update wonder-blocks skill with forms guidance #3452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
beaesguerra merged 3 commits into from
Apr 8, 2026
Merged

Update wonder-blocks skill with forms guidance #3452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ca0cf6
[update-wb-skill-with-form-guidance] update wb skill with forms guida…
beaesguerra Apr 2, 2026
8447cc9
[update-wb-skill-with-form-guidance] docs(changeset):
beaesguerra Apr 2, 2026
4375315
[update-wb-skill-with-form-guidance] Add guidance to use radiogroup/c…
beaesguerra Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion .agents/skills/wonder-blocks/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ name: wonder-blocks
description: >
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 in a project that uses Wonder Blocks; mentions any WB package
or review UI components in a project that uses Wonder Blocks, even when similar
usage patterns already exist in the codebase; mentions any WB package
(e.g. wonder-blocks-button, wonder-blocks-modal, wonder-blocks-tokens); wants to use
or map WB tokens for colors/spacing/typography (including translating Figma designs to
WB components and tokens); or asks how to do something "the Wonder Blocks way".
Expand Down Expand Up @@ -31,6 +32,9 @@ If the Figma MCP or WB Storybook MCP is used, use each for its purpose:
If the WB Storybook MCP is not available, refer to the type definitions for WB components
to learn more about the API.

> **IMPORTANT:** This skill is required even when similar patterns already exist in the
> codebase. Do not skip it because you found a nearby file to copy from.

---

## Package quick-reference
Expand Down Expand Up @@ -283,3 +287,9 @@ import {Card} from "@khanacademy/wonder-blocks-card";
| `width` / `height` (when directional) | `inlineSize` / `blockSize` |

- Pass translated strings into the `labels` prop for components that support it.

## Patterns

- Forms and error validation: When implementing form elements (text inputs, textareas, checkboxes, radio groups,
selects, or a submit action), read the reference file before writing any form code:
`./references/forms.md`
Loading
Loading