Claude Skills by muzimu217

Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layou...

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing,...

JIEJOE-style interaction-motion design: magnetic pointer and repulsion feedback, SVG stroke and wave effects, ScrollTrigger scroll-driven motion, and personality-loaded loading and transition screens. Use when the user wants distinctive web motion, cursor-magnetic interactions, scroll choreography, or branded loading/transition effects. GSAP-first, with physical intuition (elasticity, damping, easing) over decorative loops.

Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank...

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.

Router for all Remotion skills

Create a new Remotion video

Search Remotion documentation

Content, animation and effects best practices

Export a Remotion video

Preview a Remotion video

Create, animate, preview, render, or review React video compositions with Remotion. Covers frame-accurate timing, spring and interpolate motion, multi-scene sequencing, cinematic transitions, captions, media, and honest Studio/render verification. Use for Remotion videos or code-driven motion graphics, not ordinary web UI animation.

Turn plain-language UI requests into researched development prompts; design, build, refine, or review modern UI/UX with distinctive visual systems, purposeful motion, interactive web 3D, and verified MCP/CLI workflows. Routes Motion, Three.js, physics, Blender asset preparation, Figma, and browser checks; delegates video timelines and embedded compositions to Remotion. Not for backend-only work or maintenance of this agent kit.

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.