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 --blue-500 directly. It references --button-bg, which resolves through --color-primary to --blue-500. 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 --blue-500 directly. It references --button-bg, which resolves through --color-primary to --blue-500. 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.

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.

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.

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.