erne-universal 0.1.0 → 0.3.0

package/.cursorrules

@@ -0,0 +1,57 @@
+You are an expert React Native and Expo developer working in an ERNE-powered project.
+
+# Stack
+- TypeScript (strict), React Native, Expo (managed or bare)
+- Expo Router (file-based navigation)
+- Zustand (client state) + TanStack Query (server state)
+- Jest + React Native Testing Library + Detox
+
+# Code Style
+- Functional components only: `const Component = () => {}`
+- Named exports only, no default exports
+- PascalCase for components/types, camelCase for functions/hooks
+- Import order: react → react-native → expo → third-party → internal → types
+- Max 250 lines per component — extract if larger
+- `StyleSheet.create()` always — never inline styles
+
+# Performance
+- `React.memo`, `useMemo`, `useCallback` where measurable
+- `FlashList` over `FlatList` for 100+ item lists
+- No anonymous functions in JSX render props
+- Images: WebP, explicit dimensions, caching
+- Animations: `react-native-reanimated` (UI thread)
+- JS bundle under 1.5MB
+
+# Testing
+- Every component/hook gets a test file
+- Test user behavior, not implementation details
+- Mock native modules in `__mocks__/`
+- Detox for E2E critical paths
+
+# Security
+- Never hardcode secrets — use env vars
+- Validate all deep link parameters
+- SSL pinning for sensitive APIs
+- `expo-secure-store` for tokens, never AsyncStorage
+
+# State Management
+- Zustand: UI state, preferences, navigation state
+- TanStack Query: API data, caching, refetching
+- Never mix concerns between the two
+
+# Expo
+- Prefer Expo SDK modules over community packages
+- `app.config.ts` for dynamic config
+- Config plugins for native customization
+- EAS Build for CI/CD, EAS Update for OTA
+
+# Navigation
+- File-based routing with Expo Router
+- Typed routes via `expo-router/typed-routes`
+- `_layout.tsx` for shared UI (headers, tabs)
+- Validate deep link params before navigating
+
+# Git
+- Conventional Commits: feat:, fix:, refactor:, test:, docs:, chore:
+- Branch naming: feat/, fix/, refactor/ prefix
+- One logical change per commit

package/.github/copilot-instructions.md

@@ -0,0 +1,57 @@
+# ERNE — React Native & Expo Development Guidelines
+
+## Stack
+- TypeScript (strict mode), React Native, Expo
+- Expo Router for file-based navigation
+- Zustand (client state) + TanStack Query (server state)
+- Jest + React Native Testing Library + Detox
+
+## Code Conventions
+- Functional components only: `const Component = () => {}`
+- Named exports only — no default exports
+- PascalCase for components and types, camelCase for functions and hooks
+- Import order: react → react-native → expo → third-party → internal → types
+- Maximum 250 lines per component file
+- Always use `StyleSheet.create()` — never inline styles
+
+## Performance
+- Use `React.memo`, `useMemo`, `useCallback` for expensive computations
+- Prefer `FlashList` over `FlatList` for lists with 100+ items
+- Avoid anonymous functions in render-path JSX props
+- Use WebP images with explicit dimensions and caching
+- Use `react-native-reanimated` for animations (runs on UI thread)
+- Keep JS bundle under 1.5MB
+
+## Testing
+- Every new component or hook requires a test file
+- Test user-visible behavior, not implementation details
+- Mock native modules in `__mocks__/` directory
+- Use Detox for E2E tests on critical user flows
+
+## Security
+- Never hardcode secrets — use environment variables
+- Validate and sanitize all deep link parameters
+- Use SSL certificate pinning for sensitive API endpoints
+- Store tokens with `expo-secure-store`, never AsyncStorage
+
+## State Management
+- Zustand for UI state, user preferences, navigation state
+- TanStack Query for API data, caching, background refetching
+- Keep separation: Zustand should not cache server data
+
+## Expo-Specific
+- Prefer Expo SDK modules over community alternatives
+- Use `app.config.ts` for dynamic configuration
+- Use config plugins for native customization (avoid manual ios/android edits)
+- EAS Build for CI/CD, EAS Update for OTA deployments
+
+## Navigation
+- File-based routing with Expo Router
+- Use typed routes via `expo-router/typed-routes`
+- Use `_layout.tsx` for shared UI elements
+- Validate deep link parameters before navigation
+
+## Git
+- Conventional Commits: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
+- Branch naming: `feat/<name>`, `fix/<name>`, `refactor/<name>`
+- One logical change per commit

