hooked-ux
Design habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment). Use when the user mentions "users arent coming back", "engagement loops", "habit formation", "push notifications", "variable rewards", "daily active users", "habit zone", or "user retention loops". Also trigger when designing notification strategies, building streaks or progress systems, or analyzing why users stop using a product after initial signup. Covers ethics evaluation and onboarding for habits. For friction reduction and B=MAP, see improve-retention. For viral sharing, see contagious.
What this skill does
# Hook Model Framework
Framework for building habit-forming products. Based on a fundamental truth: habits are not created—they are built through successive cycles through the Hook.
## Core Principle
**The Hook Model** = a four-phase process that connects the user's problem to your solution frequently enough to form a habit.
```
Trigger → Action → Variable Reward → Investment
↑ │
└──────────────────────────────────────┘
```
**Habit Zone:** Products enter the "habit zone" when used frequently enough and with enough perceived value. The goal is to move users from deliberate usage to automatic, habitual behavior.
## Scoring
**Goal: 10/10.** When reviewing or creating product engagement mechanics, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.
## The Four Phases
### 1. Trigger
**Core concept:** The actuator of behavior. What prompts the user to take action? Triggers come in two forms: external (environment-driven) and internal (emotion-driven). The ultimate goal is to move users from external triggers to internal triggers.
**Why it works:** Every habit starts with a cue. Without a trigger, there is no behavior. External triggers get users started, but internal triggers — emotions like boredom, loneliness, uncertainty, or fear of missing out — are what drive unprompted, habitual usage. When your product becomes the automatic response to an internal trigger, you have a habit.
**Key insights:**
- External triggers (push notifications, emails, buttons, ads, word of mouth) initiate behavior early on
- Internal triggers (emotions, routines, situations) are the ultimate goal — users prompt themselves
- The goal is to move users from external triggers to internal triggers over time
- Map your product to the specific negative emotion it resolves (boredom, loneliness, confusion, FOMO)
- Effective external triggers must be well-timed, actionable, and lead to the simplest possible next action
**Product applications:**
| Context | Application | Example |
|---------|-------------|---------|
| **Onboarding** | Use external triggers to establish first loop | Welcome email with one clear action to take |
| **Retention** | Map product to internal emotional trigger | Instagram resolves boredom; Google resolves confusion |
| **Re-engagement** | External triggers bridge gaps until habit forms | Push notification: "Your friend just posted a photo" |
| **Emotion mapping** | Identify which negative emotion your product addresses | Loneliness → Facebook; Uncertainty → Twitter/News apps |
| **Trigger audit** | Evaluate if users still need external prompts | If yes after 30 days, internal trigger hasn't formed |
**Copy patterns:**
- "You might be wondering about..." (hooks into uncertainty)
- "Don't miss what happened while you were away" (FOMO trigger)
- "Your friend just..." (social/external trigger bridging to internal)
- "Pick up where you left off" (routine trigger)
- Notification copy should name the emotion: "Curious what's new?"
**Ethical boundary:** Never exploit vulnerable emotional states (depression, addiction, grief) as triggers. Triggers should connect users to genuine value, not manufacture anxiety to drive opens.
See: [references/triggers.md](references/triggers.md) for detailed trigger design, emotion mapping, and external-to-internal transition strategies.
### 2. Action
**Core concept:** The simplest behavior done in anticipation of a reward. Guided by the Fogg Behavior Model: B = MAT (Behavior = Motivation + Ability + Trigger). All three must converge at the same moment for action to occur.
**Why it works:** Increasing motivation is hard and unreliable. Reducing friction (increasing ability) is easier and often more effective. The key insight is that making the action simpler is almost always a better strategy than trying to increase motivation. Every extra step, field, or decision is a point where users drop off.
**Key insights:**
- Fogg Behavior Model: Behavior = Motivation x Ability x Trigger — all three must be present simultaneously
- Six elements of simplicity (ability): time, money, physical effort, brain cycles, social deviance, non-routine
- Increasing ability (reducing friction) is almost always more effective than increasing motivation
- The action should be the simplest behavior in anticipation of the reward — not the full task
- Hick's Law: more choices = slower decisions; reduce options to increase action rate
**Product applications:**
| Context | Application | Example |
|---------|-------------|---------|
| **Signup flow** | Minimize fields and steps to reduce friction | One-click Google/Apple sign-in instead of form |
| **Core action** | Make the key behavior completable in seconds | Twitter: type 280 characters and post (vs. write a blog) |
| **Simplicity audit** | Evaluate each of the six ability factors | Can user complete core action in under 60 seconds? |
| **Progressive disclosure** | Ask for more only after initial reward | Duolingo: play first, create account later |
| **Friction removal** | Identify and eliminate unnecessary steps | Autocomplete, defaults, skip options, smart prefills |
**Copy patterns:**
- "Just one tap to..." (emphasizes simplicity)
- "Takes less than 60 seconds" (time simplicity)
- "No credit card required" (money/risk simplicity)
- "We've set up defaults for you" (brain cycle simplicity)
- Buttons should be verbs: "Post", "Save", "Share" — not "Submit" or "Continue"
**Ethical boundary:** Reducing friction should make genuinely valuable actions easier — not trick users into actions they'd regret. Dark patterns that hide costs or consequences behind simple actions are unethical.
See: [references/triggers.md](references/triggers.md) for how triggers connect to the action phase, and [references/product-applications.md](references/product-applications.md) for action design across product types.
### 3. Variable Reward
**Core concept:** The phase that keeps users coming back. The anticipation of reward — not the reward itself — creates dopamine. Critically, rewards must be variable (unpredictable) to maintain engagement. Predictable rewards lose their power over time.
**Why it works:** The brain's dopamine system responds most strongly to the anticipation of uncertain rewards, not to the rewards themselves. This is the slot machine effect: variable reinforcement schedules are far more engaging than fixed ones. Three types of variable rewards — tribe (social), hunt (resources), and self (mastery) — tap into fundamental human drives.
**Key insights:**
- Dopamine spikes during anticipation of uncertain reward, not upon receiving it
- Three types: Tribe (social validation), Hunt (search for resources/information), Self (personal mastery)
- Predictable rewards lose power; variability is what sustains engagement
- The "slot machine effect": uncertainty is what makes rewards compelling
- Autonomy is critical — users must feel in control; forced engagement backfires
- Finite variability (limited content) eventually becomes predictable; aim for infinite variability
**Product applications:**
| Context | Application | Example |
|---------|-------------|---------|
| **Social features (Tribe)** | Variable social validation from others | Instagram likes, Reddit upvotes — you never know how many |
| **Content feeds (Hunt)** | Unpredictable stream of resources/information | Infinite scroll with algorithmically varied content |
| **Gamification (Self)** | Personal accomplishment with variable difficulty | Duolingo streaks + surprise bonus challenges |
| **Notifications** | Variable content in each notification | "3 people liked your post" vs. "Sarah commented something surprising" |
| **Search/Discovery** | The hunt for the next great find | Pinterest: scroll to find the perfecRelated in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.