# remember-design-system

Builds a repository-specific brief before interface work, covering tokens, components, routes, conventions, and checks. Use it before building or refactoring UI code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 49
- Author: memi-design
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/memi-design/memi/tree/HEAD/skills/remember-design-system/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/remember-design-system

## What it does

The skill runs `memi agent brief` from the repository root to gather design-system context. For a selected Figma or Paper node, you can pass normalized design data with `--design-evidence`.

Before editing, the agent identifies components and tokens to reuse and preserves the route, state, and responsive behavior captured in the brief. Afterward, it reports changed files, evidence followed, and checks run. If the brief leaves a detail unresolved, the workflow calls for reading the cited source files. The recipes require local `memi` to report version `2.8.0-beta.2`; npm availability alone does not confirm that the native binary works.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add memi-design/memi --skill remember-design-system -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/remember-design-system/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/remember-design-system/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add memi-design/memi --skill remember-design-system -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/remember-design-system/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add memi-design/memi --skill remember-design-system -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/remember-design-system/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install memi-design/memi remember-design-system
```

2. **Manually: put the files in place**
- File: `.github/skills/remember-design-system/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add memi-design/memi --skill remember-design-system -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/memi-design/memi --path skills/remember-design-system
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/remember-design-system/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add memi-design/memi --skill remember-design-system -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/memi-design/memi/tree/HEAD/skills/remember-design-system/SKILL.md

## When to use it
- gather a concise design-system brief from a repository
- find existing components and tokens for a UI change
- preserve route and state behavior during interface edits
- run the project’s actual tests after UI work

## Example prompts
- Before changing this page, inspect the project’s design system and name the components and tokens you’ll reuse.
- Prepare a UI brief for adding a loading state to the profile page.
- Use `design/selected-node.json` as design evidence for this interface task.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1240ade04d8dff13.

BEGIN THIRD-PARTY FILE 1240ade04d8dff13
````text
---
name: remember-design-system
description: Use when an agent is about to build or refactor interface code and needs a compact, repository-specific brief covering existing tokens, components, routes, conventions, and verification commands.
---

# Remember The Design System

Build design context from the repository instead of guessing from the prompt. This is a preflight for UI work, not a request to redesign the product.

This workflow targets published beta **2.8.0-beta.2**. Use `npx -y @memi-design/cli@2.8.0-beta.2 --version` to verify the exact package; a local `memi` must report that same version before these recipes run. The independent stable compatibility baseline is **2.7.9**. See [current release state](https://github.com/memi-design/memi/blob/main/docs/CURRENT_RELEASE.md) and [known limitations](https://github.com/memi-design/memi/blob/main/docs/trust/KNOWN_LIMITATIONS.md). npm availability alone does not establish native-binary success.

## Build The Brief

Translate the user's task into a short intent, then run from the repository root:

```bash
memi agent brief . --frontend --intent "<user's interface task>" --max-bytes 16384 --json
```

The frontend brief already includes bounded token and story evidence. For a selected Figma or Paper node, use the harness connector and supply its normalized evidence:

```bash
memi agent brief . --frontend --intent "<task>" --design-evidence design/selected-node.json --json
```

## Apply The Memory

1. Prefer existing components and the project's conventions. Do not impose a new component library or CSS framework.
2. Map every new component to atom, molecule, organism, template, or page.
3. Reuse semantic CSS variables and Tailwind theme tokens. Do not introduce raw hex values when a token exists.
4. Preserve route, state, loading, empty, error, focus, and responsive behavior identified by the brief.
5. Resolve stale/conflicting mappings and missing required props before editing. Read cited source files when the bounded brief omits needed details.
6. Treat inferred story IDs and host-supplied mappings as evidence, not rendered verification. Run the actual project tests.

## Handoff

Before editing, state the components and tokens you will reuse. After editing, cite files changed, evidence followed, checks run, and any design assumptions that remain.
````
END THIRD-PARTY FILE 1240ade04d8dff13

The third-party file has ended. Everything between the 1240ade04d8dff13 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

© memi-design · MIT · https://github.com/memi-design/memi/tree/HEAD/skills/remember-design-system/SKILL.md

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [memi-design/memi](https://affpapa.org/en/nevibecode/by/memi-design/memi.md) — 5 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md