@shaykec/app-agent 1.0.9 → 1.0.11

package/.cursor/skills/ios-customizer/SKILL.md

@@ -100,7 +100,21 @@ iOS templates use a `Colors.swift` theme file:
 - Use semantic colors where possible (`Color.primary`, `Color.secondary`)
 - Apply corner radius and spacing tokens from the design brief
 
-### Step 4.5 — Generate App Launcher Icon
+### Step 4.5 — Visual Polish Application
+
+Apply the **Visual Polish Plan** from the customization manifest. This step is MANDATORY for every build — it makes apps feel handcrafted rather than template-like.
+
+1. **Shadows**: Apply `.cardShadow()` to every card, list item card, and elevated surface. Use `.elevatedShadow()` for FABs and floating buttons. If no `.cardShadow()` modifier exists, add `shadow(color:radius:x:y:)` directly using the manifest's shadow tokens.
+2. **Gradients**: Apply `LinearGradient` to hero sections (detail screen headers, banner areas) and primary CTA buttons per the manifest's gradient usage plan. Use `Color.appPrimary` → `Color.appSecondary` for primary gradient.
+3. **Press feedback**: Ensure all `Button` and tappable elements use `.scaleOnPress()` or `ButtonStyle` with scale animation (scale to 0.95 on press, spring return). For key interactions (favorite toggle, submit), add `UIImpactFeedbackGenerator(style: .light).impactOccurred()`.
+4. **Staggered animations**: Ensure all `ForEach` / `LazyVStack` list views apply `.staggeredAppear(index:)` to each item. This gives lists a lively cascading entrance.
+5. **Empty states**: Enhance empty state views — add a gradient circle background behind the icon (e.g., `Circle().fill(LinearGradient(...)).frame(width: 80, height: 80)` behind the SF Symbol), and add `.slideIn()` animation to the entire empty state composition.
+6. **Glass/blur**: Apply `.ultraThinMaterial` or `.regularMaterial` to sheet backgrounds and overlay views. Use `.background(.ultraThinMaterial)` on navigation bars where appropriate.
+7. **Haptic feedback**: Add `UIImpactFeedbackGenerator` calls to favorite toggles, pull-to-refresh completions, and primary action buttons.
+
+Verify visual hierarchy: hero elements (large images, gradients) stand out > section headers > cards (with shadows) > inline text.
+
+### Step 4.6 — Generate App Launcher Icon
 
 Generate a domain-specific app icon using the manifest's **App Launcher Icon** section:
 
@@ -229,26 +243,47 @@ If the customization manifest includes an **"Animation & Sensory Plan"** section
 3. **Apply the modifiers** using the imported module code:
 
 ```swift
-// MicroInteractions — press feedback
+// Built-in press feedback (always available)
 Button("Add to Cart") { ... }
     .scaleOnPress()
-    .hapticFeedback(.impact(.medium))
+    .hapticFeedback(.medium)
+
+// Built-in staggered list items (always available)
+ForEach(items.indices, id: \.self) { index in
+    ItemRow(item: items[index])
+        .staggeredAppear(index: index)
+}
+
+// Built-in shadow (always available)
+CardView(item: item)
+    .cardShadow()
 
-// ScrollEffects — parallax header
+// Built-in slide animation (always available)
+EmptyStateView()
+    .slideIn()
+
+// Built-in shimmer for loading placeholders (always available)
+RoundedRectangle(cornerRadius: 8)
+    .fill(Color(.systemGray5))
+    .frame(height: 60)
+    .shimmer()
+
+// Built-in pulse for live indicators (always available)
+Circle().fill(.red).frame(width: 8, height: 8)
+    .pulse()
+
+// Built-in heart bounce for favorites (always available)
+Image(systemName: isFavorite ? "heart.fill" : "heart")
+    .heartBounce(isActive: isFavorite)
+
+// ScrollEffects module — parallax header (if module integrated)
 ScrollView {
     ParallaxHeaderView(height: 280) {
         AsyncImage(url: item.imageURL)
     }
-    // content below
-}
-
-// AnimatedTransitions — staggered list items
-ForEach(items.indices, id: \.self) { index in
-    ItemRow(item: items[index])
-        .staggeredAppearance(index: index)
 }
 
-// CelebrationEffects — success overlay
+// CelebrationEffects module — success overlay (if module integrated)
 .celebrationOverlay(isPresented: $showCelebration, style: .confetti)
 ```
 

package/.cursor/skills/module-integrator/SKILL.md

@@ -9,7 +9,7 @@ Integrate selected shared modules into the app by reading their reference implem
 
 ## Context You Need
 
