Downloadable skill packs
for Mémoire

Create variable collections with the correct architecture (Primitives + Semantic split). Create primitive variables with raw values, then semantic variables that alias primitives. Set scopes on every variable (never use ALL_SCOPES). Set code syntax on every variable.

Colors are 0-1 range - { r: 1, g: 0, b: 0 } not { r: 255, g: 0, b: 0 }. Fills/strokes are immutable arrays - clone with JSON.parse(JSON.stringify(...)), modify, reassign. In-place mutation does nothing.

In UI: staggered children. When a panel slides in, its contents arrive 50-80ms later. A card’s shadow settles after the card itself. Elements within a group resolve at slightly different times, creating organic layered motion.

The thumb zone model is based on Steven Hoober’s research on one-handed phone use. For a right-handed user holding a ~6.1" phone, the bottom 20-30% of the screen is the easy reach zone for primary CTAs, while the top 20% is hard to reach without shifting grip.

A button never references a raw scale token directly. It references --button-bg, which resolves through --color-primary to the active brand alias. Changing the brand color only requires updating the alias tier.

Variants are Figma’s reusable design entities. Layer naming encodes combinations: Variant=Primary, Size=Small, State=Disabled. Variants multiply combinatorially, so define only the axes you need.

A button never references a raw scale token directly. It references --button-bg, which resolves through --color-primary to the active brand alias. Changing the brand color only requires updating the alias tier.

IMPORTANT: Before creating any component, check (1) get_code_connect_map for existing Figma mappings, (2) src/components/ui/ for shadcn/ui primitives, (3) .memoire/specs/ for existing specs.

Files are created in the user’s drafts folder for the selected plan. Only "design" and "figJam" editor types are supported. Always load the figma-use skill before making canvas operations on the new file.

Use this Note to keep UI motion and generated video projects fast, accessible, and consistent with the design system. Pair with animation-craft for in-product motion and with remotion-video or hyperframes-video when shipping rendered scenes.

Gap Analysis: For each feature where we = "none" and any competitor = "full", Priority = feature_weight * count_of_competitors_with_full. Sort by priority descending. Top 5 = critical gaps to address.

Multi-Angle Queries: Cover the topic from multiple perspectives. 5-7 queries, each targeting a different angle. Example: Form validation research - query best practices, abandonment causes, one-page vs multi-step, guest checkout impact, mobile patterns.

When time is limited, extract insights in this order: (1) Pain points - highest signal, most actionable, (2) Goals and motivations - frame the problem space, (3) Current behaviors and workarounds - reveal unmet needs.

Write scenarios, not instructions. Say "Find a book under $30" not "Click the search bar, type books, click filter." Avoid leading language. Do not mention UI elements by name. Include realistic context.

Phase 1 Open Coding: Read through all data and assign descriptive codes to each meaningful segment. Code everything relevant, skip nothing on first pass. Use gerunds or descriptive phrases. Target 30-80 unique codes from a typical study.

WCAG 2.2 contrast: compute relative luminance per sRGB, then (lighter + 0.05) / (darker + 0.05). AA needs 4.5:1 for normal text, 3:1 for large. AAA needs 7:1. Touch targets: 44x44px minimum per criterion 2.5.8.

Browser-backed agents must capture (1) URL + retrieval timestamp, (2) the supporting passage verbatim, and (3) at least one comparison source per claim. Use citations as evidence links in research synthesis and Mermaid Jam exports.

The sync is idempotent. Every record carries a notion_page_id on the Memoire side and a memoire_spec_id custom property on the Notion side. Conflict resolution follows a last-writer-wins strategy with optional manual review.

Every design task in Linear maps to a spec (component, page, dataviz, design, or IA). When a spec progresses through its lifecycle, the corresponding Linear issue is updated automatically.

Typeform API: Generate a personal access token at admin.typeform.com/account#/section/tokens. Required scopes: forms:read - access form definitions, responses:read - access response data.

Memoire injects these files into every session: CLAUDE.md, notes/, learnings/. When learnings prove broadly applicable, promote them to project files. If a workflow becomes stable, encode it in a built-in note or skill.

Search strategy: (1) Exact name match: grep -r "export.*ComponentName", (2) Fuzzy name match: kebab-case, PascalCase, camelCase variants, (3) Props alignment: compare Figma properties to TypeScript prop types.

When both sides have changes: Token value changed in Figma only → Accept Figma. Token value changed in code only → Push to Figma. Both changed same token → Prompt user - show diff. New component in Figma → Pull + auto-spec.

