Skip to document

FRAMEWORK / DOCUMENTATION

Use both skills

The portable Framework skill is in skills/framework-design-system. The companion skills/motion-design is the unmodified official LottieFiles skill, pinned in UPSTREAM.json with its MIT notice. Copy these directories into your Codex skills directory if they are not installed; preserve any existing local customizations before replacing them.

Reusable project prompt:

Use $framework-design-system and $motion-design for this project.

Project: [what we are building]
Audience: [who will use it]
Primary task: [what users need to accomplish]
Scope: [screens, components or flows]

Read both skills and inspect the existing codebase. Preserve its architecture and stack.
Use Framework as the visual authority: inspect relevant bundled previews and component contracts before building. Read references/runtime.md, inspect the matching explorer specimens and reuse the shared runtime controllers/styles, or equivalent accessible project primitives matching their states and behavior. Copy runtime assets into the project; mount client-side and destroy controllers on unmount.
Use motion-design for purposeful feedback, hierarchy and navigation within Framework's visual roles. Choose intent, timing, easing and choreography deliberately. Keep motion restrained, interruptible and compatible with reduced motion.
Build working states and real keyboard behavior, including loading, validation, cancellation and focus return. Test mobile, tablet, desktop, breakpoint boundaries, long content and interrupted animations. Fix issues before handoff and report actual verification limits.
Keep project extensions local. Do not edit the canonical Paper source, installed skills or hosting without my explicit request.

When maintaining this repository, edit src/ and run npm run build:skill to regenerate portable component/reference assets. Skill prose remains authored in its references/ directory. The Framework skill is usable without Paper or Refero access; the original source links and provenance remain available for deeper inspection.