memi-design

@memi-design source repo

98 skills
0 followers
7 hours ago last updated

▌
Memoire Design Tooling 2 · memi-design
Use when an OpenCode task involves UI design, interface craft, Figma, design systems, shadcn/ui, Tailwind, Atomic Design, research synthesis, component specs, design audits, or design-to-code generation.

0
installs
▌
Memoire Design Tooling 3 · memi-design bundle
Use when a Grok Build task involves UI design, interface understanding, Figma, design systems, shadcn/ui, Tailwind, UX audits, Atomic Design, component specs, MCP, or design-to-code generation.

0
installs
▌
Enforce Design CI · memi-design bundle
Use when a repository needs deterministic pull-request checks for new accessibility, design-token, component-structure, responsive, and UI-state regressions with file-level evidence.

0
installs
▌
Audit Frontend Design · memi-design bundle
Use when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.

0
installs
▌
Remember Design System · memi-design bundle
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.

0
installs
▌
Build Swiftui Interface · memi-design
Use when a coding agent must design, scaffold, implement, or verify an iOS or macOS SwiftUI interface with Apple-platform state, accessibility, availability, testing, and Xcode evidence.

0
installs
▌
Dialkit · memi-design bundle
Add or review DialKit controls when a React, Solid, Svelte, or Vue interface needs live tuning of animation, layout, color, typography, or component parameters.

0
installs
▌
Vue Gen · memi-design bundle
Vue 3 Composition API code generation — transforms Mémoire component specs into Vue SFCs with script setup, Tailwind styling, and composable patterns

0
installs
▌
Better UI · memi-design bundle
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.

0
installs
▌
Codex Ops · memi-design bundle
Codex and Claude operating workflow for Memoire - JSON-first commands, commit hygiene, review loops, memory capture, and safe autonomous repo operation

0
installs
▌
Figma Use · memi-design bundle
Foundational Figma canvas skill — structure, Auto Layout, variables, MCP tools, self-healing loop

0
installs
▌
Figma Sync · memi-design bundle
Figma sync workflow patterns — bidirectional design-code sync, conflict resolution, incremental updates, multi-file orchestration

0
installs
▌
Superpower · memi-design bundle
Orchestrate an explicit Mémoire canvas workflow across design inspection, planning, generation, and verification. Use only when the user requests Mémoire orchestration; do not use as a default session policy.

0
installs
▌
Figma Audit · memi-design bundle
Audit Figma file for design system consistency, accessibility, token adoption, Code Connect coverage

0
installs
▌
Flutter Gen · memi-design bundle
Flutter and Dart widget generation — transforms Mémoire component specs into Flutter widgets with Material 3, Riverpod state management, and responsive layouts

0
installs
▌
Linear Sync · memi-design bundle
Linear integration for Mémoire — sync design issues, component specs, and project tracking between Linear and the Mémoire registry

0
installs
▌
Mermaid Jam · memi-design bundle
Route Mermaid and markdown diagram source into the Mermaid Jam FigJam plugin for editable native FigJam output

0
installs
▌
Multi Agent · memi-design bundle
Orchestrate multiple Claude instances on Figma canvas with box widgets, coordinated handoffs, error recovery

0
installs
▌
Notion Sync · memi-design bundle
Notion integration for Mémoire — sync research insights, specs, and project context between Notion databases and the Mémoire registry

0
installs
▌
Apple Design · memi-design bundle
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.

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

0
installs
▌
Motion Video · memi-design bundle
Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines

0
installs
▌
Web Research · memi-design bundle
Conduct primary-source web research with claim-level evidence, citations, freshness checks, cross-source validation, and gap analysis. Use when design or product decisions depend on current external evidence.

0
installs
▌
Atomic Design · memi-design bundle
Atomic Design quick reference — levels, composition rules, tokens, naming

0
installs
▌
Better Colors · memi-design bundle
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.

0
installs
▌
Swift Testing · memi-design bundle
Build an Apple-platform test strategy with Swift Testing for unit and integration coverage, XCTest for UI automation, deterministic fixtures, and concise agent-readable results.

0
installs
▌
Content Design · memi-design bundle
Design clear, consistent product language for navigation, actions, forms, onboarding, empty states, errors, confirmations, permissions, and trust-sensitive moments. Use when words affect comprehension, action, recovery, or confidence.

