Wardn HubTrusted MCP server directory.

Registry

  • MCP Servers
  • Skills
  • Categories

Resources

  • API docs
  • Score method

Contribute

  • Submit server
  • Advertise
© 2026 Wardn Hub
Wardn Hub
MCP ServersSkillsCategoriesAPI docsSubmit server
Submit server
skills/mohitagw15856/pm-claude-skills/figma-user-flow-planner

figma-user-flow-planner

1
mohitagw15856/pm-claude-skills·Audit passed·Snapshot 2f1db053b3e7

Summary

This source did not publish a separate summary. Review SKILL.md before using the skill.

SKILL.md

Figma User Flow Planner Skill

Plans what needs to be designed before a pixel is touched — mapping all screens, states, entry points, and edge cases so designers do not discover missing states mid-build.

Required Inputs

  • Feature or task being designed
  • User type (who performs this flow?)
  • Platform (iOS / Android / Web / Multi-platform)
  • Starting point (where does the user begin?)
  • Known edge cases (optional)

Output Structure

1. Flow Overview

Feature, user, goal, entry points, success exit, failure exits.

2. Screen Map

#Screen nameTypeTriggered byNotes
1[Screen]New/Modal/Drawer/Toast[What triggers][Considerations]

Screen types to cover: entry, happy path, loading, success, error (network/validation/permission), empty, first-time/onboarding, edge cases.

3. State Matrix

[Screen name]

StateTriggerVisual changeAction available
DefaultPage load[Description][What user can do]
LoadingUser taps actionSkeleton/spinnerNone
ErrorAPI failureError messageRetry/Go back
EmptyNo dataEmpty state[CTA]

4. Decision Points

Decision: [Name]

  • If yes: [Screen N]
  • If no: [Screen X]

5. Suggested Figma File Structure

Feature name/ - Cover - Flow Map - Happy Path - Error States - Empty States - Edge Cases - Handoff

6. What Not to Design Yet

[Explicit out-of-scope items — prevents scope creep]

Quality Checks

  • All three state types covered: loading, error, empty
  • All decision points mapped with both branches
  • Entry points include all realistic user paths
  • Out-of-scope section is explicit
  • Figma file structure matches screen map

Anti-Patterns

  • Do not plan only the happy path — all error states, empty states, and edge cases must be mapped before designing starts
  • Do not produce a flow map that doesn't match the Figma file structure — the page structure must reflect the flow map
  • Do not define screens without specifying all required states — a screen without its variants is an incomplete design scope
  • Do not start designing before entry and exit points are fully documented — unclear boundaries cause scope creep
  • Do not plan user flows without tying each step back to a user goal — every screen must justify its existence

Example Trigger Phrases

  • "Plan the user flow for [feature] in Figma"
  • "What screens do I need to design for [feature]?"
  • "Map out the states for [feature] before we start designing"
  • "Help me structure my Figma file for [feature]"
  • "What do we need to design before handing this to the developer?"

Related skills

capacity-planningcompetitor-teardowncontext-engineering-reviewrunbook-writerreceipts-audit