Loading...
Loading...
Found 14 Skills
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Cast genjutsu on a UI - creative coding for motion, micro-interactions, and wow-factor. Scans the stack, proposes an interaction thesis, loads the right sub-skills, implements the illusion. Adapts to Web, Android (Compose), Apple (SwiftUI).
Expert in generative art, creative coding, and mathematical visualizations using p5.js and JavaScript.
Use when building creative browser demos with @chenglou/pretext — DOM-free text layout for ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.
Domain navigator for motion, animation, 3D, and generative media skills. Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie, shaders, generative art, video, and AI media generation.
p5.js sketches: gen art, shaders, interactive, 3D.
Make a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js. A camera moves through a lit scene, such as a rainy street at night with brand names as neon signs, then a big question or title lands. Use when someone wants a scroll-stopping opener, a film-style intro, "3D intro", "cinematic opening", "title sequence" or a hook for a video, reel or newsletter.
This skill should be used when the user asks to "make an animated illustration", "animate an illustration", "make a generative motion piece" / "动态平面", "turn AI-generated art into something that moves", "make a poetic or ambient motion piece / motion poem", "make a visual metaphor", or "combine AI-generated visuals with code-driven motion". Covers generating isolated illustration assets with AI, compositing them as sprites, frame-accurate deterministic rendering, and the craft of expressive, concept-driven motion. NOT for data charts (use chart-animation), pure text (use kinetic-typography), or 3D/particles (use webgl-animation).
Opt-in parody coding skill. Only use when the user explicitly says Ponyhead or invokes /ponyhead. Make small examples amusingly verbose while preserving correctness.
Make a 12–20 second high-energy motion-graphics promo for any product, rendered from code to MP4 with synthesised music. Fast beat-locked scene changes, kinetic typography, a shape that carries across every transition, a HUD frame. Use when someone wants a hype reel, teaser, launch sting or showreel-style promo for a product, app or brand.
Make a short Vox-style documentary explainer (30-60 seconds) entirely in code with Claude Code. Torn paper, halftone texture, bold condensed type, motion on twos. Use when someone says "make a Vox-style video", "explainer video about...", "why does X happen", or wants a documentary-style motion graphic for LinkedIn, Instagram or YouTube without After Effects or a video generator.
Create code-driven short videos centered on graphics, text, or interface animation (typically 5–60 seconds; music-only pieces can run up to about 2 minutes), delivering an MP4 and editable source code: product promo videos, motion showreels, UI animation demos, kinetic typography and beat-synced quote cards, logo reveals and intros, generative art loops, and era-retrospective shorts. A soundtrack is optional and can be synthesized in code or beat-synced to a user-provided track. Use this Skill when users want to make such shorts or motion pieces, e.g., “Make a 15-second motion video,” “Make a logo animation / intro,” “Make a product promo,” or “Make a video with code.” Not for talking-head or narrated long-form videos, webpages or interactive prototypes, realistic people or live-action footage, or editing existing footage.