$npx -y skills add rshankras/claude-code-apple-skills --skill milestone-celebrationGenerates achievement celebration UI with confetti animations, badge unlocks, progress milestones, haptic feedback, and optional share-to-social. Use when user wants to celebrate achievements, show confetti, display milestone badges, or trigger rewards on key thresholds.
| 1 | # Milestone Celebration Generator |
| 2 | |
| 3 | Generate a production milestone celebration system with confetti particle animations via `CAEmitterLayer`, achievement badge views with locked/unlocked states, a celebration overlay with spring animations, haptic feedback, and optional shareable achievement cards — all triggered automatically when users hit key thresholds. |
| 4 | |
| 5 | ## When This Skill Activates |
| 6 | |
| 7 | Use this skill when the user: |
| 8 | - Asks to "add celebrations" or "celebrate achievements" |
| 9 | - Wants "confetti animation" or "particle effects for milestones" |
| 10 | - Mentions "achievement badges" or "badge unlock animation" |
| 11 | - Asks about "milestone rewards" or "progress milestones" |
| 12 | - Wants to "celebrate achievement" or "trigger celebration on threshold" |
| 13 | - Asks about "level-up animation" or "gamification celebrations" |
| 14 | |
| 15 | ## Pre-Generation Checks |
| 16 | |
| 17 | ### 1. Project Context Detection |
| 18 | - [ ] Check Swift version (requires Swift 5.9+) |
| 19 | - [ ] Check deployment target (iOS 17+ / macOS 14+ for `@Observable`, spring animations, `sensoryFeedback`) |
| 20 | - [ ] Check for `UIKit` availability (iOS — `CAEmitterLayer` for confetti, haptics) |
| 21 | - [ ] Identify source file locations |
| 22 | |
| 23 | ### 2. Conflict Detection |
| 24 | Search for existing celebration/animation code: |
| 25 | ``` |
| 26 | Glob: **/*Confetti*.swift, **/*Celebration*.swift, **/*Achievement*.swift, **/*Milestone*.swift, **/*Badge*.swift |
| 27 | Grep: "CAEmitterLayer" or "CAEmitterCell" or "UINotificationFeedbackGenerator" or "confetti" or "celebration" |
| 28 | ``` |
| 29 | |
| 30 | If existing celebration or gamification library found (e.g., custom confetti, third-party particle libraries): |
| 31 | - Ask if user wants to replace or integrate with it |
| 32 | - If keeping, advise on best practices instead of generating |
| 33 | |
| 34 | ### 3. Platform Detection |
| 35 | Determine if generating for iOS (UIKit-based confetti + haptics) or macOS (Core Animation confetti, no haptics) or both (cross-platform with feature gates). |
| 36 | |
| 37 | ## Configuration Questions |
| 38 | |
| 39 | Ask user via AskUserQuestion: |
| 40 | |
| 41 | 1. **Celebration type?** (multi-select) |
| 42 | - Confetti burst (full-screen particle animation) |
| 43 | - Badge unlock (icon reveal with glow animation) |
| 44 | - Level-up (progress ring fill + title transition) |
| 45 | - Custom (user defines their own celebration style) |
| 46 | |
| 47 | 2. **Haptic feedback?** |
| 48 | - Yes — success haptic on celebration trigger (recommended) |
| 49 | - No — silent celebrations only |
| 50 | |
| 51 | 3. **Shareable achievement card?** |
| 52 | - Yes — render achievement as image for social sharing via `ShareLink` |
| 53 | - No — in-app celebration only |
| 54 | |
| 55 | 4. **Sound effects?** |
| 56 | - Yes — play system sound or bundled audio on celebration |
| 57 | - No — visual only |
| 58 | |
| 59 | ## Generation Process |
| 60 | |
| 61 | ### Step 1: Read Templates |
| 62 | Read `templates.md` for production Swift code. |
| 63 | |
| 64 | ### Step 2: Create Core Files |
| 65 | Generate these files: |
| 66 | 1. `Milestone.swift` — Model with id, title, description, threshold, icon, unlock state. `Codable` + `Sendable`. |
| 67 | 2. `MilestoneTracker.swift` — `@Observable` class tracking progress toward milestones, checking thresholds, triggering celebrations. Persists unlock state via `UserDefaults` or file storage. |
| 68 | 3. `ConfettiView.swift` — `UIViewRepresentable` wrapping `CAEmitterLayer` for confetti particle animation. Configurable colors, duration, density. Respects Reduce Motion. |
| 69 | |
| 70 | ### Step 3: Create UI Files |
| 71 | 4. `CelebrationOverlay.swift` — Full-screen overlay combining confetti + badge reveal + congratulations message. Auto-dismisses after configurable duration. Uses `withAnimation(.spring)`. |
| 72 | 5. `MilestoneBadgeView.swift` — Individual badge view with locked/unlocked states, SF Symbol icon, progress ring for partial progress. |
| 73 | 6. `MilestoneCollectionView.swift` — Grid layout of all milestones showing locked/unlocked state with progress indicators. |
| 74 | |
| 75 | ### Step 4: Create Optional Files |
| 76 | Based on configuration: |
| 77 | - `HapticManager.swift` — If haptic feedback selected (thin wrapper around `UINotificationFeedbackGenerator` / `UIImpactFeedbackGenerator`) |
| 78 | - `ShareableMilestoneCard.swift` — If shareable selected (renders milestone as image via `ImageRenderer` + `ShareLink`) |
| 79 | |
| 80 | ### Step 5: Determine File Location |
| 81 | Check project structure: |
| 82 | - If `Sources/` exists -> `Sources/MilestoneCelebration/` |
| 83 | - If `App/` exists -> `App/MilestoneCelebration/` |
| 84 | - Otherwise -> `MilestoneCelebration/` |
| 85 | |
| 86 | ## Output Format |
| 87 | |
| 88 | After generation, provide: |
| 89 | |
| 90 | ### Files Created |
| 91 | ``` |
| 92 | MilestoneCelebration/ |
| 93 | ├── Milestone.swift # Model with threshold, icon, unlock state |
| 94 | ├── MilestoneTracker.swift # @Observable tracker with persistence |
| 95 | ├── ConfettiView.swift # CAEmitterLayer confetti animation |
| 96 | ├── CelebrationOverlay.swift # Full-screen celebr |