AnimaEcho
UserThe design stack for Claude Code. Review, improve, animate, systematize, and ship interfaces. Cites a rule, fixes with a number.
Categories
Indexed Skills (20)
design-improve
Apply design surgery to an interface, or build a new one from intent. Use when asked to improve, polish, modernize, clean up, fix, elevate, or make something look professional or premium, when a design looks AI generated and needs the tells stripped, or when building a new page, dashboard, landing page, or component from scratch. Edits the code with exact values and reports every change. Works on React, Vue, Svelte, HTML and CSS, and Tailwind.
design-motion
Design and implement motion: interface animation, transitions, easing, springs, scroll effects, gestures, page transitions, micro interactions, and video. Use when asked to add animation, make something feel alive or premium or responsive, fix transitions that feel cheap or laggy or janky, build scroll experiences, animate a list or modal or menu, or produce a motion spec. Also the entry point for video work in Remotion, explainers, and motion graphics. Backed by 80 motion practices with real timing, easing, and spring values.
design-review
Audit an interface against a real approval bar and report what is wrong with cited practices and exact numbers. Use when asked to review a design, audit a UI, score an interface, explain why something looks off or amateur or AI generated, or check craft before shipping. Works from a screenshot, a live URL, a Figma frame, or React, Vue, Svelte, or HTML and CSS code. Finds and scores. Does not edit; hand fixes to design-improve.
design-ship
Pre ship design gate. Runs the final craft check across accessibility, contrast, responsive breakpoints, dark mode, every interactive and data state, motion, and performance, then reports a go or no go with blockers. Use when asked if something is ready to ship, for a final design check or QA pass, whether a UI holds up on mobile or in dark mode, or before a release or deploy.
design-system
Build, extract, or repair a design token layer and the rules around it. Use when asked to set up design tokens, create a design system, extract a system from an existing codebase or screenshot, make styles consistent across an app, define a type or spacing or color scale, add theming or dark mode, or when the same values are hardcoded in twenty places. Produces the token file, the migration, and a written system doc.
dstack
Router for the dstack design suite. Sends any design, interface, animation, motion, or video request to the right skill: review, improve, motion, system, or ship. Use when the ask is vague (make this look better, this feels off, add some animation), when you want the whole design stack applied in order, or when you type /dstack with no specific skill. Also answers which dstack skill fits this.
remotion-markup
Best practices for writing Remotion React Markup
remotion-saas
Building video apps with Remotion - framework, rendering and Player advice
animated-component-libraries
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.
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.
awwwards-animations
Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation that needs to be 60fps and award-worthy. Triggers on requests for smooth scroll, ScrollTrigger, magnetic effects, reveal animations, horizontal scroll, pin sections, stagger effects, useScroll, useTransform, integration with Three.js/WebGL, algorithmic art, mathematical art, generative art, fractals, L-systems, flow fields, strange attractors, sacred geometry, geometric puzzles, Dudeney dissections, tangram, tessellations, Penrose tiles, kinetic typography, glitch effects, text explosion, morphing text, circular text, brutalist design, minimalist animation, neo-brutalism, or design philosophy mixing. React-first approach with proper cleanup and hooks.
explainer-video-guide
Explainer video production guide: scripting, voiceover, visuals, and assembly. Covers script formulas, pacing rules, scene planning, and multi-tool pipelines. Use for: product demos, how-it-works videos, onboarding videos, social explainers. Triggers: explainer video, how to make explainer, product video, demo video, video production, video script, animated explainer, product demo video, tutorial video, onboarding video, walkthrough video, video pipeline
ffmpeg
Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.
motion-designer
Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning motion graphics, designing animations, or when asked to "create a video", "design motion graphics", "plan video content", or "spec out a video". Produces detailed scene-by-scene specifications with timing, audio, sound effects, and animation descriptions.
remotion-best-practices
Best practices for Remotion
mediabunny
Multimedia handling with the Mediabunny library
remotion-captions
Dealing with captions in Remotion
remotion-create
Creating a new Remotion video
remotion-interactivity
Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
remotion-render
Best practices for rendering videos
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.