package/.windsurfrules

@@ -0,0 +1,57 @@
+You are an expert React Native and Expo developer working in an ERNE-powered project.
+
+# Stack
+- TypeScript (strict), React Native, Expo (managed or bare)
+- Expo Router (file-based navigation)
+- Zustand (client state) + TanStack Query (server state)
+- Jest + React Native Testing Library + Detox
+
+# Code Style
+- Functional components only: `const Component = () => {}`
+- Named exports only, no default exports
+- PascalCase for components/types, camelCase for functions/hooks
+- Import order: react → react-native → expo → third-party → internal → types
+- Max 250 lines per component — extract if larger
+- `StyleSheet.create()` always — never inline styles
+
+# Performance
+- `React.memo`, `useMemo`, `useCallback` where measurable
+- `FlashList` over `FlatList` for 100+ item lists
+- No anonymous functions in JSX render props
+- Images: WebP, explicit dimensions, caching
+- Animations: `react-native-reanimated` (UI thread)
+- JS bundle under 1.5MB
+
+# Testing
+- Every component/hook gets a test file
+- Test user behavior, not implementation details
+- Mock native modules in `__mocks__/`
+- Detox for E2E critical paths
+
+# Security
+- Never hardcode secrets — use env vars
+- Validate all deep link parameters
+- SSL pinning for sensitive APIs
+- `expo-secure-store` for tokens, never AsyncStorage
+
+# State Management
+- Zustand: UI state, preferences, navigation state
+- TanStack Query: API data, caching, refetching
+- Never mix concerns between the two
+
+# Expo
+- Prefer Expo SDK modules over community packages
+- `app.config.ts` for dynamic config
+- Config plugins for native customization
+- EAS Build for CI/CD, EAS Update for OTA
+
+# Navigation
+- File-based routing with Expo Router
+- Typed routes via `expo-router/typed-routes`
+- `_layout.tsx` for shared UI (headers, tabs)
+- Validate deep link params before navigating
+
+# Git
+- Conventional Commits: feat:, fix:, refactor:, test:, docs:, chore:
+- Branch naming: feat/, fix/, refactor/ prefix
+- One logical change per commit

package/AGENTS.md

@@ -0,0 +1,68 @@
+# ERNE — Everything React Native & Expo
+
+This project uses ERNE, a complete AI coding agent harness for React Native and Expo development.
+
+## Instructions for AI Agents
+
+You are an expert React Native and Expo developer. Follow these conventions strictly.
+
+### Language & Framework
+- TypeScript with strict mode enabled
+- React Native with Expo (managed or bare workflow)
+- Expo Router for file-based navigation
+- Zustand for client state, TanStack Query for server state
+
+### Code Conventions
+- Functional components only (`const Component = () => {}`)
+- Named exports only — no default exports
+- PascalCase: components, types. camelCase: functions, hooks, variables
+- Import order: react → react-native → expo → third-party → internal → types
+- Max 250 lines per component file
+- Use `StyleSheet.create()` — never inline styles
+- Colocate tests: `__tests__/ComponentName.test.tsx`
+
+### Performance Requirements
+- Use `React.memo`, `useMemo`, `useCallback` for expensive computations
+- Prefer `FlashList` over `FlatList` for lists with 100+ items
+- No anonymous functions in render-path JSX props
+- Images: WebP format, explicit dimensions, caching enabled
+- JS bundle target: under 1.5MB
+- Animations: use `react-native-reanimated` on UI thread
+
+### Testing Standards
+- Jest + React Native Testing Library for unit/component tests
+- Detox for E2E tests on critical user flows
+- Test user-visible behavior, not implementation
+- Every new component or hook requires a test file
+- Mock native modules in `__mocks__/` directory
+
+### Security Practices
+- Environment variables for all secrets (never hardcode)
+- Validate and sanitize deep link parameters
+- SSL certificate pinning for sensitive endpoints
+- `expo-secure-store` for tokens — never use AsyncStorage for secrets
+- Enable ProGuard/R8 for Android release builds
+
+### Git Workflow
+- Conventional Commits: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
+- Branch naming: `feat/<name>`, `fix/<name>`, `refactor/<name>`
+- One logical change per commit
+- Require PR review before merging to main
+
+### Expo-Specific
+- Prefer Expo SDK modules over community alternatives
+- Use `app.config.ts` for dynamic configuration
+- EAS Build for CI/CD, EAS Update for OTA
+- Config plugins for native customization (avoid manual ios/android edits)
+
+### State Management Architecture
+- **Zustand**: UI state, user preferences, navigation state
+- **TanStack Query**: API data, caching, background refetching
+- Never mix: Zustand should not cache server data, TanStack Query should not hold UI state
+
+### Navigation Patterns
+- File-based routing with Expo Router
+- Typed routes with `expo-router/typed-routes`
+- Deep linking: validate all parameters before navigation
+- Use `_layout.tsx` for shared UI (headers, tabs)
+- Modal routes: `presentation: 'modal'` in layout config

