Docs

• The market has five levels: templates, styles, sections, components and effects. Pick a level, then narrow it down by category.
• Search matches names, categories and tags; press / to focus it. Filters live in the link, so copying the address shares them.
• "Copy skill" on a card copies that item’s SKILL.md. The general skills in the filter bar are design guides picked for the current category.

• A value turns orange when it leaves the recommended range, where the effect may look worse than the default.
• Double-click a parameter’s name to reset just that one; Reset restores everything.
• Changed values live in the address bar (#v=…). Copy link shares them, and whoever opens it sees the same result.
• Entrance animations that play once can be replayed with the button in the preview’s bottom-right corner.

Every option carries your tuned values: they sit in the defaults object at the top of the component, where you can edit them later or override them with props.

• Download the project

  Vite + React + Tailwind v4. npm install && npm run dev runs it; the matching skill is included.

• Install with shadcn

  Run the command from the Install tab; the component goes to components/motif/<item>/.

• Copy by hand

  Copy each file to the path in the Install tab, then install the dependencies.

In Studio, describe the effect in a sentence: the agent writes the component, its parameters and presets while you watch the preview. "Open in Studio" on an item page brings your tuned values along.

• Every change the agent makes goes through the same checks and build as the market, and it fixes its own errors.
• "Apply as defaults" writes the values you tuned in the preview back into the component.
• Prefer to do it yourself? Edit under Code and press Ctrl / ⌘ + S to save and build.
• When it is ready, export it like any market item (the shadcn URL is /r/s/<session>.json) or submit it to the community in one step.

A session link is the key to its workspace: anyone with it can keep editing, so share it only with people you trust.

A skill is a guide written for agents: when to use the effect, how to install it, your tuned values and the rules it must not break. Put it in your project and agents such as Claude Code, Codex and Cursor can build the same effect in your code.

• Claude Code reads .claude/skills/<name>/; Codex, Cursor and Gemini CLI read .agents/skills/<name>/.
• The Skill tab on an item page downloads the whole skill folder or copies just the SKILL.md; with only the SKILL.md, the agent fetches the component with npx skills add.

General skills cover motion, typography, shaders and other directions, and work alongside item skills:

Motif is also a store for agents: yours can search the catalogue, see previews, fetch code with your values, and place a custom order when nothing fits.

1. 1

   Findsearch_ui searches by need; get_ui shows parameters and presets.

2. 2

   Seepreview_ui takes screenshots with the values you pass.

3. 3

   Takeplace_order orders it and delivers at once: every file, an install command and a skill; list_skills and get_skill fetch skills. Paid with the credits of your API key’s account; anything bought once is free again.

4. 4

   CustomNothing fits? Order with a brief and poll get_order. Delivered items pass the same checks.

Agents without MCP can read llms.txt or call POST /api/agent/<tool> directly.

Searching, details, previews and quotes are free and need no key. Code, skills and custom orders need a key from API keys and spend credits.

Code in the market comes only from licenses that allow redistribution: MIT, Apache-2.0, ISC, BSD, Zlib, Unlicense and CC0. The Source & license tab of each item names the upstream repository, the pinned commit and what Motif changed.

Keep the copyright comments at the top of each file when you use the code. Motif’s own code is MIT licensed.

Anyone can submit: post a MOTIF bond, and once curators approve it the work joins the market while its author earns a reward and reputation. The chain records the content hash, license and provenance; “verified on chain” on an item page is your browser recomputing the hash and comparing it with the chain.

1. 1

   PrepareMake it in Studio, or pack an item folder into a .motif.json with pnpm item:pack <slug>.

2. 2

   SubmitDrop the file on Community → Submit; once the checks and preview pass, sign and submit.

3. 3

   ReviewWhichever side reaches the quorum first decides. Quality problems get the bond back; plagiarism, fake licenses and malicious code forfeit it.

4. 4

   GovernDelegate your MOTIF to make and vote on proposals in Community → Governance.

Try it locally: pnpm dev:chain starts a local chain and imports the items; connect a wallet and claim test tokens. The contract design is in docs/decisions/0005-decentralized-community.md.

The repository is public on GitHub. Local development needs Node 22 and pnpm:

pnpm dev starts the site and the preview sandbox; run pnpm verify before you commit. How to write a new item and the quality bar are in Writing market items (in Chinese).