Compose with @milpa/design

Understand

Design ships tokens, motion, primitives, components, artifacts and layouts. It doesn't ship JavaScript: state, data and behavior still belong to the application.

Consume a published version. Academy can try out ac-* compositions, but it must not duplicate the anatomy of a mui-* piece or read the package's private files.

See

Audit the executable contract

Change theme and surface; the gate computes contrast live.

Open artifact

Do

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

Open the contribution guide

Verify

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

Criteria assessed

The bundles load tokens, motion, primitives, components, artifacts and layouts, in that order.
Progress logic lives in Academy, not in Design.

Graded assessment

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

0 attempts

Question 1 of 3A new Academy page uses mui-gate and the documentation shell. Which way of loading respects @milpa/design's published contract?

Import only artifacts.css because it contains mui-gateImport layouts, artifacts, components, primitives, motion and tokens in reverse orderRead the internal CSS from GitHub's main branchLoad a published version in order: tokens, motion, primitives, components, artifacts and layouts

Question 2 of 3Academy needs to save progress, grade quizzes and decide which unit to unlock. Which repository does that logic belong to?

To Academy, because these are the state and rules of the educational productTo @milpa/design, so the CSS decides the student's progressionTo Runtime, because any interface state is part of bootTo Core, to share the rubric with every host

Question 3 of 3A single lesson needs to combine mui-card, mui-steps and a progress summary specific to Academy. No general reusable pattern exists yet. Which implementation respects the governance?

Locally create a new mui-learning-summary class and treat it as publicCopy mui-card's private anatomy and rename its selectorsCompose the published pieces with a local ac-* class without redefining their anatomyDirectly edit the installed CSS inside node_modules

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

Routes

Compose with @milpa/design

By the end, you'll be able to

Understand

See

Do

Verify

Primary sources

By the end, you'll be able to

1Understand

2See

3Do

4Verify

Primary sources

Understand

See

Do

Verify