produck-skills

Build a premium, fully-animated PRODUCT-DEMO / launch motion-graphics video from a written brief about your product — the "one seamless film" style: scene-by-scene motion graphics with camera moves, real UI mockups, and full sound design, rendered from HTML+CSS+GSAP to MP4 via HyperFrames. Use whenever someone wants to "make a product demo video", "launch video", "animated walkthrough", "hype/demo reel for <product>", an animated feature or flywheel story, or to add any of these set-pieces: a notification/feedback FLOOD of bubbles, real photos of people as circular avatars, a GitHub/changelog/release mock, a "context accumulates" web of connecting cards, a UI element that MOVES + recolors with the camera following it, a contributors wall, an explosion-into-logo endcard, count-up numbers, 3D panel fly-ins, or camera zoom/dolly transitions. ALSO covers full SOUND DESIGN — picking the right SFX for each animation and placing them (see docs/SOUND.md + the bundled sfx/ kit + templates/). The techniques come from a

Use when improving the visual taste, positioning, polish, trust, and conversion clarity of a website or product UI. Runs a category-first visual audit, applies a decisive design pass, and verifies the result with screenshots rather than subjective vibes.

Use when acting on real user feedback — you have a Produck feedback ticket or URL, or the user wants to fix something users complained about or build a feature users asked for. Pulls full feedback context through the Produck MCP and drives a feedback → aligned PRD → build loop. Triggers on "fix what users reported", a feedback ticket id, "use my produck feedback", or building from a feedback queue.

Use when turning a vague or messy user request into an aligned, agent-executable PRD. Converts raw requests into testable specs with scope, phases, acceptance criteria, and explicit do-not-do boundaries for coding agents. Triggers on planning a feature from a rough ask, writing a PRD/spec, or aligning on intent before code.