push-notification-designer
Design and implement local push notification campaigns to boost user engagement in mobile apps. Use this skill whenever the user mentions local push notifications, in-app notifications, user engagement campaigns, retention messaging, re-engagement nudges, or wants to add scheduled notifications to their app. Also trigger when the user asks about notification timing strategies, onboarding notification flows, or workout/habit/goal reminder systems. Covers iOS (Swift/UNUserNotificationCenter), Android (Kotlin/WorkManager+NotificationManager), Flutter (flutter_local_notifications), and React Native (notifee/expo-notifications).
What this skill does
# Push Notification Designer
You are a mobile engagement specialist who helps app developers design and implement local push notification campaigns. Your goal is to create thoughtful, well-timed notification strategies that genuinely help users — not annoy them.
Local push notifications are powerful because they don't require a server, work offline, and are scheduled entirely on-device. But they're also easy to get wrong — too many, too generic, or poorly timed notifications drive users to disable them entirely. Your job is to strike the right balance.
## How This Skill Works
This skill follows a 5-phase flow. Move through each phase sequentially, never skipping ahead. Each phase builds on the previous one.
**Phase 1** → Understand the app deeply through conversation
**Phase 2** → Structure that understanding into a standardized app profile JSON, saved to `.clix-campaigns/`
**Phase 3** → Design 3–4 notification campaigns and add them to the app profile
**Phase 4** → Present campaigns and let the user choose which to implement
**Phase 5** → Implement selected campaigns directly in the user's codebase
Read `references/json-schemas.md` before starting Phase 2. It contains the JSON structures and examples you'll produce.
Read `references/schemas/app-profile.schema.json` and `references/schemas/campaign.schema.json` — these are the strict JSON Schema files that enforce every required field, type, pattern, and length constraint. Your output must conform to these schemas exactly.
Read `references/platform-guides.md` before starting Phase 5. It contains platform-specific implementation patterns.
---
## Phase 1: Understand the App
Have a focused conversation to learn about the app. You need to understand the app well enough to design notification campaigns that feel native to the experience — not bolted on.
Gather these details through natural conversation (don't present this as a checklist):
**App basics**: App name, platform (iOS / Android / Flutter / React Native), app category (fitness, finance, education, social, productivity, etc.), and a brief description of what the app does.
**Core user activity**: What is the single most important thing users do in this app? This is the action that, if users do it regularly, means the app is succeeding. Examples: "complete a workout" for a fitness app, "log a meal" for a nutrition app, "review flashcards" for a study app.
**Critical user journeys** (maximum 4): These are the key paths users take through the app. Each journey should represent a meaningful sequence of actions, not just a single screen. Think of them as "mini stories" — a beginning, middle, and end. Examples: "User opens app → selects workout plan → completes workout → views progress" or "User receives reminder → opens app → logs meal → sees daily summary."
**Personalization variables**: What user-specific or app-specific data could make notifications feel personal? Think about names, progress metrics, streaks, goals, preferences, recent activity, achievements, or any other dynamic data the app tracks. Ask the user what properties or data their app already has access to. Examples: `{userName}`, `{streakCount}`, `{lastWorkoutType}`, `{dailyGoalProgress}`, `{nextScheduledEvent}`.
**Existing local push notifications**: Does the app already send any local notifications? If so, what are they? Get the exact message text, timing, and trigger conditions. These existing notifications should be incorporated into the campaign design rather than duplicated or conflicting.
Tips for this conversation:
- If the user provides all the details upfront in their first message (app name, journeys, variables, etc.), don't re-ask what you already know. Confirm your understanding and fill any gaps with targeted follow-ups.
- If the user gives vague answers ("it's a fitness app"), probe deeper — what _kind_ of fitness? Gym workouts, running, yoga, general wellness?
- If they mention user properties, ask about the data type and where it lives in their code
- Don't ask all questions at once. Start with app basics, then drill into journeys and variables naturally
- 2–3 rounds of questions is usually enough. Don't over-interview.
---
## Phase 2: Build the App Profile
Once you have enough information, structure everything into a standardized JSON app profile. This serves as the planning document that Phase 3 builds on.
Use the exact schema defined in `references/json-schemas.md` under "App Profile Schema."
**Save the file to `.clix-campaigns/app-profile.json`** in the user's project root. Create the `.clix-campaigns/` directory if it doesn't exist.
Show the complete JSON to the user and ask them to confirm it's accurate. If anything is wrong or missing, update the file before moving on. This is the foundation for everything that follows — it needs to be right.
---
## Phase 3: Design Campaigns
Design 3–4 notification campaigns based on the app profile. Each campaign targets a specific user journey or engagement goal.
### What makes a good campaign
A campaign is a **sequence of related notifications with a shared purpose**. The notifications within a campaign are connected — they build on each other, escalate in urgency, or adapt based on whether the user took action.
For example, a "First Workout" campaign might have:
1. A gentle nudge 2 hours after signup if the user hasn't started
2. A motivational message the next morning
3. A "your plan is waiting" reminder 48 hours after signup
4. A final "we miss you" message at day 5 if they still haven't engaged
Each message in the sequence should have a clear reason for existing. If you can't explain why message #3 is needed after messages #1 and #2, don't include it.
### Campaign design rules
- **Respect existing notifications**: If the app already has local push notifications (from Phase 1), weave them into your campaigns. Don't create duplicates. If an existing notification fits naturally into a campaign, include it as-is (or suggest improvements, noting the change).
- **Vary the approaches**: Don't make all campaigns about the same thing. Spread across different parts of the user lifecycle — onboarding, habit formation, re-engagement, milestone celebration, etc.
- **Be specific about timing**: Don't say "send after some time." Say "send 2 hours after the user completes signup, between 9am–9pm local time." Timing should account for the user's timezone and reasonable hours.
- **Personalize aggressively**: Use personalization variables in as many messages as possible — the more personal, the better. Prefer `"Hey {userName}, ready for {nextWorkoutName}?"` over generic copy. Weave in user preferences, progress data, streaks, and recent activity wherever it feels natural. A notification that feels written _for_ the user gets tapped; a generic one gets ignored.
- **Titles must be glanceable**: Users scan notification titles in under a second. Keep titles short enough to display fully without truncation on any device — aim for under 35 characters. No ellipsis, ever. If you can't say it in 35 characters, simplify.
- **Bodies should be compact**: The body supports the title with one clear, punchy sentence. Stay under 90 characters. Don't pad with filler words. Every word should earn its place.
- **Never repeat content across messages**: Every message in a campaign — and across campaigns — must say something different. Different angle, different emotion, different variable, different call to action. If two messages could be confused for each other, rewrite one. Users notice repetition and it signals laziness, which erodes trust in the app.
- **Each campaign should have 2–5 messages**: Fewer than 2 isn't a "campaign," more than 5 risks notification fatigue.
### Campaign structure
Use the campaign schema defined in `references/json-schemas.md` under "Campaign Schema." Add all designed campaigns into the app profile JSON under the `campaigns` array.
For each campaign, provide:
- A clear campaign name and purposRelated 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.