0
installs
▌
Data Synthesis · memi-design bundle
Qualitative and quantitative data synthesis — affinity mapping, thematic analysis, statistical frameworks, insight triangulation, and research-to-spec pipelines

0
installs
▌
Design Extract · memi-design bundle
Extract a public website's design system when a task needs evidence about its colors, typography, spacing, radii, shadows, components, or Tailwind tokens.

0
installs
▌
Design Systems · memi-design bundle
Design system architecture and governance — token taxonomy, component APIs, versioning strategy, adoption metrics, multi-brand theming, and cross-platform consistency

0
installs
▌
Figma Ds Rules · memi-design bundle
Route generation of Figma-aware repository rules to Figma's current official MCP workflow without reproducing upstream instructions. Use when AGENTS.md, CLAUDE.md, or client rules must reflect verified Figma and codebase conventions.

0
installs
▌
Remotion Video · memi-design bundle
Current Remotion video production pack for React-based product videos, previews, and renderer handoff.

0
installs
▌
Survey Connect · memi-design bundle
Survey platform integration — import responses from Typeform, Google Forms, SurveyMonkey, Airtable, and CSV exports into Mémoire's research pipeline

0
installs
▌
Animation Craft · memi-design bundle
Motion design and micro-interaction craft — timing, easing, UI choreography, and links into the current Remotion/Hyperframes production packs.

0
installs
▌
Emil Design Eng · memi-design bundle
Apply Emil Kowalski's design-engineering guidance when polishing interface details, choosing motion, or reviewing whether a product feels responsive and intentional.

0
installs
▌
Figma Prototype · memi-design bundle
Build interactive Figma prototypes with flows, transitions, and user journey mapping

0
installs
▌
IOS App Intents · memi-design bundle
Design, implement, and verify App Intents, App Entities, App Shortcuts, widgets, Siri, Spotlight, and Apple Intelligence surfaces with stable identity and safe execution.

0
installs
▌
UX Tenets Traps · memi-design bundle
UX tenets and traps framework for code, Figma, screenshot, and Studio critique workflows.

0
installs
▌
Figma Plugin API · memi-design bundle
Route exact Figma Plugin API questions to current official typings and developer documentation without redistributing upstream reference material. Use when an implementation depends on verified node, variable, component, style, or editor API behavior.

0
installs
▌
React Native Gen · memi-design bundle
React Native code generation from Memoire specs — NativeWind styling, Expo-compatible, platform-specific patterns

0
installs
▌
Website To Video · memi-design bundle
Website-to-video capture pack for turning product pages, flows, and browser states into structured video scenes.

0
installs
▌
Competitive Intel · memi-design bundle
Competitive intelligence and market analysis — systematic frameworks for analyzing competitor products, design patterns, feature matrices, positioning maps, and UX benchmarking

0
installs
▌
Component Catalog · memi-design bundle
Select and classify interface components when planning a design system, mapping Figma to code, or checking component-library coverage.

0
installs
▌
Figma Create File · memi-design bundle
Route creation of a new Figma Design or FigJam file to Figma's current official MCP workflow without reproducing upstream instructions. Use when an authorized Figma integration must create a new file before another workflow begins.

0
installs
▌
Figma Web Capture · memi-design bundle
Figma web capture workflow - import live webpages or DOM elements into editable Figma layers with the public html-to-design capture.js bookmarklet

0
installs
▌
Hyperframes Video · memi-design bundle
Current Hyperframes pack for HTML-first motion videos, lintable frames, previews, and render command prep.

0
installs
▌
MCP Server Studio · memi-design bundle
Expose Memoire Studio context, tools, and artifacts to other agents through MCP.

0
installs
▌
Review Animations · memi-design bundle
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

0
installs
▌
Usability Testing · memi-design bundle
Usability testing frameworks — test planning, task scenarios, moderated and unmoderated protocols, analysis frameworks, and insight synthesis for Mémoire research pipeline

0
installs
▌
Figma Code Connect · memi-design bundle
Route a Figma Code Connect request to Figma's current official workflow and documentation without reproducing upstream instructions. Use when mapping published Figma components to code implementations requires the official Figma MCP integration.

0
installs
▌
Improve Animations · memi-design bundle
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.

