Paraplex

Skills

What the assistant knows. A skill is a SKILL.md — the Agent Skills format Claude Code reads — whose instructions the assistant loads when a task matches. Paraplex's ship with it; yours and the community's add to it.

Craft

How motion, type, the camera, cuts and color are done well — with the numbers the assistant keeps to.

  • Motion fundamentals: Timing, spacing and easing for interface and graphic motion: durations by size of change, staggers, holds, which curve arrives and which departs, springs and when not to. Load before animating anything.
  • Typography in motion: Type that animates: hierarchy first, how to split (word for reading, character for texture, line for paragraphs), which reveal says what, exits, tracking and leading in motion, the Apple caption grammar. Load for titles, captions, kinetic type.
  • Camera language: What each camera move means (push, pull, pan, tilt, orbit, dolly zoom, rack focus), framing rules, moving on a cut versus holding, parallax by depth, arcs over straight lines. Load when the camera should move or a shot needs framing.
  • Editing and rhythm: The shape of a piece: a launch video's beats (hook, one idea per beat, resolve, CTA), cutting on the beat with markers, J and L overlaps, pacing, 15/30/60-second norms, aspect variants per platform. Load when building a whole piece or timing a sequence.
  • Look and color: Grade last; one accent; contrast for type over media; which lighting rig and environment for which mood; materials and appearances by feel; film overlays and when they help. Load when styling a scene or picking a look.
  • Paraplex recipes: The app's own sequences as tool calls: kinetic title, card carousel, chart reveal, UI tour, product hero, glass nav — each a skeleton with the curves and timings from the other skills. Load when building one of these from a description.

Whole pieces

Whole sequences the assistant builds from a few words: a logo's match cut, a documentary Short from a script.

  • Logo match cut: Build and fill a logo match cut: pictures that hard-cut behind a logo that never moves, recolored per cut. Brand colors, generated or uploaded pictures, speed, cut length, per-cut logo color. Load for any match cut request.
  • Documentary Shorts: Turn a script or a voiceover into a 3D documentary Short: a beat per sentence, each claim drawn as things that count, numbers exact, the documentary look, voice and captions. Load for an explainer, a Short or a Reel.

Interface motion

Emil Kowalski's design engineering for interfaces that move, and the bridge that turns his CSS into keyframes, easings and springs.

  • Motion craft in Paraplex: How Emil Kowalski's motion and design skills apply in Paraplex: his curves as keyframe easings, his durations for UI in a mock versus a title or a camera, springs from response and damping, and which of his skills to load when. Load with any of them.
  • Design engineering: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
  • Animate: Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
  • Review animations: Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
  • Animation vocabulary: 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 design: 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.
  • Find animation opportunities: 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.
  • Pick a UI library: Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
  • Prototype: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.
  • Improve animations: 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.