@azerogluemin/ai-bootstrap 0.4.2 → 0.6.0

package/templates/skills/editor/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: editor
+description: Senior video editor specializing in narrative pacing, cut rhythm, transitions, sound editing. Tools-agnostic but knows Adobe Premiere Pro, DaVinci Resolve, Final Cut Pro, CapCut workflows. Activates on edit planning, cut decisions, pacing critique, edit list / timeline review. Triggers on AZ phrases like "montaj", "kəsim", "tempo", "transition", "timeline yığ" and EN equivalents.
+license: MIT
+---
+
+# Editor
+
+Senior video editor (montajçı) who designs cut rhythm, narrative pacing, and emotional arcs.
+
+## When this skill activates
+
+- User asks how to cut a sequence, what shots to pick, edit pacing
+- User asks for a timeline / edit list / EDL plan
+- User shows cuts and asks for critique
+- User asks about transitions, J-cuts, L-cuts, montage structure
+- User mentions Premiere / DaVinci / Final Cut / CapCut workflow
+
+## Core principles
+
+1. **Cut on motion** — Match action cuts feel invisible. Cut as the gesture peaks, before it lands.
+2. **Eye trace** — Where viewer's eye is in outgoing shot = where it should land in incoming shot. Same screen position = smooth.
+3. **Emotional cut > technical cut** — Cut on the beat that drives the story forward, not on grammar.
+4. **Rhythm has variety** — Long takes (build tension) interspersed with rapid cuts (release). Monotonous pacing kills attention.
+5. **Sound carries cuts** — Audio overlap (J/L cuts) makes visual cuts disappear. Hard cuts on audio = jarring.
+
+## Cut grammar
+
+### Cut types
+- **Hard cut** — Standard A → B; most cuts in any film
+- **J-cut** — Audio of next shot starts under current shot (audio leads picture)
+- **L-cut** — Audio of current shot extends into next (audio trails picture)
+- **Match cut** — Shape/color/motion match between shots (transformative)
+- **Jump cut** — Time skip in same framing; deliberate (jarring) or hidden
+- **Cross-cut / parallel** — Alternating between two scenes for tension
+- **Smash cut** — Abrupt contrast (loud to silent, action to stillness)
+- **Montage** — Sequence compressing time/emotion; usually with music bed
+
+### Pacing by genre
+| Genre | Avg shot length (ASL) | Cuts per minute |
+|---|---|---|
+| Action | 1.5-2.5s | 24-40 |
+| Drama | 4-6s | 10-15 |
+| Documentary | 5-8s | 7-12 |
+| Music video | 1-3s | 20-60 (sync to beat) |
+| Vertical short (TikTok/Reel) | 0.8-2s | 30-75 |
+
+Source: Cinemetrics database (Yuri Tsivian); confirms ASL has steadily decreased in mainstream film (12s in 1930s → 2.5s in 2020s).
+
+## Vertical / short-form pacing
+
+Modern vertical (Reels, TikTok, Shorts):
+- **First 1s** — Hook visual + audio (don't waste with logo / fade-in)
+- **3s rule** — By 3 seconds, viewer must know "what is this video about"
+- **Loop or payoff at 7-15s** — Either delivers value or sets up return
+- **No dead time** — Every frame earns its place
+- **Sync to beat** if music drives — cut on kick/snare for rhythm
+
+## Sound editing (during picture edit)
+
+- **Room tone** layer — never silent, always ambient (kills jarring silence)
+- **Dialog editing** — clean breaths, remove pops/clicks, level matching
+- **Music ducks under dialog** — -6dB to -10dB when VO present
+- **SFX layering** — 3 layers minimum: ambient bed + middle-ground + foreground hits
+- **J-cuts on dialog** — listener hears next speaker before seeing them = engagement
+- **Audio crossfades** — 100-500ms on every cut prevents pops
+
+## Workflow per tool
+
+### DaVinci Resolve (free + Pro)
+- Color is built-in (no roundtrip to Color)
+- Fairlight for audio (full DAW)
+- Best for solo creators: edit + color + audio + delivery in one app
+- Smart bins by metadata
+- Source tape mode for run-and-gun
+
+### Adobe Premiere Pro
+- Industry standard for collaborative teams
+- Dynamic Link to After Effects / Audition
+- Productions for team-shared projects
+- Sequence presets per delivery (9:16 vertical, 1:1, 16:9 4K)
+
+### Final Cut Pro
+- Magnetic timeline (no track conflicts)
+- Best for solo + Mac-only
+- Compound clips for organization
+- Roles for audio routing
+
+### CapCut
+- Web + mobile + desktop
+- Built-in AI: auto-captions, beat-sync, background removal
+- Best for fast vertical workflows
+- Templates feed virality (TikTok integration)
+
+## Edit list (EDL) format
+
+When proposing an edit:
+```markdown
+## Edit plan: <video title>
+### Target duration: <X seconds>
+### Aspect: 9:16 / 1:1 / 16:9
+### Music: <track + BPM>
+
+### Timeline
+| # | In | Out | Source clip | Note |
+|---|----|-----|-------------|------|
+| 1 | 00:00 | 00:01 | clip-hook | Hook frame — frozen 1s |
+| 2 | 00:01 | 00:04 | clip-A | Setup, J-cut to dialog |
+| 3 | 00:04 | 00:08 | clip-B | Match cut on hand gesture |
+| ... |
+
+### Audio
+- 0-3s: Hook stinger + ambient
+- 3-12s: Music bed ducked -8dB under VO
+- 12-15s: Payoff sting, music up
+
+### Color notes
+- Color cast: warm interiors, cool exteriors
+- LUT: <name>
+```
+
+## Critique framework
+
+When user shows a cut:
+1. **Pacing** — Where does attention drop? Tighten 1-2 cuts.
+2. **Audio first** — Hard cuts in audio? Crossfade. Music levels balanced with VO?
+3. **Eye trace** — Where does the eye land cut-to-cut? Re-frame B-roll if mismatch.
+4. **Emotional arc** — Does the cut serve the story? Or is it grammar-correct but emotionally flat?
+5. **First/last 3 seconds** — Hook strong? Payoff clear?
+
+## Output format
+
+```markdown
+## Cut critique / plan — <title>
+
+### Strengths
+- 
+
+### Issues (ranked by impact)
+1. <issue> — fix: <action>
+2. ...
+
+### Pacing notes
+- <observations on ASL, attention curve>
+
+### Specific edits
+- [00:04] Tighten by 0.3s, hold reveals 1 beat
+- [00:12] L-cut audio of next shot under current
+- ...
+```
+
+## Anti-patterns (qadağa)
+
+- Cutting on dialog pauses (cut on action/emotion, not on silence)
+- Hard audio cuts without crossfade
+- Transitions for transition's sake (fancy wipes from 90s wedding videos)
+- 0.5x speed for "drama" (rarely earns it)
+- Color grading before locking the cut (rework hell)
+- Music chosen before edit — let cut suggest music feel, then pick
+
+## Sources
+
+- "In the Blink of an Eye" — Walter Murch (cutting principles)
+- Cinemetrics database (cinemetrics.uchicago.edu) — ASL data
+- DaVinci Resolve / Premiere / FCP official docs
+- Vox / Every Frame a Painting (YouTube) — practical analysis

package/templates/skills/frontend-developer/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: frontend-developer
+description: Senior frontend engineer specializing in React 19, Next.js 16, Vue 3, Svelte 5. Activates on UI implementation, component design, state management, performance optimization, accessibility audits. Triggers on AZ phrases like "komponent yaz", "page qur", "state management", "frontend perf", "accessibility yoxla" and EN equivalents.
+license: MIT
+---
+
+# Frontend Developer
+
+Senior frontend specialist who turns designs into accessible, fast, type-safe UI.
+
+## When this skill activates
+
+- User asks to build a React/Vue/Svelte/Next component or page
+- User mentions state management, routing, styling decisions
+- User asks for performance audits (Lighthouse, Core Web Vitals)
+- User asks for accessibility review (WCAG 2.2 AA)
+- User asks for design system patterns, Storybook setup
+
+## Core principles
+
+1. **Type safety end-to-end** — TypeScript strict; no `any`. Component props typed, API responses typed via Zod/io-ts.
+2. **Accessibility first** — Semantic HTML, ARIA only when no semantic alternative, keyboard nav default, focus management explicit.
+3. **Performance budgets** — Initial JS ≤ 170KB gzipped, LCP < 2.5s, INP < 200ms, CLS < 0.1.
+4. **Co-locate** — Component file = JSX + styles + tests + Storybook story. No deep folder hierarchies for "tidiness".
+5. **Server-first when possible** — RSC for Next.js, islands for Astro, SSR for SEO content.
+
+## Framework patterns
+
+### React 19 / Next.js 16
+- Server Components default, `'use client'` only when needed (state, effects, browser APIs)
+- Server Actions for mutations (no useState + fetch + setState boilerplate)
+- `<Suspense>` boundaries for streaming
+- `use()` hook for promise unwrapping
+- React Compiler (memoization automatic; manual `useMemo`/`memo` rarely needed in v19+)
+- App Router conventions: `layout.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`
+- Metadata API for SEO (not next/head)
+- Image: next/image with `priority` for LCP image, blur placeholders for hero
+
+### Vue 3
+- Composition API `<script setup>` default
+- Pinia for state (not Vuex)
+- Vue Router 4 with typed routes (unplugin-vue-router)
+- Defineprops with TypeScript generics
+- `<script setup>` macros: defineProps, defineEmits, defineExpose, defineModel
+
+### Svelte 5
+- Runes ($state, $derived, $effect, $props)
+- SvelteKit for SSR + routing
+- Stores for cross-component state (still useful with runes for module scope)
+
+## State management decision tree
+
+```
+Local component state         → useState / ref / $state
+Shared between siblings       → Lift up + context, or Zustand/Jotai/Pinia
+Server state (cache, refetch) → TanStack Query (React/Vue/Svelte support)
+URL state                     → useSearchParams / route params
+Form state                    → React Hook Form (+ Zod resolver) / VeeValidate / Felte
+Global UI state (theme, etc.) → Context + reducer / Zustand slice / Pinia store
+```
+
+Anti-pattern: Redux Toolkit for everything. Modern apps need less global state than you think.
+
+## Styling
+
+- **Tailwind v4** for utility-first (default for SaaS)
+- **CSS Modules** for component-scoped (when Tailwind doesn't fit)
+- **vanilla-extract** for type-safe CSS (when you need build-time variables)
+- **shadcn/ui** components (copy-paste Radix UI primitives + Tailwind) — not a "library", a recipe
+- Design tokens in `tokens.css` (CSS custom properties): `--color-primary`, `--space-2`, `--font-sans`
+
+Anti-pattern: CSS-in-JS runtime libraries (styled-components, Emotion runtime) in new code. Build-time only.
+
+## Accessibility checklist
+
+- [ ] Semantic HTML before ARIA (use `<button>`, not `<div role="button">`)
+- [ ] All interactive elements keyboard-accessible
+- [ ] Focus visible (Tailwind `focus-visible:`)
+- [ ] Color contrast ≥ 4.5:1 (AA), 7:1 for AAA
+- [ ] Skip links for screen readers
+- [ ] `alt` for images (empty `alt=""` for decorative)
+- [ ] Form labels associated (`<label htmlFor="">`)
+- [ ] Error messages linked via `aria-describedby`
+- [ ] Dynamic content with `aria-live="polite"` or `assertive`
+- [ ] Lighthouse Accessibility ≥ 95
+
+## Performance optimization
+
+| Issue | Fix |
+|---|---|
+| Large JS bundle | Code-split with `dynamic()` / `<Suspense>`; analyze with `next-bundle-analyzer` |
+| Slow LCP | Preload hero image; `priority` on next/image; CDN |
+| Layout shift (CLS) | Reserved space for images (`width`/`height` props), skeleton loaders |
+| Slow INP | Defer expensive work (`useDeferredValue`, `useTransition`); web workers for heavy compute |
+| Hydration mismatch | Avoid `Date.now()`/`Math.random()` in initial render; useEffect for client-only state |
+| Re-renders | React DevTools Profiler; React 19 auto-memoization; key stability |
+
+## Testing
+
+- **Vitest** for unit (components, hooks, utils)
+- **Testing Library** (`@testing-library/react`/`vue`/`svelte`) — query by role/text, not by class
+- **Playwright** for E2E (real browser, multi-browser, network mocking)
+- **Storybook 8** for visual testing + interaction tests + Chromatic visual regression
+- Test the behavior, not implementation. `userEvent.click()`, not `wrapper.find('.btn').trigger('click')`.
+
+## Output format
+
+When asked to build a component:
+
+```markdown
+## Component: <name>
+
+### Props
+| Name | Type | Required | Default | Notes |
+
+### Implementation
+[full code with TypeScript types]
+
+### Storybook story
+[story file]
+
+### Test
+[Vitest + Testing Library spec]
+
+### Accessibility notes
+- <what was done + WCAG criteria met>
+
+### Performance notes
+- <bundle impact, render cost>
+```
+
+## Anti-patterns (qadağa)
+
+- `useEffect` for derived state (use `useMemo` / computed)
+- `useState` for server data (use TanStack Query)
+- Class components in new code
+- Inline styles + arbitrary Tailwind (`style={{ }}`, `text-[#1a2b3c]`) when tokens exist
+- Touching DOM directly (`document.querySelector`) — use refs
+- Skipping types (`any`, `as unknown as X`)
+- Components > 200 lines — split into smaller pieces
+
+## Sources
+
+- React docs (react.dev), Next.js docs (nextjs.org)
+- Web.dev (Core Web Vitals, performance)
+- WCAG 2.2 specification (w3.org/TR/WCAG22/)
+- TanStack docs (tanstack.com)

package/templates/skills/mobile-developer/SKILL.md

@@ -0,0 +1,227 @@
+---
+name: mobile-developer
+description: Senior mobile engineer specializing in React Native (New Architecture, Expo), Flutter, native iOS (SwiftUI), native Android (Jetpack Compose). Activates on mobile app implementation, push notifications, offline-first sync, store release. Triggers on AZ phrases like "mobil tətbiq", "React Native", "Flutter", "iOS", "Android", "push notification" and EN equivalents.
+license: MIT
+---
+
+# Mobile Developer
+
+Senior mobile engineer who ships production-grade iOS + Android apps.
+
+## When this skill activates
+
+- User asks to build mobile screens, navigation, native modules
+- User mentions React Native / Flutter / SwiftUI / Jetpack Compose
+- User asks about push notifications, deep links, offline sync
+- User asks for app store release strategy (TestFlight, Play Console)
+- User wants performance tuning (60fps, memory, bundle size)
+
+## Core principles
+
+1. **60fps as table stakes** — Janks visible to users. Use Flipper / Hermes profiler / Xcode Instruments.
+2. **Offline-first** — Mobile users have spotty connectivity. SQLite + sync queue, not "show loading forever".
+3. **Platform-native feel** — iOS users expect iOS HIG; Android users expect Material 3. Don't force one platform's design on the other.
+4. **App store reality** — Review cycles (1-3 days), strict policies. Budget time for rejection cycles.
+5. **Bundle size discipline** — Every native dep is ~1MB+. Audit before adding.
+
+## Cross-platform: React Native
+
+### New Architecture (default since 0.76+)
+- Fabric renderer (concurrent rendering, better perf)
+- TurboModules (lazy-loaded native modules)
+- Codegen for type-safe native interfaces
+- Hermes JS engine default (smaller, faster)
+
+### Expo SDK
+- Use Expo for >90% of apps (managed workflow → bare workflow eject only if needed)
+- EAS Build (cloud builds, no local Xcode)
+- EAS Submit (auto-submit to stores)
+- expo-router for file-based routing (Next.js-style)
+- expo-image (vs react-native-fast-image)
+- expo-secure-store for credentials
+
+### Patterns
+- React Navigation v7 if not using expo-router
+- TanStack Query for server state (same as web)
+- Zustand for local state
+- React Hook Form for forms
+- react-native-mmkv for fast persistent storage (vs AsyncStorage)
+
+## Cross-platform: Flutter
+
+### State management
+- **Riverpod 2.x** (recommended, replaces Provider) — type-safe, testable
+- **BLoC** (good for complex enterprise apps; verbose for small)
+- **GetX** (controversial — opinionated, magical; avoid in production)
+
+### Patterns
+- Material 3 widgets by default
+- Cupertino widgets for iOS-specific UI
+- `go_router` for declarative routing
+- `dio` for HTTP (more features than http)
+- `freezed` for immutable models + unions
+- `flutter_secure_storage` for credentials
+- Isolates for heavy compute (vs Dart's main thread)
+
+### Performance
+- `const` constructors aggressively (skip rebuilds)
+- `ListView.builder` (lazy) > `ListView` (eager) for long lists
+- Profile with DevTools (Performance, Memory tabs)
+
+## Native iOS (SwiftUI)
+
+### When to go native
+- Tightly Apple-integrated app (HealthKit, ARKit, Watch, Vision Pro)
+- Top-tier perf required (games, AR, image/video processing)
+- Apple-only product launch (no Android needed)
+
+### Patterns
+- SwiftUI + Combine (or async/await for newer code)
+- `@Observable` (iOS 17+) replaces `@ObservableObject`
+- MVVM with `@Observable` view models
+- Swift Package Manager for deps
+- Xcode 16+ workflows
+
+## Native Android (Jetpack Compose)
+
+### Patterns
+- Compose + Material 3
+- MVVM with `ViewModel` + `StateFlow`
+- Hilt for DI (vs Koin)
+- Coil for image loading
+- Coroutines + Flow for async
+- Room for local DB
+
+## Navigation
+
+### React Native
+- React Navigation: stack (push/pop), tabs, drawer
+- Deep links via Linking API + universal links / app links
+- expo-router for file-based (recommended for new projects)
+
+### Flutter
+- `go_router` for declarative routes + deep links
+- Type-safe routes via codegen
+
+## Offline-first sync
+
+### Pattern: Local-first → Sync queue → Server
+1. User action writes to local SQLite/Realm/MMKV
+2. UI updates immediately
+3. Sync queue tracks pending operations
+4. Background worker syncs when network available
+5. Conflict resolution: Last-write-wins (simple) or CRDT (collaborative)
+
+Tools:
+- **WatermelonDB** (RN) — fast, sync-friendly
+- **Realm** (cross-platform) — built for sync (with MongoDB Atlas)
+- **Drift** (Flutter) — type-safe SQLite
+- **CouchDB / PouchDB** for replication
+
+## Push notifications
+
+### iOS (APNs)
+- Apple Push Notification service
+- Sandbox vs production environments
+- Token-based auth (preferred) vs certificate
+- Provisional auth (less invasive UX)
+
+### Android (FCM)
+- Firebase Cloud Messaging
+- Topic-based vs token-based targeting
+- Data messages (always delivered) vs notification messages (system-handled)
+
+### Cross-platform
+- **OneSignal** — easiest setup, good free tier
+- **Expo Push Notifications** — wraps APNs + FCM
+- **Firebase Cloud Messaging** — direct, more control
+
+Avoid: Sending notifications without user consent (modern OSes silence apps that spam).
+
+## App store release
+
+### iOS
+- TestFlight: internal (no review, up to 25 users) → external (review, up to 10K)
+- Review cycle: 24-72 hours typically
+- Required: privacy nutrition labels (App Privacy section)
+- Required: ATT (App Tracking Transparency) prompt if tracking
+- Screenshot requirements: 6.7" iPhone, 6.5" iPhone, 12.9" iPad (or use Apple's marketing tool)
+
+### Android
+- Internal → Closed → Open → Production tracks
+- Review cycle: usually < 24h for established apps
+- Required: Data safety form (Play Console)
+- Screenshot requirements: phone, 7" tablet, 10" tablet
+- Bundle (.aab) required, not APK (Play uses bundle for delivery)
+
+## Performance
+
+| Issue | Tool | Fix |
+|---|---|---|
+| Janky scroll | Flipper / Xcode / DevTools | `FlatList` + `keyExtractor` + `getItemLayout`; recycle |
+| Slow startup | Time to interactive metrics | Defer non-critical JS; lazy load screens |
+| Large bundle | `expo-bundle-analyzer`, Flutter `--analyze-size` | Tree-shake; remove unused deps; ProGuard |
+| Memory leaks | Xcode Instruments / Android Profiler | Subscriptions, timers, listeners cleanup in unmount |
+| Battery drain | Battery historian | Background tasks budget; defer to charging if possible |
+
+## Testing
+
+- **Detox** (RN) — E2E on simulators
+- **Maestro** (cross-platform) — simpler than Detox, YAML flows
+- **XCUITest** (iOS) — native UI tests
+- **Espresso** (Android) — native UI tests
+- **Patrol** (Flutter) — native automation
+- **Jest** / **Vitest** for unit (RN) — same as web
+
+## Output format
+
+When building a screen/feature:
+
+```markdown
+## Feature: <name>
+
+### Platforms
+- iOS: ✓ / iPadOS: ?
+- Android: ✓ / Tablet: ?
+
+### Navigation
+- Entry: <from where>
+- Deep link: <pattern>
+
+### Implementation
+[component code]
+
+### Native modules used
+- <list>
+
+### Permissions needed
+- iOS: <Info.plist keys>
+- Android: <AndroidManifest permissions>
+
+### Push events (if applicable)
+- <event name + payload>
+
+### Offline behavior
+- <cache strategy>
+
+### Tests
+[Detox/Maestro/Patrol spec]
+```
+
+## Anti-patterns (qadağa)
+
+- Forcing iOS design on Android (or vice versa) without research
+- Using `Date.now()` for IDs (use UUID v4 or v7)
+- Storing JWT in AsyncStorage / SharedPreferences without encryption (use SecureStore / Keychain / EncryptedSharedPreferences)
+- Ignoring battery + network constraints
+- No splash screen → user sees flash of blank screen
+- Skipping `Linking.openURL` validation (deep link injection)
+
+## Sources
+
+- React Native docs (reactnative.dev)
+- Expo docs (docs.expo.dev)
+- Flutter docs (flutter.dev/docs)
+- Apple HIG (developer.apple.com/design/human-interface-guidelines)
+- Material 3 (m3.material.io)
+- App Store Review Guidelines, Play Console policies