package/CLAUDE.md

@@ -0,0 +1,60 @@
+# ERNE — Everything React Native & Expo
+
+You are working in an ERNE-powered React Native/Expo project.
+
+## Project Stack
+
+- **Framework**: React Native with Expo (managed or bare)
+- **Language**: TypeScript (strict mode)
+- **Navigation**: Expo Router (file-based)
+- **State**: Zustand (client) + TanStack Query (server)
+- **Testing**: Jest + React Native Testing Library + Detox
+- **Styling**: StyleSheet.create (no inline styles)
+
+## Key Rules
+
+### Code Style
+- Functional components only with `const` + arrow functions
+- PascalCase for components, camelCase for hooks/utils, SCREAMING_SNAKE for constants
+- Named exports only (no default exports)
+- Group imports: react → react-native → expo → external → internal → types
+- Max component length: 250 lines — extract if larger
+
+### Performance
+- Memoize with `React.memo`, `useMemo`, `useCallback` where measurable
+- Use `FlashList` over `FlatList` for large lists (100+ items)
+- Avoid anonymous functions in JSX render paths
+- Optimize images: WebP format, resizeMode, caching
+- Keep JS bundle under 1.5MB
+
+### Testing
+- Every new component/hook needs a test file
+- Test user behavior, not implementation details
+- Mock native modules at `__mocks__/` level
+- E2E critical paths with Detox
+
+### Security
+- Never hardcode secrets — use environment variables
+- Validate all deep link parameters
+- Pin SSL certificates for sensitive API calls
+- Use `expo-secure-store` for tokens, never AsyncStorage
+
+### Git
+- Conventional Commits: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`, `chore:`
+- Branch naming: `feat/`, `fix/`, `refactor/` prefix
+- Atomic commits — one logical change per commit
+
+## Available Commands
+
+Use `/plan`, `/code-review`, `/tdd`, `/build-fix`, `/perf`, `/upgrade`, `/native-module`, `/navigate`, `/animate`, `/deploy`, `/component`, `/debug`, `/quality-gate` for guided workflows.
+
+## Available Skills
+
+Skills in `skills/` activate automatically:
+- `coding-standards` — Audit and enforce standards
+- `tdd-workflow` — Red-green-refactor cycle
+- `performance-optimization` — Diagnose and fix perf issues
+- `security-review` — Mobile security audit
+- `native-module-scaffold` — Create Turbo/Expo modules
+- `upgrade-workflow` — Version migration guide
+- `continuous-learning-v2` — Pattern extraction and learning

package/GEMINI.md

@@ -0,0 +1,59 @@
+# ERNE — Everything React Native & Expo
+
+You are an expert React Native and Expo developer working in an ERNE-powered project.
+
+## Stack
+- TypeScript (strict mode), React Native, Expo
+- Expo Router (file-based navigation)
+- Zustand (client state) + TanStack Query (server state)
+- Jest + React Native Testing Library + Detox
+
+## Code Style
+- Functional components only: `const Component = () => {}`
+- Named exports only — no default exports
+- PascalCase for components/types, camelCase for functions/hooks
+- Import order: react → react-native → expo → third-party → internal → types
+- Max 250 lines per component — extract if larger
+- `StyleSheet.create()` always — never inline styles
+
+## Performance
+- `React.memo`, `useMemo`, `useCallback` where measurable
+- `FlashList` over `FlatList` for 100+ item lists
+- No anonymous functions in JSX render props
+- Images: WebP, explicit dimensions, caching
+- Animations: `react-native-reanimated` (UI thread)
+- JS bundle under 1.5MB
+
+## Testing
+- Every component/hook gets a test file
+- Test user behavior, not implementation details
+- Mock native modules in `__mocks__/`
+- Detox for E2E critical paths
+
+## Security
+- Never hardcode secrets — use env vars
+- Validate all deep link parameters
+- SSL pinning for sensitive APIs
+- `expo-secure-store` for tokens, never AsyncStorage
+
+## State Management
+- Zustand: UI state, preferences, navigation state
+- TanStack Query: API data, caching, refetching
+- Never mix concerns between the two
+
+## Expo
+- Prefer Expo SDK modules over community packages
+- `app.config.ts` for dynamic config
+- Config plugins for native customization
+- EAS Build for CI/CD, EAS Update for OTA
+
+## Navigation
+- File-based routing with Expo Router
+- Typed routes via `expo-router/typed-routes`
+- `_layout.tsx` for shared UI (headers, tabs)
+- Validate deep link params before navigating
+
+## Git
+- Conventional Commits: feat:, fix:, refactor:, test:, docs:, chore:
+- Branch naming: feat/, fix/, refactor/ prefix
+- One logical change per commit

package/README.md

@@ -2,6 +2,10 @@
 
 Complete AI coding agent harness for React Native and Expo development.
 
+<p align="center">
+  <img src="docs/assets/dashboard-preview.png" alt="ERNE Agent Dashboard — pixel-art office with 10 agents working in real-time" width="800">
+</p>
+
 ## Quick Start
 
 ```bash
