motion-lexicon

Files (200)

• SKILL.md
• THIRD_PARTY_NOTICES.md
• openai.yaml · agents/
• candidate-template.md · assets/
• example-motion-blueprint.json · assets/
• motion-blueprint.schema.json · assets/
• motion-lexicon-page.css · assets/
• evals.json · evals/
• README.md · evals/evidence/
• browser-evidence.mjs · evals/evidence/forward-test-2026-08-11/
• browser-acceptance.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• build.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• index-BZ-tLmzy.js · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/dist/assets/
• index-BhNk6t7s.css · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/dist/assets/
• index.html · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/dist/
• events.jsonl · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• final.md · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• initial-fixture-manifest.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• isolation-manifest.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• prompt.txt · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/
• index.html · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• package-lock.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• package.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• playwright.config.d.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• playwright.config.js · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• playwright.config.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• Button.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/components/ui/
• main.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/
• AnalyticsPage.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/pages/
• HomePage.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/pages/
• router.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/
• styles.css · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/src/
• smoke.spec.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/tests/
• tsconfig.app.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• tsconfig.app.tsbuildinfo · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• tsconfig.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• tsconfig.node.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• tsconfig.node.tsbuildinfo · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• vite.config.d.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• vite.config.js · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• vite.config.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r1/source/
• browser-acceptance.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• build.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• index-BsjZQkjN.js · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/dist/assets/
• index-DTIoutw6.css · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/dist/assets/
• favicon.svg · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/dist/
• index.html · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/dist/
• events.jsonl · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• final.md · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• initial-fixture-manifest.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• isolation-manifest.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• prompt.txt · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/
• index.html · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• package-lock.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• package.json · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• playwright.config.d.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• playwright.config.js · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• playwright.config.ts · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/
• favicon.svg · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/public/
• loading-button.tsx · evals/evidence/forward-test-2026-08-11/en-build-page-analytics-dashboard/r2/source/src/components/motion-lexicon/
• …and 140 more

SKILL.md (first lines)

# Motion Lexicon

Motion Lexicon is a design system for product motion. It connects two equal
collections: Motion Primitives describe a precise behavior; Components turn
one or more behaviors into a complete, copy-ready product interaction. Page
composition places those interactions inside a coherent product surface.

Design from the user's product event. Produce code only when it supports a
clear state change, a focused actor, and an accessible handoff.

## Choose a mode

| Signal in the request | Mode | Deliverable |
| --- | --- | --- |
| A complete page, screen, landing page, dashboard, or settings surface | **Build Page** | Page plan, exact Registry composition, working page, and acceptance evidence |
| A feeling, term, or "which animation" question | **Recommend** | Ranked candidates and one recommendation |
| A workflow, transition, or multi-step scene | **Compose** | Motion Blueprint and beat plan |
| A request for production code or a framework adaptation | **Implement** | Portable HTML, CSS, JS, or requested framework code |
| Existing code, a recording, or a report of jank | **Review** | Prioritized diagnosis and concrete fixes |
| A new pattern, example, or proposed library addition | **Contribute** | Candidate record ready for maintainer review |

Apply mode priority deterministically: a complete page or multi-region surface
uses Build Page; an explicit request for code or a framework implementation of
one interaction uses Implement; a request only for a design plan, beat plan, or
Blueprint uses Compose. Implement may create a Blueprint internally and still
delivers the runnable format the user requested. A Review request can return a
revised Blueprint when the current interaction needs a larger change.

## Start every request

1. Preserve the user's language. Use Chinese for Chinese requests and English
   for English requests.
2. Identify the product job, primary action, user-visible state before and
   after it, primary actor, and intended feeling.
3. Use the mode × reference table below. Load only the files selected for the
   current task.
4. Load [interior-principles.md](references/interior-principles.md) when the
   request needs material depth, physicality, or the Interior visual profile.
5. State assumptions briefly when the request leaves product context open. Ask
   one focused question only when a missing constraint changes the design.
6. Keep one primary visual actor and at most two supporting actors in a beat.
   Give each actor a semantic kind: trigger, hero, status, record, or
   environment. Give each beat a product purpose: orient, confirm, preserve
   continuity, reveal, or recover.
7. Include a reduced-motion plan and keyboard/focus behavior in every composed,
   implemented, or reviewed interaction.
