# Memoire Design Tooling

> Use when a task involves UI design, interface understanding, interface craft, Figma, design systems, shadcn/ui, Tailwind, UX audits, user research, Atomic Design, component specs, MCP, or design-to-code generation.

- **Type:** Skill
- **Install:** `agentstack add skill-sarveshsea-memi-memoire-design-tooling`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sarveshsea](https://agentstack.voostack.com/s/sarveshsea)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sarveshsea](https://github.com/sarveshsea)
- **Source:** https://github.com/sarveshsea/memi/tree/main/skills/memoire-design-tooling
- **Website:** https://memoire.cv

## Install

```sh
agentstack add skill-sarveshsea-memi-memoire-design-tooling
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# memi Design Tooling

Use memi as the local interface-understanding layer before broad frontend changes. The goal is to give the agent evidence about the product UI before it edits code.

## Fast Path

```bash
npm i -g @memi-design/cli
memi suite init --project .
memi daemon start --project . --port auto
memi daemon status --json
memi agent install --dry-run --json
memi agent brief . --intent "Improve this interface" --json
memi status
memi diagnose .
memi ux audit . --json
memi craft audit . --json
memi tokens --from ./src --report
memi shadcn export --out public/r
memi mcp start --no-figma
```

## Interface Understanding Protocol

1. Read the local instructions first: `AGENTS.md`, README files, `.memoire/`, specs, tokens, and `memoire.agent.yaml`.
2. Generate a design-agent preflight with `memi agent brief . --intent "" --json`; use it as the local evidence and cost-control contract.
3. Collect evidence with `memi diagnose .`, `memi ux audit . --json`, `memi craft audit . --json`, and `memi tokens --from ./src --report` before making broad UI edits.
4. If a runtime route matters, run `memi diagnose http://localhost:` or `memi design-doc  --spec`.
5. If Figma is connected, use memi/Figma context for token pulls, component inspection, screenshot capture, and sync. Figma is optional; do not block code-first audits on it.
6. Map components to Atomic Design levels: atom, molecule, organism, template, page.
7. Prefer shadcn/ui primitives and Tailwind. Avoid introducing CSS modules or styled-components for memi-generated UI.
8. Use UX Tenets and Traps as the review layer: clarity, feedback, control, consistency, accessibility, error recovery, progressive disclosure, workflow fit, trust, and state continuity.
9. Use Interface Craft as the polish layer: focusing mechanism, visual hierarchy, spacing rhythm, color intentionality, visual weight, component cohesion, responsive resilience, and user context.
10. For research-backed product work, run the research flow before implementation:

```bash
memi research synthesize
memi simulate plan --hypothesis "Evidence links improve product confidence" --json
memi research design --intent "Design from the accepted research evidence" --json
memi research design --write-specs --mermaid-jam --json
memi mermaid-jam export --from research --json
```

11. For registry work, keep the output installable:

```bash
memi shadcn doctor
memi shadcn export --out public/r
memi publish --name @you/ds
memi add Button --from @you/ds
```

12. End with evidence: commands run, artifacts produced, files changed, remaining assumptions, and the next verification command.

## Agent Stack Setup

```bash
memi agent install universal --project .
memi agent install hermes
memi agent install openclaw --project .
memi agent install claude-code --project .
memi agent install cursor --project .
memi agent install codex
memi agent install codex-plugin
memi agent install opencode --project .
npx skills add sarveshsea/memi --skill memoire-design-tooling
```

Use `memi agent install --dry-run --json` before writing kit files in shared repositories.

## Output Artifacts To Cite

- `.memoire/app-quality/diagnosis.json`
- `.memoire/app-quality/diagnosis.md`
- `.memoire/app-quality/ux-audit.json`
- `.memoire/app-quality/interface-craft.json`
- `.memoire/design-system.json`
- `public/r/registry.json`
- `.memoire/mermaid-jam//`
- `memoire.agent.yaml`

## Common Mistakes

- Starting a UI patch before collecting design evidence.
- Treating Figma as mandatory when code-first audit commands are enough.
- Creating new component patterns when shadcn/ui or local components already exist.
- Omitting Atomic Design levels from new component specs.
- Ignoring UX trap findings because the screen looks acceptable in one viewport.
- Skipping interface craft checks, then relying on taste for hierarchy, rhythm, polish, or conventions.
- Installing agent kits without a dry run in a shared workspace.
- Skipping the design-agent brief, then guessing which evidence, agent stack, or cost mode applies.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sarveshsea](https://github.com/sarveshsea)
- **Source:** [sarveshsea/memi](https://github.com/sarveshsea/memi)
- **License:** MIT
- **Homepage:** https://memoire.cv

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sarveshsea-memi-memoire-design-tooling
- Seller: https://agentstack.voostack.com/s/sarveshsea
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.