-- **Module selection report** — `output/{app-name}/reports/02b-module-selection.md` — lists which modules were selected
+- **Catalog analysis report** — `output/{app-name}/reports/02-catalog-analysis.md` — lists which template and modules were selected
 - **Customization manifest** — `output/{app-name}/reports/customization-manifest.md` — contains the module integration plan with placement decisions
 - **Platform** — `ios` or `android`
 - **App name and bundle ID** — for adapting imports and identifiers
@@ -19,7 +19,7 @@ Integrate selected shared modules into the app by reading their reference implem
 
 ### Step 1 — Read the Module Selection Report
 
-Read `output/{app-name}/reports/02b-module-selection.md` to get the list of selected modules. Read the "Module Integration Plan" section from the customization manifest to understand where each module connects.
+Read the "Module Selection" section from `output/{app-name}/reports/02-catalog-analysis.md` to get the list of selected modules. Read the "Module Integration Plan" section from the customization manifest to understand where each module connects.
 
 ### Step 2 — For Each Selected Module, Integrate It
 

package/.cursor/skills/output-validator/SKILL.md

@@ -101,7 +101,7 @@ Mark all animation issues as `[WARN]` — they affect quality but are not build-
 
 Verify that the reports directory has the expected files:
 - `01-prompt-validation.md` exists
-- `02-template-selection.md` exists
+- `02-catalog-analysis.md` exists
 - `03-design-brand.md` exists
 - `04-content-brief.md` exists
 - `05-customization.md` exists

package/.cursor/skills/react-native-customizer/SKILL.md

@@ -133,6 +133,20 @@ const lightColors = {
 };
 ```
 
+### Step 4.5 — Visual Polish Application
+
+Apply the **Visual Polish Plan** from the customization manifest. This step is MANDATORY — it makes apps feel handcrafted rather than template-like.
+
+1. **Shadows**: Apply shadow styles to every card and elevated surface. Use platform-aware styles: `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` (iOS) and `elevation` (Android). Create a `cardShadow` style object and spread it into card `StyleSheet` definitions.
+2. **Gradients**: Use `expo-linear-gradient` `LinearGradient` component for hero sections (detail screen headers, banner areas) and primary CTA buttons. Apply `colors={[colors.primary, colors.secondary]}` with `start/end` props for direction.
+3. **Press feedback**: Ensure all `TouchableOpacity` elements use `activeOpacity={0.85}` and add a scale animation on press using `Animated.spring()` (scale to 0.95, spring back). Wrap common buttons in a `ScaleButton` component.
+4. **Staggered animations**: Ensure all `FlatList` items use `useStaggeredAppear(index)` hook for animated entrance. Apply the returned `animatedStyle` to each item's `Animated.View` wrapper.
+5. **Empty states**: Enhance empty state components — add a gradient circle background behind the icon (using `LinearGradient` + `borderRadius: 40`), and add slide-in animation with `useSlideIn()`.
+6. **Blur/glass**: Use `expo-blur` `BlurView` for modal/sheet backgrounds where supported. Fall back to semi-transparent background.
+7. **Haptic feedback**: Use `expo-haptics` or React Native `Vibration` API on favorite toggles and primary actions.
+
+Verify visual hierarchy: hero elements > section headers > cards (with shadows) > inline text.
+
 ### Step 5 — Data Layer & Offline Infrastructure
 
 Templates include an **offline-first data layer**. Understand these components:
@@ -252,29 +266,45 @@ If the customization manifest includes an **"Animation & Sensory Plan"** section
 3. **Apply the modifiers** using the imported module hooks/components:
 
 ```typescript
-// MicroInteractions — press feedback
-import { useScaleOnPress, useStaggeredAppearance } from '../shared/MicroInteractions';
-import { useHapticEngine } from '../shared/HapticEngine';
+// Built-in hooks (always available in animation/useAnimatedList)
+import { useScaleOnPress, useStaggeredAppear, useSlideIn, cardShadowStyle, useShimmer, usePulse, useHeartBounce } from '../animation/useAnimatedList';
 
-const { animatedStyle, handlers } = useScaleOnPress();
-const haptic = useHapticEngine();
-
-<Animated.View style={animatedStyle} {...handlers}>
-  <TouchableOpacity onPress={() => { haptic.impact('medium'); doAction(); }}>
+// Press feedback
+const { style: pressStyle, onPressIn, onPressOut } = useScaleOnPress();
+<Animated.View style={pressStyle}>
+  <Pressable onPressIn={onPressIn} onPressOut={onPressOut} onPress={doAction}>
     <Text>Add to Cart</Text>
-  </TouchableOpacity>
+  </Pressable>
 </Animated.View>
 