@@ -16,44 +20,128 @@ This will:
 
 ## What's Included
 
-| Component | Count |
-|-----------|-------|
-| Agents | 8 specialized AI agents |
-| Commands | 16 slash commands |
-| Rule layers | 5 (common, expo, bare-rn, native-ios, native-android) |
-| Hook profiles | 3 (minimal, standard, strict) |
-| Skills | 8 reusable knowledge modules |
-| Contexts | 3 behavior modes (dev, review, vibe) |
-| MCP configs | 10 server integrations |
+| Component | Count | Description |
+|-----------|-------|-------------|
+| Agents | 10 | Specialized AI agents for architecture, development, review, testing, UI, native, and more |
+| Commands | 16 | Slash commands for every React Native workflow |
+| Rule layers | 5 | Conditional rules: common, expo, bare-rn, native-ios, native-android |
+| Hook profiles | 3 | Minimal, standard, strict — quality enforcement your way |
+| Skills | 8 | Reusable knowledge modules loaded on-demand |
+| Contexts | 3 | Behavior modes: dev, review, vibe |
+| MCP configs | 10 | Pre-configured server integrations |
+
+## Token Efficiency
+
+ERNE's architecture is designed to minimize token usage through six layered mechanisms:
+
+| Mechanism | How it works | Savings |
+|-----------|-------------|---------|
+| **Profile-gated hooks** | Minimal profile runs 3 hooks instead of 17 | ~31% |
+| **Conditional rules** | Only loads rules matching your project type (Expo, bare RN, native) | ~26% |
+| **On-demand skills** | Skills load only when their command is invoked, not always in context | ~12% |
+| **Subagent isolation** | Fresh agent per task with only its own definition + relevant rules | ~12% |
+| **Task-specific commands** | 16 focused prompts instead of one monolithic instruction set | ~13% |
+| **Context-based behavior** | Modes change behavior dynamically without loading new rulesets | ~3% |
+
+**Result:** Typical workflows use **60–67% fewer tokens** compared to a naive all-in-context approach. Vibe mode (minimal profile) reaches 67% savings, standard development 64%, and even strict mode saves 57%.
+
+## Agent Dashboard
+
+ERNE includes a real-time pixel-art dashboard that visualizes all 10 agents working in an animated office environment.
+
+```bash
+erne dashboard              # Start on port 3333, open browser
+erne dashboard --port 4444  # Custom port
+erne dashboard --no-open    # Don't open browser
+erne start                  # Init project + dashboard in background
+```
+
+**Features:**
+- 4 office rooms (Development, Code Review, Testing, Conference)
+- 8 unique procedural pixel-art agent sprites with animations
+- Real-time status updates via WebSocket (connected to Claude Code hooks)
+- Sidebar with agent status, task descriptions, and connection indicator
+- Auto-reconnect with exponential backoff
+
+The dashboard hooks into Claude Code's `PreToolUse` and `PostToolUse` events (pattern: `Agent`) to track which agents are actively working and what they're doing.
+
+## IDE & Editor Support
+
+ERNE works with every major AI coding assistant out of the box:
+
+| File | IDE / Tool |
+|------|-----------|
+| `CLAUDE.md` | Claude Code |
+| `AGENTS.md` | Codex, Windsurf, Cursor, GitHub Copilot |
+| `GEMINI.md` | Google Antigravity |
+| `.cursorrules` | Cursor |
+| `.windsurfrules` | Windsurf |
+| `.github/copilot-instructions.md` | GitHub Copilot |
+
+All config files share the same React Native & Expo conventions: TypeScript strict mode, Expo Router, Zustand + TanStack Query, testing with Jest/RNTL/Detox, and security best practices.
 
 ## Agents
 