Open the target page in a desktop browser. Wait for fonts, images, and lazy-loaded content to finish rendering. Scroll to the exact section you want to capture. Run the bookmarklet that loads capture.js.

Prefer machine-readable command output whenever Memoire exposes it. Do not scrape terminal prose if a JSON surface exists. Keep each commit scoped to one behavior or one workflow lane. Read the diff before every commit.

The Figma plugin runs on the host machine - not in the container. Map ports 9223-9232 explicitly and bind the bridge to 0.0.0.0. For CI, set MEMOIRE_HEADLESS=true and MEMOIRE_NO_BRIDGE=true. Run memi audit --wcag --exit-code to gate PRs.

Persona profiles define behavioral defaults; project memory holds durable facts; task memory holds session-bounded state. Always layer profiles bottom-up - task < project < persona - so transient state cannot overwrite durable facts.

A messaging gateway turns agent output into channel-aware deliveries. Encode the routing contract once (channel, audience, redaction policy, retry window) so any agent kit can publish without re-implementing platform plumbing.

A checkpoint is a labeled snapshot of agent state plus the prompt that produced it. Resume from a checkpoint by replaying the prompt against the same session store - never by hand-editing the JSONL log.

When porting a skill: keep the original system prompt verbatim, normalize tool names to the target ecosystem, then add a Memoire `activateOn` signal so router heuristics still work after the move.

macOS agents must request Automation, Accessibility, and Full Disk Access privileges explicitly per app. Bundle the prompts behind a single `memi setup macos` flow so users grant access once instead of mid-session.

Default to a guarded sandbox: read-only filesystem, allowlisted commands, network off. Promote to write or shell only when an explicit user approval landed in the same turn - never inherit elevated permissions across sessions.

Every scheduled run should produce a single JSONL artifact and exit cleanly. Treat retry as the user’s job - agents that retry themselves on a cron silently double their cost and surface area.

A healthy gateway exposes three signals: liveness (process up), readiness (downstream models reachable), and quota (cost-window remaining). Treat any of the three flipping as a scheduling event, not a paging event.

Memoire installs `memoire-design-tooling` under ~/.hermes/skills. Activate it inside a Hermes session by referencing the skill name explicitly - Hermes does not auto-load skills the way Codex does.

`memi mcp start --no-figma` is the registry-safe entrypoint. External agents can list 18 Memoire tools and 3 resources without requiring a live Figma bridge - useful for crawlers and headless inspections.

Run `memi simulate models --json` before any swarm cohort. The matrix shows which provider is reachable, which fallback model fires, and what reasoning effort is currently configured - preventing silent quality drops mid-run.

Treat the kanban as the single source of truth for inter-agent coordination. Each card has owner, state, and evidence link - agents that change state without writing evidence get rejected on the next sync.

OpenClaw expects skills under `<workspace>/skills/`. Memoire installs `memoire-design-tooling` there and registers itself in the gateway so OpenClaw approvals route through Memoire’s permission mode.

Never paste an API key into a prompt. Reference env vars by name; the Memoire daemon resolves them at call time and redacts them in transcripts. Treat any agent that requests a literal secret as a security event.

Generates Material 3 themed widgets with Riverpod state management, responsive layouts, custom painting for dataviz, GoRouter navigation, and full test coverage. Follows Effective Dart and atomic design principles.

Atoms are self-contained. No imports from other components. Props in, events out. Molecules compose 2-5 atom components. Keep logic minimal - presentation layer only. Organisms use composables for complex state.

Extract fileKey from URL segment after /design/. Extract nodeId from URL query node-id=1-2, convert hyphens to colons → 1:2. Call get_design_context(fileKey, nodeId) for layout properties, typography, colors, components, spacing.

Tailwind to NativeWind: Web Tailwind classes map 1:1 in NativeWind 4.x. Exceptions: hover:, focus-visible: - replace with active: states. Grid: Use flex layout - RN has no CSS Grid. gap-* works in NativeWind, prefer over margin hacks.

Use Hyperframes when the video can be expressed as a deterministic HTML scene - a layered DOM tree with timed transitions. The Note ships render commands for the local preview server and the production frame export.

Use Remotion when the output should be a React-coded video project. Keep one Composition per scene, defer typography and easing to design tokens, and hand off the rendered MP4 through the Memoire downloads store.

Use this Note when Studio needs to turn a website, app route, or browser flow into a structured video scene - captures viewport, scroll, and interaction states without re-implementing each page in Remotion or Hyperframes.