Design with Milpa · Unit 2 of 3

Design gives language; Academy gives behavior

Milpa Design publishes CSS and contracts, not JavaScript. Academy controls routing, progress, curriculum data and verifiers. Its ac-* classes stitch the educational case together without redefining stable components.

Intermediate30 min

By the end, you'll be able to

Keep logic out of the CSS package
Create a local composition without duplicating mui-* anatomy

Understand

See

Open the gallery

The mui-plot, mui-pipeline, mui-gate and mui-replay pieces receive scenarios and state from Academy.

Open artifact

Do

Run the practice in your checkout and keep the output as evidence.

Compare artifacts and logic

Verify

Show that you can apply the unit. Progress only advances once you pass the assessment.

Criteria assessed

Separate Academy's logic from the published CSS contract.
Tell a specific ac-* composition apart from a generic component.

Graded assessment

Solve the 3 scenarios. This unit requires 3 of 3 correct answers.

0 attempts

Question 1 of 3Academy adds a quiz that grades answers, unlocks units and saves progress. How are the responsibilities divided?

Design publishes the CSS and the visual contracts; Academy implements questions, state, grading, persistence and navigation.Design should publish the question bank and localStorage, because the quiz uses mui-* classes.Academy should copy Design's CSS so its JavaScript owns the whole experience.

Question 2 of 3The quiz combines existing choices, callouts and progress, but needs a lesson-specific layout. Which strategy preserves the boundaries?

Create an ac-quiz composition that uses the public mui-* anatomies without redefining them.Add new private slots inside .mui-choice from Academy and document them as if they were public.Rename every mui-* in use to ac-* and maintain a divergent copy.

Question 3 of 3To reuse a card, someone proposes adding logic to @milpa/design that reads localStorage, knows Academy's routes and marks a unit as passed. Which decision is correct?

Accept it: a visual component is more reusable if it holds rules specific to the first product.Reject that logic in the visual package; keep it in Academy and pass the piece only state/markup that matches its contract.Move the curriculum catalog into Design as well, to avoid passing parameters across layers.

Grading validates answers in this browser; it doesn't certify identity.

Primary sources

Design governance

Content verified: 2026-07-10

By the end, you'll be able to

1Understand

2See

3Do

4Verify

Primary sources

Understand

See

Do

Verify