0
installs
▌
Interaction Design · memi-design bundle
Design complete product workflows across states, inputs, feedback, permissions, interruptions, errors, undo, and recovery. Use when a feature needs behavioral structure beyond static screens; use visual craft skills only after the interaction model is coherent.

0
installs
▌
Interview Research · memi-design bundle
User interview and transcript analysis — parsing speaker-labeled transcripts, extracting pain points/goals/behaviors, sentiment analysis, and persona generation from qualitative data

0
installs
▌
Motion Performance · memi-design bundle
Motion performance pack for 60fps UI animation, reduced-motion fallbacks, render budget checks, and video export QA.

0
installs
▌
Multi Agent Kanban · memi-design bundle
Coordinate multiple local agents through a durable board with owner, state, and evidence fields.

0
installs
▌
Token Architecture · memi-design bundle
Design token architecture — multi-tier token systems, semantic naming, theme switching, CSS custom properties, Tailwind mapping, and Figma variable sync

0
installs
▌
Accessibility Audit · memi-design bundle
WCAG 2.2 compliance auditing — color contrast, keyboard nav, screen reader, focus management, touch targets, cognitive accessibility, motion sensitivity, forms, automated testing integration

0
installs
▌
Docker Environments · memi-design bundle
Docker-aware Mémoire operation — CI/CD headless pipelines, shared MCP server, agent worker containers, and Figma bridge port-forwarding for containerized setups

0
installs
▌
Hermes Agent Bridge · memi-design bundle
Run Hermes Agent from Memoire with CLI, skills, toolsets, worktree, and session recipes.

0
installs
▌
Cron Agent Workflows · memi-design bundle
Turn repeatable agent work into scheduled jobs with explicit outputs and safe permissions.

0
installs
▌
Design Sandbox Proof · memi-design bundle
Use design-sandbox as the public proof repo for memi, MCP, Agent Skills, and interface craft.

0
installs
▌
Figma Design Systems · memi-design bundle
Route Figma-specific component, variable, style, and library questions to Figma's current official design-system guidance without reproducing upstream material. Use as a reference when exact Figma behavior matters.

0
installs
▌
Interface Craft Gate · memi-design bundle
Make interface craft a required design-agent gate before and after UI changes.

0
installs
▌
Memoire Studio Macos · memi-design bundle
Connect the Tauri/Rust macOS Studio app to the CLI, MCP, receipts, and project artifacts.

0
installs
▌
Self Improving Agent · memi-design bundle
Closed-loop learning system — captures errors, corrections, and discoveries into structured logs, promotes recurring patterns to project memory, and extracts reusable skills

0
installs
▌
Swiftui Liquid Glass · memi-design bundle
Adopt or audit iOS 26+ SwiftUI Liquid Glass with native APIs, correct availability fallbacks, restrained hierarchy, accessibility, and measured rendering performance.

0
installs
▌
Agent Memory Profiles · memi-design bundle
Design durable user, project, persona, and task memory profiles for local agents.

0
installs
▌
Agent Skill Migration · memi-design bundle
Move skills, memories, context files, and agent rules between Memoire and peer agent ecosystems.

0
installs
▌
AI Interaction Design · memi-design bundle
Design trustworthy human-AI workflows with clear automation boundaries, provenance, uncertainty, editable outputs, consent, memory controls, latency states, evaluation, and recovery. Use when AI generates, recommends, acts, or remembers on a person's behalf.

0
installs
▌
Figma Generate Design · memi-design bundle
Create new Figma screens and pages using existing components, variables, and design system

0
installs
▌
Figma Library Builder · memi-design bundle
Route a Figma library build to Figma's current official MCP workflow and this repository's portable design-system skills without reproducing upstream instructions. Use when creating tokens, components, documentation, and code mappings in Figma.

0
installs
▌
Openclaw Agent Bridge · memi-design bundle
Connect Memoire to OpenClaw onboarding, agents, gateway health, MCP, and approval flows.

0
installs
▌
Swiftdata Persistence · memi-design bundle
Design and review SwiftData schemas, queries, migrations, isolation, CloudKit assumptions, offline behavior, and deterministic persistence tests.

0
installs
▌
Browser Research Agent · memi-design bundle
Compatibility workflow for browser-backed evidence capture. Deprecated: use web-research for primary-source research, citations, freshness, and gap analysis.

0
installs
▌
Figma Generate Library · memi-design bundle
Generate Figma component library from React/shadcn codebase with Code Connect parity