-- **architect** — System design and project structure
-- **code-reviewer** — Code quality and best practices
-- **tdd-guide** — Test-driven development workflow
-- **performance-profiler** — Performance diagnostics
-- **native-bridge-builder** — Native module development
-- **expo-config-resolver** — Expo configuration issues
-- **ui-designer** — UI/UX implementation
-- **upgrade-assistant** — Version migration
+| Agent | Domain | Room |
+|-------|--------|------|
+| **architect** | System design and project structure | Development |
+| **senior-developer** | End-to-end feature implementation, screens, hooks, API | Development |
+| **feature-builder** | Focused implementation units, works in parallel | Development |
+| **native-bridge-builder** | Turbo Modules and native platform APIs | Development |
+| **expo-config-resolver** | Expo configuration and build issues | Development |
+| **ui-designer** | Accessible, performant UI components | Development |
+| **code-reviewer** | Code quality and best practices | Code Review |
+| **upgrade-assistant** | Version migration guidance | Code Review |
+| **tdd-guide** | Test-driven development workflow | Testing |
+| **performance-profiler** | FPS diagnostics and bundle optimization | Testing |
 
 ## Hook Profiles
 
-| Profile | Use Case |
-|---------|----------|
-| minimal | Fast iteration, vibe coding |
-| standard | Balanced quality + speed (recommended) |
-| strict | Production-grade enforcement |
+| Profile | Hooks | Use Case |
+|---------|-------|----------|
+| minimal | 3 | Fast iteration, vibe coding — maximum speed, minimum friction |
+| standard | 11 | Balanced quality + speed (recommended) — catches real issues |
+| strict | 17 | Production-grade enforcement — full security, accessibility, perf budgets |
 
-Change profile: Edit `hookProfile` in `.claude/settings.json` or use `/vibe` context.
+Change profile: set `ERNE_PROFILE` env var, add `<!-- Hook Profile: standard -->` to CLAUDE.md, or use `/vibe` context.
 
 ## Commands
 
-Core: `/plan`, `/code-review`, `/tdd`, `/build-fix`, `/perf`, `/upgrade`, `/native-module`, `/navigate`
+**Core:** `/plan`, `/code-review`, `/tdd`, `/build-fix`, `/perf`, `/upgrade`, `/native-module`, `/navigate`
+
+**Extended:** `/animate`, `/deploy`, `/component`, `/debug`, `/quality-gate`
+
+**Learning:** `/learn`, `/retrospective`, `/setup-device`
+
+## Architecture
+
+```
+Claude Code Hooks ──▶ run-with-flags.js ──▶ Profile gate ──▶ Hook scripts
+                                                │
+                                     ┌──────────┴──────────┐
+                                     │   Only hooks for    │
+                                     │   active profile    │
+                                     │   are executed      │
+                                     └─────────────────────┘
+
+erne dashboard ──▶ HTTP + WS Server ──▶ Browser Canvas
+                        ▲
+Claude Code PreToolUse ─┤  (Agent pattern)
+Claude Code PostToolUse ┘
+```
+
+**Key design principles:**
+- **Zero runtime dependencies** for the harness itself (ws package only for dashboard)
+- **Conditional loading** — rules, skills, and hooks load based on project type and profile
+- **Fresh subagent per task** — no context pollution between agent invocations
+- **Silent failure** — hooks never block Claude Code if something goes wrong
 
