design-skills

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.

Design, implement, and verify App Intents, App Entities, App Shortcuts, widgets, Siri, Spotlight, and Apple Intelligence surfaces with stable identity and safe execution.

Diagnose SwiftUI rendering, launch, responsiveness, concurrency, memory, energy, and simulator failures using reproducible traces and before-after evidence.

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

Design and review Swift 6 concurrency boundaries using structured tasks, actors, Sendable values, cancellation, and compiler-backed data-race safety.

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.

Design and review SwiftData schemas, queries, migrations, isolation, CloudKit assumptions, offline behavior, and deterministic persistence tests.

Design, build, refactor, and review production SwiftUI interfaces with explicit state ownership, navigation, accessibility, design tokens, previews, and simulator verification.

Adopt or audit iOS 26+ SwiftUI Liquid Glass with native APIs, correct availability fallbacks, restrained hierarchy, accessibility, and measured rendering performance.

Make Xcode builds agent-verifiable with deterministic scheme discovery, concise logs, explicit destinations, stable scripts, build-time evidence, and CI parity.

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.

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.

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.

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.

Compatibility workflow for browser-backed evidence capture. Deprecated: use web-research for primary-source research, citations, freshness, and gap analysis.

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.

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.

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.

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.

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.