Install agent capabilities in one command.

WCAG 2.2 compliance auditing — color contrast, keyboard nav, screen reader, focus management, touch targets, cognitive accessibility, motion sensitivity, forms, automated testing integration

Design durable user, project, persona, and task memory profiles for local agents.

Design gateway-backed agent delivery through chat, email, and team messaging channels.

Capture restartable agent sessions with checkpoints, rollback notes, and resume metadata.

Move skills, memories, context files, and agent rules between Memoire and peer agent ecosystems.

Motion design and micro-interaction craft — timing, easing, UI choreography, and links into the current Remotion/Hyperframes production packs.

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

Prepare macOS agents to work with Apple apps, local files, permissions, and desktop automation.

Define approval, sandbox, filesystem, and command policy for local autonomous agents.

Atomic Design quick reference — levels, composition rules, tokens, naming

OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, heading hierarchy, heading levels, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.

Run browser-backed research agents that capture evidence, citations, and source freshness.

Codex and Claude operating workflow for Memoire - JSON-first commands, commit hygiene, review loops, memory capture, and safe autonomous repo operation

Competitive intelligence and market analysis — systematic frameworks for analyzing competitor products, design patterns, feature matrices, positioning maps, and UX benchmarking

Select and classify interface components when planning a design system, mapping Figma to code, or checking component-library coverage.

Turn repeatable agent work into scheduled jobs with explicit outputs and safe permissions.

Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards

Qualitative and quantitative data synthesis — affinity mapping, thematic analysis, statistical frameworks, insight triangulation, and research-to-spec pipelines

Extract a public website's design system when a task needs evidence about its colors, typography, spacing, radii, shadows, components, or Tailwind tokens.

Use design-sandbox as the public proof repo for memi, MCP, Agent Skills, and interface craft.

Compare real-world design-system patterns when specifying, auditing, or naming a component and current external references would improve the decision.

Design system architecture and governance — token taxonomy, component APIs, versioning strategy, adoption metrics, multi-brand theming, and cross-platform consistency

Add or review DialKit controls when a React, Solid, Svelte, or Vue interface needs live tuning of animation, layout, color, typography, or component parameters.

Docker-aware Mémoire operation — CI/CD headless pipelines, shared MCP server, agent worker containers, and Figma bridge port-forwarding for containerized setups

Apply Emil Kowalski's design-engineering guidance when polishing interface details, choosing motion, or reviewing whether a product feels responsive and intentional.

Audit Figma file for design system consistency, accessibility, token adoption, Code Connect coverage

Code Connect workflow — map Figma components to codebase implementations, batch mappings, keep design-code parity

Create new Figma design or FigJam files via MCP — resolve plans, scaffold files, prepare for canvas operations

Working with Design Systems in Figma — components, variables, text styles, effect styles, creation and usage patterns

Generate design system rules for AI agents — encode codebase conventions, token usage, component patterns into CLAUDE.md/AGENTS.md/.cursor rules

Create new Figma screens and pages using existing components, variables, and design system

Generate Figma component library from React/shadcn codebase with Code Connect parity

Figma-to-code implementation — extract design context, map tokens, generate production-ready components with 1:1 visual parity

Figma design system library builder — phased workflow for tokens, components, documentation, with ready-to-use Plugin API scripts

Figma Plugin API reference — gotchas, patterns, variables, components, text/effect styles, validation and error recovery

Build interactive Figma prototypes with flows, transitions, and user journey mapping

Figma sync workflow patterns — bidirectional design-code sync, conflict resolution, incremental updates, multi-file orchestration

Foundational Figma canvas skill — structure, Auto Layout, variables, MCP tools, self-healing loop

Figma web capture workflow - import live webpages or DOM elements into editable Figma layers with the public html-to-design capture.js bookmarklet

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

Flutter and Dart widget generation — transforms Mémoire component specs into Flutter widgets with Material 3, Riverpod state management, and responsive layouts

Observe and debug local agent gateways, daemons, health probes, logs, and usage costs.

Run Hermes Agent from Memoire with CLI, skills, toolsets, worktree, and session recipes.

Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

Make interface craft a required design-agent gate before and after UI changes.

User interview and transcript analysis — parsing speaker-labeled transcripts, extracting pain points/goals/behaviors, sentiment analysis, and persona generation from qualitative data

Linear integration for Mémoire — sync design issues, component specs, and project tracking between Linear and the Mémoire registry

Expose Memoire Studio context, tools, and artifacts to other agents through MCP.

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.

Set up memi MCP and Agent Skills before broad frontend changes.

Connect the Tauri/Rust macOS Studio app to the CLI, MCP, receipts, and project artifacts.

Connect the memi v2 public surfaces before publishing, onboarding agents, or writing docs.

Route Mermaid and markdown diagram source into the Mermaid Jam FigJam plugin for editable native FigJam output

Mobile-first design mastery — touch targets, gesture patterns, responsive breakpoints, native-feel animations, thumb zones, platform conventions (iOS/Android), and progressive enhancement strategies

Diagnose provider auth, model routing, quota windows, and fallback behavior before agent runs.

Motion performance pack for 60fps UI animation, reduced-motion fallbacks, render budget checks, and video export QA.

Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines

Orchestrate multiple Claude instances on Figma canvas with box widgets, coordinated handoffs, error recovery

Coordinate multiple local agents through a durable board with owner, state, and evidence fields.

Notion integration for Mémoire — sync research insights, specs, and project context between Notion databases and the Mémoire registry

Connect Memoire to OpenClaw onboarding, agents, gateway health, MCP, and approval flows.

React Native code generation from Memoire specs — NativeWind styling, Expo-compatible, platform-specific patterns

Current Remotion video production pack for React-based product videos, previews, and renderer handoff.

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

Handle agent credentials with env refs, redaction, least privilege, and non-leaking prompts.

Closed-loop learning system — captures errors, corrections, and discoveries into structured logs, promotes recurring patterns to project memory, and extracts reusable skills

Default autonomous superagent mode — read designs, drive canvas, orchestrate agents, generate specs and code

Survey platform integration — import responses from Typeform, Google Forms, SurveyMonkey, Airtable, and CSV exports into Mémoire's research pipeline

Design token architecture — multi-tier token systems, semantic naming, theme switching, CSS custom properties, Tailwind mapping, and Figma variable sync

Usability testing frameworks — test planning, task scenarios, moderated and unmoderated protocols, analysis frameworks, and insight synthesis for Mémoire research pipeline

UX tenets and traps framework for code, Figma, screenshot, and Studio critique workflows.

Vue 3 Composition API code generation — transforms Mémoire component specs into Vue SFCs with script setup, Tailwind styling, and composable patterns

Structured web research — topic exploration, content fetching, finding extraction, cross-source validation, and gap analysis for design research

Website-to-video capture pack for turning product pages, flows, and browser states into structured video scenes.