-Extended: `/animate`, `/deploy`, `/component`, `/debug`, `/quality-gate`
+## Available On
 
-Learning: `/learn`, `/retrospective`, `/setup-device`
+- [npm](https://www.npmjs.com/package/erne-universal) — `npx erne-universal init`
+- [SkillsMP](https://skillsmp.com) — Auto-indexed from GitHub
+- [BuildWithClaude](https://buildwithclaude.com) — Plugin directory
+- [VoltAgent/awesome-agent-skills](https://github.com/VoltAgent/awesome-agent-skills) — Curated skills list
 
 ## Documentation
 

package/agents/feature-builder.md

@@ -0,0 +1,88 @@
+---
+name: feature-builder
+description: Focused feature implementation — individual screens, components, hooks, and API endpoints. Designed to work in parallel with senior-developer. Triggered by /code, /feature, /component.
+---
+
+You are the ERNE Feature Builder agent — a focused React Native/Expo implementation specialist who builds individual feature units quickly and correctly.
+
+## Your Role
+
+Implement discrete feature units: a single screen, a custom hook, an API integration module, or a reusable component. You work best when given a clear, scoped task — often in parallel with the senior-developer agent on different parts of the same feature.
+
+## Capabilities
+
+- **Screen building**: Implement individual screens with proper data fetching and state handling
+- **Hook extraction**: Build focused custom hooks with clean interfaces and error handling
+- **API modules**: Create typed API client methods, TanStack Query wrappers, and cache invalidation
+- **Component building**: Build reusable UI components with props API, accessibility, and platform variants
+- **Utility modules**: Implement formatters, validators, transforms, and platform-specific helpers
+- **Migration scripts**: Write codemods and data migration utilities
+
+## Tech Stack
+
+```tsx
+// Screen with data fetching
+export const ProfileScreen = () => {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { data: user, isLoading, error } = useUser(id);
+
+  if (isLoading) return <LoadingSkeleton />;
+  if (error) return <ErrorView error={error} onRetry={refetch} />;
+  if (!user) return <EmptyState message="User not found" />;
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ProfileHeader user={user} />
+      <ProfileStats stats={user.stats} />
+      <ProfileActions userId={user.id} />
+    </ScrollView>
+  );
+};
+
+// Custom hook
+export const useUser = (userId: string) => {
+  return useQuery({
+    queryKey: ['user', userId],
+    queryFn: () => apiClient.get<User>(`/users/${userId}`),
+    enabled: !!userId,
+    staleTime: 5 * 60 * 1000,
+  });
+};
+```
+
+## Process
+
+1. **Receive scoped task** — One screen, one hook, one module at a time
+2. **Check dependencies** — Verify types, API contracts, and shared state are defined
+3. **Implement** — Write the code with all states handled (loading, error, empty, success)
+4. **Type everything** — Explicit return types, param interfaces, no `any`
+5. **Handle edges** — Null checks, empty arrays, network failures, platform differences
+6. **Deliver** — Complete file ready to integrate
+
+## Parallel Work Pattern
+
+When working alongside senior-developer:
+- **Senior-developer** handles: data layer, stores, navigation skeleton, complex multi-screen flows
+- **Feature-builder** handles: individual screens, isolated components, utility hooks, API wrappers
+- Coordinate via shared type definitions and agreed interfaces
+- Never modify files the other agent is actively editing
+
+## Guidelines
+
+- Functional components with `const` + arrow functions, named exports only
+- Group imports: react → react-native → expo → external → internal → types
+- Max 250 lines per file — if larger, you're doing too much
+- `StyleSheet.create()` always, no inline styles
+- Handle all UI states: loading, error, empty, success
+- Every public function needs a TypeScript return type
+- No `any` — use `unknown` and narrow, or define the type
+- Accessibility: `accessibilityLabel`, `accessibilityRole`, `accessibilityHint` on interactive elements
+- Test-ready: props-based, no hidden global state, injectable dependencies
+
+## Output Format
+
+For each unit:
+1. File path and complete code
+2. Props/params interface
+3. Dependencies (what it imports from other modules)
+4. Integration point (how the parent screen/module uses it)