exercise-components

Builds and reuses interactive React exercise islands for MDX lessons.

3|1|Updated Jun 20, 2026
One-click install
npx skills add https://github.com/alexfdez1010/mental-models --skill exercise-components-alexfdez1010
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: exercise-components
Source: https://github.com/alexfdez1010/mental-models/tree/main/.claude/skills/exercise-components
Command: npx skills add https://github.com/alexfdez1010/mental-models --skill exercise-components-alexfdez1010

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Authoring interactive exercises for MDX lessons often leads to one-off JSX, blank-rendering islands, and repetitive quiz questions. This Skill standardizes how multiple-choice questions, quizzes, matching, categorization, and fill-in-the-blank exercises are built and embedded in an Astro + React lessons site. ## Core Features & Use Cases - Reuse existing components: Drop MCQ, Quiz, FinalExam, MatchConcepts, Categorize, FillBlank, and MindMap islands into MDX via client:* directives with prop-based data. - Author new reusable islands: Enforces barrel exports, design tokens, accessibility, i18n label props, and onResult composability for any new React exercise component. - Build-time validation: Requires misconfigured components to throw during render so astro build fails loudly instead of shipping blank exercises, with a mandatory guard-test workflow. - Use Case: When writing a new lesson, you need a multi-select question and a concept-matching exercise per section — this Skill gives you the exact MDX snippets, placement rules, and question-writing guidelines to do it correctly. ## Quick Start Ask the AI to add a multi-answer MCQ and a concept-to-definition matching exercise to the current lesson using the existing exercise components.

Frequently Asked Questions about exercise-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a quiz or exercise to an MDX lesson in Astro?▼

Import the component from the barrel (`@/components/react`) and render it with a `client:visible` directive, passing all data as props. Available components include MCQ, Quiz, FinalExam, MatchConcepts, Categorize, and FillBlank.

How do I create a multi-select question in React?▼

Set `allowMultiple` on the MCQ component to turn radios into checkboxes, then mark every correct option with `correct: true` in the options array. The same per-question shape works inside Quiz and FinalExam.

Why does my Astro island render blank after hydration?▼

Astro renders children of a `client:*` island as an opaque HTML slot, so the client component never receives their props. Pass content as a prop instead of children, and make components throw when they detect the slot case.

Can exercise components support multiple languages?▼

Yes. Every user-facing string is a prop with an English default, such as `checkLabel`, `retryLabel`, and `scoreLabel`. Spanish lessons pass translated labels through these props, including a full FinalExam Spanish prop set.

How do I validate that a misconfigured exercise fails the build?▼

Components must throw at the top of render on bad input, such as fewer than two options or no correct answer. Prove it by temporarily authoring broken input in a throwaway lesson, confirming `bun run build` fails, then deleting the file.