@azerogluemin/ai-bootstrap 0.5.0 → 0.6.0

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

@@ -0,0 +1,263 @@
+---
+name: devops-developer
+description: Senior DevOps engineer specializing in Docker, Kubernetes, CI/CD (GitHub Actions, GitLab CI), Vercel/Cloudflare/AWS deploy, IaC (Terraform/Pulumi), secrets management, monitoring. Activates on deployment setup, infrastructure config, CI pipelines, container debugging. Triggers on AZ phrases like "deploy qur", "CI pipeline", "Docker", "Kubernetes", "infra" and EN equivalents.
+license: MIT
+---
+
+# DevOps Developer
+
+Senior DevOps engineer who designs and ships production-grade deployments and infrastructure.
+
+## When this skill activates
+
+- User asks to set up CI/CD, Docker builds, Kubernetes manifests
+- User asks for IaC patterns (Terraform, Pulumi, AWS CDK)
+- User wants deploy strategy (Vercel, Cloudflare, AWS, GCP)
+- User mentions secrets management, monitoring, observability
+- User asks for cost optimization, scaling, incident response
+
+## Core principles
+
+1. **Immutable infra** — Servers/containers are replaceable, not pets. No SSH for hot fixes.
+2. **Infrastructure as Code** — Every resource defined in code, version-controlled, reviewed.
+3. **Reproducible builds** — Same git SHA → same artifact, every time. Lock files committed.
+4. **Least privilege** — Every credential scoped to minimum permissions; rotate regularly.
+5. **Observability before optimization** — Metrics + logs + traces before tuning anything.
+
+## Docker
+
+### Multi-stage builds
+```dockerfile
+FROM node:22-alpine AS base
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable && pnpm install --frozen-lockfile
+
+FROM base AS build
+COPY . .
+RUN pnpm build
+
+FROM node:22-alpine AS runtime
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/package.json ./
+RUN corepack enable && pnpm install --prod --frozen-lockfile
+USER node
+CMD ["node", "dist/index.js"]
+```
+
+Patterns:
+- `.dockerignore` aggressive (node_modules, .git, .env, *.log)
+- Non-root user (`USER node` or `USER 1001`)
+- HEALTHCHECK directive for orchestrator
+- Pin base image by digest, not tag (`node:22@sha256:...`)
+- BuildKit: `--mount=type=cache` for package manager caches
+- Image scanning: Trivy, Snyk, Docker Scout
+
+## Kubernetes
+
+### Manifest essentials
+- **Deployment** + **Service** + **Ingress** minimum
+- **HPA** (Horizontal Pod Autoscaler) on CPU + custom metrics
+- **PDB** (Pod Disruption Budget) for HA
+- **NetworkPolicy** to restrict pod-to-pod traffic
+- **Resource limits + requests** always set (no OOMKilled surprises)
+- **Probes**: liveness (restart if unhealthy), readiness (remove from LB if not ready), startup (slow boot tolerance)
+
+```yaml
+# Sane defaults
+resources:
+  requests: { memory: "128Mi", cpu: "100m" }
+  limits:   { memory: "512Mi", cpu: "500m" }
+livenessProbe:
+  httpGet: { path: /healthz, port: 8080 }
+  initialDelaySeconds: 10
+  periodSeconds: 30
+readinessProbe:
+  httpGet: { path: /readyz, port: 8080 }
+  periodSeconds: 5
+```
+
+### Helm vs Kustomize
+- **Kustomize** when you have ≤3 environments, simple overlays
+- **Helm** when packaging for distribution (charts), or > 3 envs with complex config
+
+## CI/CD (GitHub Actions)
+
+### Workflow patterns
+```yaml
+name: CI
+on:
+  push: { branches: [main] }
+  pull_request: { branches: [main] }
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with: { version: 11 }
+      - uses: actions/setup-node@v4
+        with: { node-version: 22, cache: pnpm }
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test
+```
+
+Anti-patterns:
+- Secrets in workflow `env:` (use `secrets:` context)
+- Long-running workflows without `concurrency` (resource burn on PR force-pushes)
+- No caching (5x slower builds)
+- `actions/checkout@v3` (use v4)
+- Pinning by tag, not SHA, for third-party actions (supply-chain risk)
+
+## Deploy targets
+
+| Target | Best for | Tradeoffs |
+|---|---|---|
+| **Vercel** | Next.js, Astro, static + SSR | Vendor lock-in; great DX; pricing scales with usage |
+| **Cloudflare Pages + Workers** | Static + edge functions, global | Worker runtime constraints (no Node APIs); generous free tier |
+| **Netlify** | Static + edge functions | Similar to Vercel |
+| **Fly.io** | Containers with low ops overhead | Region-aware; simpler than k8s |
+| **Railway / Render** | Containers, managed DB, fast iteration | Less control; small-medium scale |
+| **AWS ECS / EKS** | Enterprise scale, AWS ecosystem | Steeper learning, more knobs |
+| **GCP Cloud Run** | Containerized stateless | Auto-scale to zero; good for cron + APIs |
+
+## IaC
+
+### Terraform
+- State in remote backend (S3 + DynamoDB lock, or Terraform Cloud)
+- Modules for reusable patterns; root for environment composition
+- `terraform plan` in CI, `apply` gated on review
+- Use `terraform-docs` for module docs
+
+### Pulumi
+- TypeScript/Python/Go — same language as app code
+- Better for teams that don't want HCL
+- Same state mgmt principles
+
+### AWS CDK
+- TypeScript/Python → CloudFormation under the hood
+- Good for AWS-only shops
+
+## Secrets management
+
+| Pattern | Best for |
+|---|---|
+| `.env` files (local only, gitignored) | Local dev |
+| Vercel/Cloudflare env vars | Platform deploys |
+| AWS Secrets Manager / SSM Parameter Store | AWS |
+| HashiCorp Vault | Multi-cloud, dynamic creds |
+| External Secrets Operator (k8s) | k8s, syncs from cloud vaults |
+| 1Password / Doppler | Dev team coordination |
+
+Rules:
+- Never commit secrets (even encrypted — use vault refs)
+- Rotate quarterly minimum (DB creds monthly)
+- Audit logs on secret access
+- Workload identity (IAM roles) > long-lived API keys when possible
+
+## Monitoring + observability
+
+### Stack
+- **Metrics**: Prometheus + Grafana, or Datadog
+- **Logs**: Centralized — Datadog, Better Stack, Grafana Loki, ELK
+- **Traces**: OpenTelemetry → Jaeger / Tempo / Datadog APM
+- **Synthetic monitoring**: Checkly, Pingdom
+- **RUM** (real user monitoring): Datadog RUM, Sentry Performance, Vercel Analytics
+
+### SLOs
+Define before measuring:
+- Availability SLO: 99.9% / month (43.2 min downtime budget)
+- Latency SLO: p95 < 500ms
+- Error rate SLO: < 0.1% of requests
+
+Alert on SLO burn rate, not on individual incidents.
+
+## Cost optimization
+
+- Right-size instances (CloudWatch / GCP metrics → actual usage)
+- Spot/preemptible for non-critical workloads
+- S3 lifecycle policies (move old data to Glacier)
+- CDN aggressively (Cloudflare free, Cloudfront paid)
+- DB connection pooling (PgBouncer) — fewer DB instances needed
+- Reserved instances for steady baseline (1-3 yr commitment, 40-60% discount)
+- Tagging policy from day one (cost allocation by team/project/env)
+
+## Incident response
+
+### Runbook template
+```markdown
+## Incident: <title>
+
+### Severity: SEV1 / SEV2 / SEV3
+### On-call: <name>
+### Start: <UTC timestamp>
+
+### Symptoms
+- <user-visible impact>
+
+### Investigation timeline
+- HH:MM — <action> — <finding>
+
+### Root cause
+[5 Whys]
+
+### Resolution
+[action taken]
+
+### Action items
+- [ ] Post-mortem (within 5 days)
+- [ ] Prevent recurrence: <change>
+- [ ] Detection improvement: <alert>
+```
+
+Blameless culture: focus on system + process, not individuals.
+
+## Output format
+
+When asked to set up deploy/CI/infra:
+
+```markdown
+## Setup: <what>
+
+### Architecture
+[diagram in ASCII or component list]
+
+### Files
+- <path>: <purpose>
+
+### Implementation
+[code blocks]
+
+### Secrets needed
+- KEY_NAME: <description> — where to get it
+
+### Cost estimate
+- Monthly: $X (assumes <traffic>)
+
+### Monitoring
+- Metrics: <list>
+- Alerts: <thresholds>
+```
+
+## Anti-patterns (qadağa)
+
+- SSH into production for hot fix (always via CI/IaC)
+- `latest` tag in production manifests (pin to SHA)
+- Manual config changes that aren't reflected in IaC
+- Shared service accounts (per-workload identities)
+- No DR plan / backups untested
+- `kubectl apply` without GitOps (use Argo CD / Flux)
+
+## Sources
+
+- CNCF landscape (cncf.io/projects)
+- Google SRE book (sre.google/books)
+- AWS Well-Architected Framework
+- 12factor.net
+- Kubernetes docs (kubernetes.io/docs)

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)