0
installs
▌
Figma Implement Design · memi-design bundle
Route Figma-to-code implementation to Figma's current official MCP workflow while preserving repository conventions and independent verification. Use when a supplied Figma selection must become production code.

0
installs
▌
Memoire Design Tooling · memi-design bundle
Set up and operate Mémoire's CLI, MCP server, agent kits, design preflight, UX audits, craft checks, tokens, and registry evidence. Use when a repository explicitly needs Mémoire tooling; use portable design skills when Mémoire is unavailable.

0
installs
▌
Memoire V2 Surface Map · memi-design bundle
Connect the memi v2 public surfaces before publishing, onboarding agents, or writing docs.

0
installs
▌
Agent Messaging Gateway · memi-design bundle
Design gateway-backed agent delivery through chat, email, and team messaging channels.

0
installs
▌
Dashboard From Research · memi-design bundle
Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards

0
installs
▌
Design System Reference · memi-design bundle
Compare real-world design-system patterns when specifying, auditing, or naming a component and current external references would improve the decision.

0
installs
▌
Xcode Build Reliability · memi-design bundle
Make Xcode builds agent-verifiable with deterministic scheme discovery, concise logs, explicit destinations, stable scripts, build-time evidence, and CI parity.

0
installs
▌
Apple Desktop Automation · memi-design bundle
Prepare macOS agents to work with Apple apps, local files, permissions, and desktop automation.

0
installs
▌
Creative Rendering Audit · memi-design bundle
Audit shaders, GPU-driven effects, dithering, particles, and creative rendering for visual intent, correctness, performance, accessibility, fallbacks, evidence quality, and source licensing.

0
installs
▌
Information Architecture · memi-design bundle
Organize product content, objects, navigation, search, filters, labels, and hierarchy around user mental models and retrieval tasks. Use when people cannot find, understand, or predict where information and actions belong.

0
installs
▌
Memoire MCP Agent Skills · memi-design bundle
Compatibility setup workflow for memi MCP and Agent Skills. Deprecated: use memoire-design-tooling for installation, preflight, audits, and agent-client configuration.

0
installs
▌
Model Router Diagnostics · memi-design bundle
Diagnose provider auth, model routing, quota windows, and fallback behavior before agent runs.

0
installs
▌
Swift Concurrency Safety · memi-design bundle
Design and review Swift 6 concurrency boundaries using structured tasks, actors, Sendable values, cancellation, and compiler-backed data-race safety.

0
installs
▌
Agent Session Checkpoints · memi-design bundle
Capture restartable agent sessions with checkpoints, rollback notes, and resume metadata.

0
installs
▌
Approval Sandbox Policies · memi-design bundle
Define approval, sandbox, filesystem, and command policy for local autonomous agents.

0
installs
▌
Gateway Ops Observability · memi-design bundle
Observe and debug local agent gateways, daemons, health probes, logs, and usage costs.

0
installs
▌
IOS Performance Debugging · memi-design bundle
Diagnose SwiftUI rendering, launch, responsiveness, concurrency, memory, energy, and simulator failures using reproducible traces and before-after evidence.

0
installs
▌
Secure Secrets For Agents · memi-design bundle
Handle agent credentials with env refs, redaction, least privilege, and non-leaking prompts.

0
installs
▌
Shader Design Engineering · memi-design bundle
Design, implement, and verify intentional real-time shader effects for WebGL2, WebGPU/WGSL, and SwiftUI/Metal, including dithering, color correctness, accessible fallbacks, profiling, and debugging.

0
installs
▌
Swiftui Design Engineering · memi-design bundle
Design, build, refactor, and review production SwiftUI interfaces with explicit state ownership, navigation, accessibility, design tokens, previews, and simulator verification.

0
installs
▌
Find Animation Opportunities · memi-design bundle
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.

0
installs
▌
Product Discovery And Framing · memi-design bundle
Frame product opportunities from user, business, technical, and market evidence into testable problem statements, priorities, risks, and success criteria. Use before solution design when the team is unsure what problem to solve or why it matters.

0
installs
▌
Design Measurement And Experimentation · memi-design bundle
Connect design decisions to measurable outcomes through metric trees, behavioral instrumentation, guardrails, experiment plans, and post-launch reviews. Use when a team must determine whether a design worked rather than whether it shipped.

0
installs

98 published skills