Flow Preview
Generates interactive Maui user-flow canvases using a bundled CLI, with linked states and persistent review checkboxes. Use when previewing, comparing, or reviewing a user journey across multiple UI states.
Install
npx skills add tanishqkancharla/flow-preview --skill flow-previewgit clone --depth 1 https://github.com/tanishqkancharla/flow-preview.git /tmp/flow-preview
mkdir -p ~/.claude/skills
cp -r /tmp/flow-preview/. ~/.claude/skills/flow-previewPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Flow preview Generate a temporary, self-contained preview using this skill's `scripts/generate.mjs`. Keep this entire skill folder together when moving it. The CLI uses only Node built-ins and works from any project's root, without Halo packages or workspace configuration. The canvas is a development tool, not production application state. ## Derive the story from the real UI - Read the production component, its consumers, and its state transitions. Map the user's entry point, actions, success, loading, validation, failure, retry, and permission branches that matter to the request. Do not invent screens to fill a grid. - Adapt the actual production component through props and local fixture callbacks. If it combines server calls with rendering, propose a small presentational extraction; do not maintain a second lookalike UI. - Keep fixtures and simulated requests in the temporary preview, not production conditionals. Thumbnails mount every state simultaneously: rendering them must not send requests, start real work, or mutate production data. Use deterministic values, not timestamps or random content. - Use the Maui skill, when available, for UI composition. Keep flow-specific copy and business data in the scenario/adapter, not the generic canvas.
Details
- Skill name
flow-preview- Repository
- tanishqkancharla/flow-preview
- License
- Apache-2.0
- Repo updated
- 27 October 2026
FAQ
What does the Flow Preview skill do?
Generates interactive Maui user-flow canvases using a bundled CLI, with linked states and persistent review checkboxes. Use when previewing, comparing, or reviewing a user journey across multiple UI states.
How do I install the Flow Preview skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add tanishqkancharla/flow-preview --skill flow-preview. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Flow Preview popular?
It lives in tanishqkancharla/flow-preview, which has 36 GitHub stars and 2 forks.
Related skills
Cardstock Diorama Myth Animation
31sadekxD/cardstock-diorama-myth
Produce a complete narrated MYTHIC SHORT FILM end-to-end on Unsora MCP in the layered cut-paper diorama style — stacked matte cardstock worlds, a strict three-colour palette, exposure that swings, paper wipes hiding every seam, landing on a face. Animation-movie storytelling, not an explainer: gods, monsters, heroes, folklore, origin myths and transformations, told in ten-second story beats with a mythic narrator, native paper foley, and one assembled MP4. Use whenever the user wants a myth, legend, fable, folktale or fairy-tale short, a cut-paper or papercraft animated story, "tell the story
SVG Creator
39upbrew-tech/svg-creator-skill
Create high-quality SVG graphics including icons, illustrations, logos, diagrams, infographics, patterns, animations, and abstract art. Use this skill whenever the user asks to create, draw, design, or generate any SVG image, vector graphic, icon, logo, badge, diagram, flowchart, infographic, pattern, or animated graphic. Also trigger when the user says "draw me", "make an SVG", "create a graphic", "design an icon", "vector illustration", or requests any visual output that would be best served as an SVG file. This skill covers both simple single-element graphics and complex multi-layered compo
Wiggle
34talknerdytome-labs/wiggle-claude-skill
Create animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.
Behavioral Design
34rastian/behavioral-design-skills
Applies behavioral psychology and behavioral economics to product and UX design. Use when a designer, PM, researcher, or design manager wants to diagnose why users aren't completing a flow, adopting a feature, or changing behavior; design nudges or behavior-change interventions; reduce friction or cognitive load; run a behavioral design workshop or sprint; audit a design for psychological effectiveness; or apply principles like loss aversion, social proof, choice architecture, habit formation, or implementation intentions. Also triggers for: onboarding drop-off, feature adoption, engagement de
CSS Protips
34PyModel/css-pro-tips
Use when writing, reviewing, refactoring, or modernizing CSS/Tailwind. Apply a policy-first approach: semantic tokens, explicit cascade order, static CSS, intrinsic component layouts, accessible state, measured performance, and progressive enhancement backed by current sources.
Social Cards
35DennisWei9898/social-cards-engine
品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題(idea / 文章 / 教學)變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定(brands/),接哪個 pack 出哪個風格,引擎不綁死品牌。觸發詞:做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.