8. For a page request, inspect the host project before choosing a stack. Preserve
   its routing, component system, design tokens, and content language. Use React
   and TypeScript for a greenfield page unless the user requests another stack.

## Mode × reference routing

| Mode or task | Read | Add only when relevant |
| --- | --- | --- |
| Build Page | [page-composition.md](references/page-composition.md), [page-system.md](references/page-system.md), and [components.md](references/components.md) | [motion-lexicon-page.css](assets/motion-lexicon-page.css) when the host has no established visual system; one moment or primitive reference for the page's primary state change |
| Recommend a published component | [components.md](references/components.md) | One primitive family below when the user asks how the motion works |
| Recommend one behavior | [motion-language.md](references/motion-language.md) | [entrances](references/primitives/entrances.md), [feedback](references/primitives/feedback.md), [transitions](references/primitives/transitions.md), or [sequencing](references/primitives/sequencing.md) |
| Compose a Product Moment | [composition.md](references/composition.md) and [contract.md](references/contract.md) | [feedback moment](references/moments/feedback.md), [choice moment](references/moments/choice.md), [change moment](references/moments/change.md), or [workflow moment](references/moments/workflow.md) |
| Implement | [implementation-css.md](references/implementation-css.md) | [contract.md](references/contract.md) when consuming or producing a Blueprint; [components.md](references/components.md) for an exact published component |
| Review | [review-rubric.md](references/review-rubric.md) | The one primitive or moment reference that matches the observed behavior |
| Contribute | [contribution.md](references/contribution.md) and [candidate-template.md](assets/candidate-template.md) | [contract.md](references/contract.md) for the required Blueprint and [components.md](references/components.md) to rule out an existing component |

## Motion language

Use the Interior-informed profile throughout the skill:

- Model a real product state with a bezel, a raised panel, and a recessed well
  when material depth helps orientation.
- Start motion from an event: a press, selection, route change, status update,
  or direct manipulation.
- Reserve space for state changes so labels, buttons, and records keep their
  geometry.
- Use arrival motion for new context: `cubic-bezier(.23, 1, .32, 1)` over
  roughly 200–280 ms. Use leaving motion for removed context:
  `cubic-bezier(.23, 1, .32, 1)` over roughly 110–180 ms.
- Use transform and opacity for the moving work. Use short color or focus
  transitions when feedback needs an immediate response.
- Let a second user action interrupt, reverse, or settle the first action.
- In reduced motion, preserve state, hierarchy, focus, and feedback through a
  static state or short opacity crossfade.

Read the detailed rules in [interior-principles.md](references/interior-principles.md).

## Build Page

Build a complete, runnable product surface in the user's project. Read
[page-composition.md](references/page-composition.md),
[page-system.md](references/page-system.md), and
[components.md](references/components.md) before planning the page.

1. Inspect the target repository, framework, routes, existing tokens, and
   installed dependencies. Reuse the host system where it is coherent.
2. Before editing any file, output the Host inspection table and compact Page
   Plan shown below. Include the page job and archetype, every major region,
   the exact published component ID or `none`, the primary state boundary, and
   the responsive and theme decisions. Every Host inspection value cites the
   inspected file path. A prose implementation intention does not satisfy this
   gate.
3. Use the source at `https://motion-lexicon.pages.dev/r/<id>.json` for a
   published component. Read its `files`, `dependencies`, and runtime before
   editing. Install the delivered source and dependencies; adapt only its
   props, labels, data, callbacks, and host placement. Do not regenerate an
   approximation of the same component.
4. Complete the Registry integration gate before selecting an ID: every
   current Registry source uses Tailwind utility classes. Confirm that the host
   already compiles Tailwind, or add its supported Tailwind setup when changing
   the host toolchain is within scope. If that setup cannot be added, select
   `none` for the region and build plain semantic UI; never silently paste a
   CSS reimplementation of a Registry component. Record the JSON URL, target
   file, dependency list, and any required runtime in the Page Plan.
5. Audit the rendered interactive node after integration. The page standard is
   at least 44 by 44 CSS px even when a Registry component's default visual
   height is smaller. Pass a host class through a documented `className` prop
   and set `min-width` and `min-height` on that node. If the source offers no
   safe styling hook, choose a fitting component that does or leave the region
   plain.
6. Give the page one dominant work surface, one primary motion moment, and at
   most two supporting motion moments. Keep static content calm.
7. Use the host design system. For a greenfield surface, copy and adapt

From Ryan-yang125/motion-lexicon, MIT.