Prototypes

ui-demo helps you record polished web app demo videos with Playwright, visible cursor movement, and natural pacing. Use the ui-demo skill for walkthroughs, onboarding clips, feature tours, and tutorial-style recordings. Follow the discover, rehearse, then record workflow for reliable results, especially for prototypes and fast-changing UIs.

frontend-slides helps you create animation-rich HTML presentations from scratch or by converting PowerPoint files. Use the frontend-slides skill for talks, pitch decks, workshops, internal demos, and frontend-slides for UI Design when you want visual exploration, zero-dependency browser output, and slides that fit one viewport.

algorithmic-art helps create original generative art in p5.js with a two-step workflow: write an algorithmic philosophy, then build runnable .html and .js outputs with seeded randomness, parameter controls, and an interactive viewer.

ux-designer is a structured UX design skill for research, accessibility, information architecture, interaction flows, wireframe guidance, and UX copy. It helps teams turn rough product ideas into clearer, criteria-based design decisions using AGENTS.md and focused rules files.

The prototype skill helps you build throwaway code that answers one concrete question before you commit to a real implementation. Use it to test logic, state transitions, data shape, or UI direction with a runnable prototype that matches the host repo’s conventions. It’s ideal when you need a quick prototype guide, not a final feature.

Use figma to pull design context, screenshots, variables, and assets from the Figma MCP server, then translate Figma nodes into implementation-ready UI decisions. This figma skill is ideal when you have a Figma URL or node ID and need accurate figma usage for design-to-code work, setup, or troubleshooting.

brandkit is a premium brand-kit image generation skill for branding work, including logo systems, identity decks, visual guidelines boards, and art-directed brand presentations. It is designed for cohesive, studio-style results across startups, developer tools, security, gaming, consumer apps, and luxury concepts. Use brandkit when you want a polished brand world instead of a generic AI moodboard.

shader-dev is a practical GLSL shader skill for ShaderToy-style real-time visuals. Use the shader-dev skill to build or debug ray marching, SDF scenes, lighting, particles, fluid motion, post-processing, and shader-dev for UI Design with less guesswork than a generic prompt.

Use the remotion skill to turn Stitch project screens into polished walkthrough videos with transitions, zooms, and text overlays. It includes install steps, example files, and a repeatable remotion guide for video editing and render-ready compositions.

pol-probe-advisor helps product managers choose the right Proof of Life (PoL) probe for a hypothesis, risk, and resource level. Use the pol-probe-advisor skill to avoid overbuilding and match the cheapest useful validation method to the real learning goal. Ideal for pol-probe-advisor for Product Management, with practical pol-probe-advisor guide and usage direction.

The storyboard skill turns a product idea into a six-frame narrative that moves from problem to solution. Use it for stakeholder alignment, concept reviews, demos, and storyboard for Prototypes when you need a fast, human-centered way to test whether an idea resonates.

pol-probe helps you define a Proof of Life probe to test a risky hypothesis cheaply before building real product. Use the pol-probe skill to reduce prototype theater, set harsh success criteria, choose the right probe type, and plan disposal after learning.

hyperframes-registry helps you install and wire reusable HyperFrames registry items with less guesswork. Use it to run hyperframes add, identify blocks vs. components, merge snippets, wire blocks into index.html, and follow hyperframes.json path mappings for design implementation and registry discovery.

gsap is a practical animation reference for HyperFrames compositions. It helps you choose between gsap.to(), from(), fromTo(), and gsap.timeline(), then apply the right vars, easing, stagger, transforms, and performance patterns. Use this gsap guide when you need implementation-ready motion for entrance animations, transitions, and reusable design effects.

excalidraw-diagram creates Excalidraw JSON diagrams that argue visually, not just display boxes and arrows. Use it for workflows, architecture, sequence flows, decision paths, and concept diagrams where structure, readability, and real relationships matter. It includes install guidance, render-aware checks, and a practical workflow for better diagramming.

infocard helps you create editorial-style information cards in Markdown by embedding HTML and CSS directly in the page. It is useful for summaries, topic snapshots, highlight panels, event cards, comparison blocks, and other UI Design-friendly content that should look intentionally designed. It is not for diagrams or data visualization; use a dedicated diagram or chart skill instead.

canvas creates JSON Canvas diagrams with free positioning and explicit x/y coordinates. Use it for mind maps, knowledge graphs, concept maps, planning boards, and other Diagramming workflows where spatial layout matters more than sequence. It is not the right choice for flows or data charts. Use the canvas skill when you need editable nodes, links, and structured layout.

imagegen-frontend-mobile is an image-direction skill for premium mobile app screens and multi-screen flows. It helps create app-native visuals for iOS, Android, and cross-platform concepts with clean hierarchy, readable text, controlled color, and subtle phone mockups. Use it for image generation, not code, websites, or desktop UI.

gpt-taste is a design-focused skill for creating polished UI pages with editorial art direction, spacing discipline, and GSAP motion. Use the gpt-taste skill for marketing pages, landing pages, and showcase sites when you want stronger layout variety, better typography control, and fewer generic frontend patterns. The guide includes install and usage notes for practical implementation.

The hand-drawn-diagrams skill turns natural-language prompts into hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. It validates output and can return an edit URL plus exportable images. Best for fast Diagramming when you want a sketch-style result, not polished vector art.

world-builder is a design-focused skill for creating and managing generative game zones in Dorothy’s Pokemon-style overworld. Use the world-builder skill to turn a theme, premise, or location idea into a playable map with mood, layout, terrain, NPC placement, and spatial logic for Design Implementation.

gif-sticker-maker turns photos into 4 animated GIF stickers in a Funko Pop / Pop Mart style using MiniMax Image Generation, MiniMax Video Generation, and ffmpeg. This gif-sticker-maker skill covers install prerequisites, prompt templates, captions, and the full image-to-GIF workflow.

figma-create-new-file creates a new blank Figma or FigJam file in drafts, with defaults for editor type and file name. This figma-create-new-file skill helps with design implementation, rapid prototyping, and starting a fresh canvas before use_figma. It also handles planKey resolution via whoami when needed.

figma-use is the required skill for safe `use_figma` calls in Figma Plugin API workflows. Use the figma-use skill to install and load it before writing, updating, inspecting, or structuring Figma files with JavaScript. It is especially useful for Design Implementation, component work, variables, auto layout, and programmatic file reading.