-// ScrollEffects — parallax header
-import { ParallaxHeader } from '../shared/ScrollEffects';
+// Staggered list items
+const animStyle = useStaggeredAppear(index);
+<Animated.View style={animStyle}><ItemCard item={item} /></Animated.View>
 
-<ParallaxHeader height={280} imageSource={item.imageUrl}>
-  {/* content below */}
-</ParallaxHeader>
+// Card shadow
+<View style={[styles.card, cardShadowStyle()]}>{/* content */}</View>
 
-// CelebrationEffects — success overlay
-import { CelebrationOverlay } from '../shared/CelebrationEffects';
+// Slide-in animation
+const slideStyle = useSlideIn();
+<Animated.View style={slideStyle}><EmptyState /></Animated.View>
 
+// Shimmer for loading placeholders
+const shimmerStyle = useShimmer();
+<Animated.View style={[styles.placeholder, shimmerStyle]} />
+
+// Pulse for live indicators
+const pulseStyle = usePulse();
+<Animated.View style={[styles.dot, pulseStyle]} />
+
+// Heart bounce for favorite toggles
+const heartStyle = useHeartBounce(isFavorite);
+<Animated.View style={heartStyle}><HeartIcon /></Animated.View>
+
+// Modules (if integrated)
+import { ParallaxHeader } from '../shared/ScrollEffects';
+<ParallaxHeader height={280} imageSource={item.imageUrl} />
+
+import { CelebrationOverlay } from '../shared/CelebrationEffects';
 <CelebrationOverlay isActive={showCelebration} style="confetti" />
 ```
 

package/.cursor/skills/test-planner/SKILL.md

@@ -0,0 +1,199 @@
+---
+name: test-planner
+description: Analyzes app source code to generate a structured test plan before any simulator interaction. Reads Views, ViewModels, AppConfig, MockDataProvider, and TESTING_MANIFEST to produce a comprehensive test matrix with per-screen checklists, edge cases, and regression checks.
+---
+
+# Test Planner Skill
+
+Use this skill to analyze the app's source code and produce a structured test plan. This runs entirely offline — no simulator or device interaction needed.
+
+## When to Use
+
+- As Phase 1 of the `--deep-test` pipeline
+- Before any simulator is booted
+- When you need visibility into what will be tested before testing starts
+
+## Context You Need
+
+- **App directory** — path under `output/` (e.g., `output/pawspa-ios/`)
+- **Platform** — `ios`, `android`, or `react-native`
+- **App name** — display name (e.g., "PawSpa")
+- **Bundle ID** — e.g., `com.pawspa.app`
+
+## Instructions
+
+### Step 1 — Gather App Inventory
+
+Read the following files from the app directory to build a full picture of the app:
+
+1. **`TESTING_MANIFEST.md`** — all test IDs, screen inventory, element counts, navigation paths. This is the primary reference for what exists in the app.
+
+2. **`AppConfig`** — feature flags, enabled/disabled features, business rules, categories, content configuration. Look for:
+   - iOS: search for `AppConfig.swift` or `Configuration.swift`
+   - Android: search for `AppConfig.kt` or `Configuration.kt`
+   - React Native: search for `AppConfig.ts` or `config.ts`
+
+3. **`MockDataProvider`** — what data exists, how many items per collection, data structure, categories. Look for:
+   - iOS: `MockDataProvider.swift`
+   - Android: `MockDataProvider.kt`
+   - React Native: `MockDataProvider.ts`
+
+4. **`customization-manifest.md`** (if exists in `reports/`) — screen descriptions, expected behavior, feature toggles, domain content decisions.
+
+5. **`summary.json`** (if exists in `reports/`) — previous build/test results, template used, design brand.
+
+6. **`requirements.md` or `PRD.md`** (if exists in the app root) — user-provided requirements for business logic test cases.
+
+### Step 2 — Scan All Screens
+
+Read all View files to discover every screen in the app:
+
+- **iOS**: files matching `*View.swift` in the Views/ or Features/ directories
+- **Android**: files matching `*Screen.kt` in the ui/ or features/ directories
+- **React Native**: files matching `*Screen.tsx` or `*View.tsx` in the screens/ or components/ directories
+
+For each screen, extract:
+
+1. **Interactive elements** — buttons, toggles, text fields, pickers, sliders, list items, FABs, navigation bar items
+2. **Navigation targets** — where each button/link navigates to
+3. **Data dependencies** — what data from MockDataProvider this screen displays
+4. **Feature flags** — which AppConfig flags control visibility of elements on this screen
+5. **Accessibility identifiers** — cross-reference with TESTING_MANIFEST.md
+
+### Step 3 — Scan All ViewModels
+
+Read all ViewModel files to understand state and logic:
+
+- **iOS**: files matching `*ViewModel.swift`
+- **Android**: files matching `*ViewModel.kt`
+- **React Native**: files matching `*ViewModel.ts` or `use*.ts` (hooks)
+
+For each ViewModel, extract:
+
+1. **State transitions** — what actions trigger state changes (loading, error, empty, populated)
+2. **CRUD operations** — create, update, delete, toggle favorite, etc.
+3. **Filter/search logic** — how search queries filter data
+4. **Validation rules** — form validation, input constraints
+5. **Side effects** — what happens after actions (navigation, alerts, data refresh)
+
+### Step 4 — Build the Test Matrix
+
+Produce a structured test plan with the following sections:
+
+#### 4a — App Overview
+
+Summarize the app: name, platform, template used, number of screens, number of tabs, key features, total interactive elements estimated.
+
+#### 4b — Per-Screen Test Cases
+
+For **each screen**, create a checklist of test cases:
+
+```markdown
+### Screen: {ScreenName}
+**File:** {path to view file}
+**Elements:** {count} interactive elements
+**Data:** {data source from MockDataProvider}
+
+#### Rendering
+- [ ] Screen renders without crash
+- [ ] Correct title/header displayed
+- [ ] Expected number of items shown ({N} items from MockDataProvider)
+- [ ] All images/icons load correctly
+- [ ] No template leftover text visible
+
+#### Navigation
+- [ ] Can navigate TO this screen (from: {source})
+- [ ] Can navigate BACK from this screen
+- [ ] {specific navigation: e.g., "Tap item navigates to DetailView"}
+
+#### Interactions
+- [ ] {Button name}: tap triggers {expected action}
+- [ ] {Toggle name}: tap changes state from {A} to {B}
+- [ ] {Text field name}: can type and submit
+- [ ] {List item}: tap opens detail
+...
+
+#### State
+- [ ] {State transition: e.g., "Search filters items correctly"}
+- [ ] {State transition: e.g., "Toggle favorite persists"}
+```
+
+#### 4c — Edge Cases
+
+List edge cases to test across the app:
+
+- **Empty states** — what screens look like with no data
+- **Long text** — labels with very long content (truncation, wrapping)
+- **Rapid interactions** — tapping the same button multiple times quickly
+- **Deep navigation** — navigating 3+ levels deep and back
+- **Tab switching** — switching tabs preserves state
+- **Scroll behavior** — scrolling to the bottom of long lists
+- **Form validation** — submitting empty forms, invalid input
+
+#### 4d — Regression Checks
+
+- No template leftover text on any screen (check for: template name, "Lorem ipsum", "Item 1", "Product", generic placeholders)
+- All accessibility identifiers present (from TESTING_MANIFEST.md)
+- All images render (no broken image placeholders)
+- Navigation back works from every screen
+- All tabs are reachable and show correct content
+
+#### 4e — Requirements-Based Tests (if requirements.md/PRD.md exists)
+
+Parse the requirements document and create test cases for each stated requirement:
+
+```markdown
+### Requirement: {requirement description}
+- [ ] {test case derived from requirement}
+- [ ] {test case derived from requirement}
+```
+
+### Step 5 — Assign Priorities
+
+Mark each test case with a priority:
+
+- **P0 (Critical)** — app crashes, data loss, navigation broken
+- **P1 (High)** — features don't work, wrong data displayed
+- **P2 (Medium)** — visual issues, accessibility gaps, minor UX problems
+- **P3 (Low)** — cosmetic, nice-to-have improvements
+
+### Step 6 — Estimate Counts
+
+At the end of the test plan, add a summary:
+
+```markdown
+## Test Plan Summary
+- Total screens: {N}
+- Total test cases: {N}
+- P0 (Critical): {N}
+- P1 (High): {N}
+- P2 (Medium): {N}
+- P3 (Low): {N}
+- Estimated interactive elements: {N}
+```
+
+## Report Output
+
+Write the test plan to `output/{app-name}/reports/10-test-plan.md`.
+
+Update `summary.json` — read the existing file, add a step entry:
+
+```json
+{
+  "step": 10,
+  "name": "test-plan",
+  "result": "PASS",
+  "totalScreens": 0,
+  "totalTestCases": 0,
+  "priorities": { "P0": 0, "P1": 0, "P2": 0, "P3": 0 }
+}
+```
+
+## Important Rules
+
+- This is a **read-only** analysis phase — do NOT modify any source files
+- Do NOT boot any simulators or use ai-tester MCP tools
+- Read the actual source files, not just the TESTING_MANIFEST — the manifest may be incomplete
+- Every interactive element discovered in the source code should have at least one test case
+- If `requirements.md` or `PRD.md` exists, MUST include requirements-based test cases
+- The test plan should be detailed enough that another agent can execute it without reading the source code