takomi 2.0.4

package/assets/.agent/skills/remotion/rules/trimming.md

@@ -0,0 +1,53 @@
+---
+name: trimming
+description: Trimming patterns for Remotion - cut the beginning or end of animations
+metadata:
+  tags: sequence, trim, clip, cut, offset
+---
+
+Use `<Sequence>` with a negative `from` value to trim the start of an animation.
+
+## Trim the Beginning
+
+A negative `from` value shifts time backwards, making the animation start partway through:
+
+```tsx
+import { Sequence, useVideoConfig } from "remotion";
+
+const fps = useVideoConfig();
+
+<Sequence from={-0.5 * fps}>
+  <MyAnimation />
+</Sequence>
+```
+
+The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
+Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
+
+## Trim the End
+
+Use `durationInFrames` to unmount content after a specified duration:
+
+```tsx
+
+<Sequence durationInFrames={1.5 * fps}>
+  <MyAnimation />
+</Sequence>
+```
+
+The animation plays for 45 frames, then the component unmounts.
+
+## Trim and Delay
+
+Nest sequences to both trim the beginning and delay when it appears:
+
+```tsx
+<Sequence from={30}>
+  <Sequence from={-15}>
+    <MyAnimation />
+  </Sequence>
+</Sequence>
+```
+
+The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.
+

package/assets/.agent/skills/remotion/rules/videos.md

@@ -0,0 +1,171 @@
+---
+name: videos
+description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+metadata:
+  tags: video, media, trim, volume, speed, loop, pitch
+---
+
+# Using videos in Remotion
+
+## Prerequisites
+
+First, the @remotion/media package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/media # If project uses npm
+bunx remotion add @remotion/media # If project uses bun
+yarn remotion add @remotion/media # If project uses yarn
+pnpm exec remotion add @remotion/media # If project uses pnpm
+```
+
+Use `<Video>` from `@remotion/media` to embed videos into your composition.
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Video src={staticFile("video.mp4")} />;
+};
+```
+
+Remote URLs are also supported:
+
+```tsx
+<Video src="https://remotion.media/video.mp4" />
+```
+
+## Trimming
+
+Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
+
+```tsx
+const { fps } = useVideoConfig();
+
+return (
+  <Video
+    src={staticFile("video.mp4")}
+    trimBefore={2 * fps} // Skip the first 2 seconds
+    trimAfter={10 * fps} // End at the 10 second mark
+  />
+);
+```
+
+## Delaying
+
+Wrap the video in a `<Sequence>` to delay when it appears:
+
+```tsx
+import { Sequence, staticFile } from "remotion";
+import { Video } from "@remotion/media";
+
+const { fps } = useVideoConfig();
+
+return (
+  <Sequence from={1 * fps}>
+    <Video src={staticFile("video.mp4")} />
+  </Sequence>
+);
+```
+
+The video will appear after 1 second.
+
+## Sizing and Position
+
+Use the `style` prop to control size and position:
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  style={{
+    width: 500,
+    height: 300,
+    position: "absolute",
+    top: 100,
+    left: 50,
+    objectFit: "cover",
+  }}
+/>
+```
+
+## Volume
+
+Set a static volume (0 to 1):
+
+```tsx
+<Video src={staticFile("video.mp4")} volume={0.5} />
+```
+
+Or use a callback for dynamic volume based on the current frame:
+
+```tsx
+import { interpolate } from "remotion";
+
+const { fps } = useVideoConfig();
+
+return (
+  <Video
+    src={staticFile("video.mp4")}
+    volume={(f) =>
+      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
+    }
+  />
+);
+```
+
+Use `muted` to silence the video entirely:
+
+```tsx
+<Video src={staticFile("video.mp4")} muted />
+```
+
+## Speed
+
+Use `playbackRate` to change the playback speed:
+
+```tsx
+<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
+<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
+```
+
+Reverse playback is not supported.
+
+## Looping
+
+Use `loop` to loop the video indefinitely:
+
+```tsx
+<Video src={staticFile("video.mp4")} loop />
+```
+
+Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
+
+- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
+- `"extend"`: Frame count continues incrementing
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  loop
+  loopVolumeCurveBehavior="extend"
+  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
+/>
+```
+
+## Pitch
+
+Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  toneFrequency={1.5} // Higher pitch
+/>
+<Video
+  src={staticFile("video.mp4")}
+  toneFrequency={0.8} // Lower pitch
+/>
+```
+
+Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

package/assets/.agent/skills/security-audit/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: security-audit
+description: Perform a meticulous deep code audit covering Security, Logic, Completeness, and Quality. Includes vibe-coding-specific guardrails for supply chain attacks, auth, rate limiting, and RLS.
+---
+
+# Security Audit Skill
+
+A comprehensive, manual deep code audit protocol for security-critical systems. Includes fast "Vibe Coding Guardrails" for the most common AI-assisted development pitfalls.
+
+## When to Use
+- Before major releases
+- Security review requests
+- Auditing authentication/payment flows
+- When "audit" or "security" is mentioned
+- After scaffolding a new project with AI (vibe coding sanity check)
+- Before first deploy of any user-facing app
+
+## Audit Phases
+
+### Phase 0: Scope Definition
+Define boundaries:
+- **FULL_SCAN**: Entire codebase
+- **FEATURE_SCAN**: Specific feature (`docs/features/[Name].md`)
+- **DIFF_SCAN**: `git diff --staged` or `git diff HEAD~1`
+
+### Phase 1: The Detective (Static Analysis)
+```bash
+# 1. Detect package manager & run dependency audit
+# Auto-detect: check which lockfile exists
+# pnpm-lock.yaml → pnpm audit
+# package-lock.json → npm audit
+# yarn.lock → yarn audit
+# bun.lockb → bun pm audit (or bunx audit)
+pnpm audit  # ← swap for your package manager
+
+# 2. Secret scanning (use jstar if available)
+jstar detect
+
+# 3. Manual grep patterns:
+# Secrets
+grep -rE "(api_key|secret|password|token)\s*[:=]\s*['\"\`][a-zA-Z0-9_\-\.]{10,}['\"\`]"
+
+# RCE/Injection
+grep -rE "(dangerouslySetInnerHTML|eval\(|exec\(|\.queryRaw)"
+
+# Debugging
+grep -rE "(console\.log|debugger|todo)"
+```
+
+### Phase 1.5: Vibe Coding Guardrails (AI-Specific Checks)
+
+> These are fast, proactive checks that catch the most common vibe-coding security mistakes.
+> Run these **before** deep analysis. Each takes ~2 minutes.
+
+#### 1.5.1 — Ghost/Phantom Package Detection (Supply Chain)
+**Risk:** AI models hallucinate package names. Attackers register malware under those names.
+
+> **Note:** `npm view` queries the npm registry directly and works regardless of your package manager (pnpm, yarn, bun, etc.). You don't need npm installed — it's just a registry lookup.
+
+```bash
+# For each unfamiliar dependency in package.json:
+# 1. Verify it exists on the real registry (works with ANY package manager)
+npm view <package-name> version  # Should return a version, not 404
+# Alt for pnpm users: pnpm info <package-name>
+# Alt for bun users: bunx npm-cli view <package-name>
+
+# 2. Check download stats (low downloads = suspicious)
+npm view <package-name> --json | grep -E "downloads|modified"
+
+# 3. Look for typosquatting (e.g., "lodahs" instead of "lodash")
+# Compare against known-good package names
+```
+**Action:** Remove any package that doesn't exist on npm/PyPI or has suspiciously low downloads. Cross-reference with the official docs.
+
+#### 1.5.2 — AI-Built Auth Detection
+**Risk:** AI happily generates custom login systems that *look* like they work but have invisible holes (no CSRF, weak hashing, no session expiry, etc.).
+```bash
+# Scan for custom auth patterns (red flags):
+grep -rE "(bcrypt\.hash|jwt\.sign|createHash|crypto\.createCipher)" --include="*.ts" --include="*.tsx" --include="*.js"
+grep -rE "(password.*=.*req\.(body|query)|session\[|cookie\[)" --include="*.ts" --include="*.tsx" --include="*.js"
+
+# Check if a battle-tested auth provider is installed:
+grep -E "(next-auth|@auth/|@clerk|@supabase/auth|auth0|lucia|better-auth)" package.json
+```
+**Action:** If custom auth is found AND no established provider exists:
+- Flag as **HIGH** severity
+- Recommend migration to: **Clerk**, **NextAuth/Auth.js**, **Supabase Auth**, **Auth0**, **Lucia**, or **Better Auth**
+- Custom auth is only acceptable if the team has dedicated security expertise
+
+#### 1.5.3 — .gitignore Verification
+**Risk:** Vibe coding moves fast. One missing `.gitignore` entry = secrets pushed to public GitHub. Bots scan for exposed keys 24/7.
+```bash
+# 1. Check .gitignore exists
+test -f .gitignore && echo "EXISTS" || echo "MISSING — CRITICAL"
+
+# 2. Verify essential entries are present:
+for pattern in ".env" ".env.local" ".env.*.local" "node_modules" "*.pem" "*.key" ".DS_Store"; do
+  grep -qF "$pattern" .gitignore || echo "MISSING from .gitignore: $pattern"
+done
+
+# 3. Check if .env is already tracked (damage already done):
+git ls-files --cached | grep -E "\.env$|\.env\.local$|\.pem$|\.key$"
+# If output exists → secrets are already in git history. Rotate ALL keys immediately.
+```
+**Action:** If `.gitignore` is missing or incomplete → flag as **CRITICAL**. If `.env` is already tracked → **CRITICAL** + recommend `git filter-branch` or `BFG Repo-Cleaner` + immediate key rotation.
+
+#### 1.5.4 — Rate Limiting Check
+**Risk:** Any public API route without rate limiting = bots will abuse it (spam, brute force, API cost drain).
+```bash
+# Check if rate limiting middleware is installed:
+grep -E "(rate-limit|@upstash/ratelimit|express-rate-limit|limiter)" package.json
+
+# Check if it's actually applied to API routes:
+grep -rE "(rateLimit|rateLimiter|Ratelimit|slidingWindow)" --include="*.ts" --include="*.tsx" --include="*.js" src/app/api/ app/api/ pages/api/
+```
+**Action:** If no rate limiter is found on public API routes:
+- Flag as **HIGH** severity
+- Recommend: `@upstash/ratelimit` (serverless), `express-rate-limit` (Express), or custom middleware
+- Minimum: 100 requests/hour/IP for forms, 10 requests/minute for auth endpoints
+- AI-powered endpoints (LLM calls) should have even stricter limits to prevent cost attacks
+
+#### 1.5.5 — Row Level Security (RLS) Check
+**Risk:** By default, databases let anyone see everyone's data. Forgetting RLS = instant data leak.
+```bash
+# Check if Supabase is used (most common vibe-coding DB):
+grep -E "(supabase|@supabase)" package.json
+
+# If Supabase: verify RLS is mentioned in migration files or setup:
+grep -rE "(enable_rls|row_level_security|CREATE POLICY|ALTER TABLE.*ENABLE ROW LEVEL SECURITY)" --include="*.sql" --include="*.ts"
+
+# For Prisma: check for tenant/user scoping in queries:
+grep -rE "where:.*userId|where:.*user_id|where:.*tenantId" --include="*.ts" --include="*.tsx"
+
+# For raw SQL: check for user-scoped WHERE clauses:
+grep -rE "(SELECT|UPDATE|DELETE).*FROM" --include="*.ts" --include="*.tsx" | grep -v "WHERE.*user"
+```
+**Action:** If database is used but no RLS/user-scoping is found:
+- Flag as **CRITICAL** severity
+- For Supabase: Enable RLS on ALL tables, create policies for `SELECT`, `INSERT`, `UPDATE`, `DELETE`
+- For Prisma/raw SQL: Ensure every query that touches user data includes a `userId`/`tenantId` filter
+- Rule of thumb: **If a user can see another user's data, it's a data breach**
+
+---
+
+### Phase 2: The Graph (Data Flow)
+- Identify Entry Points (Routes, Actions, CLI)
+- **Trace Input**: User input → Service → Database
+- **Verify Validation**: Zod/Typebox at edge boundaries
+
+### Phase 3: The Auditor (Spec vs Code)
+- Read `docs/features/*.md` for scope
+- **Gap Analysis**: Features in Docs but missing in Code
+- **Orphan Analysis**: Code not in Docs (zombie code)
+
+### Phase 4: The Judge (Logic Probing)
+Pick highest-risk file and simulate:
+- "What if I send `null`? Empty string? Negative ID?"
+- "What if two requests hit this at once?" (race conditions)
+- "Can I access this Service function directly?" (auth bypass)
+
+### Phase 5: The Architect (Quality)
+- **Performance**: `await` in loops → N+1 queries
+- **Bloat**: Files > 200 lines? Functions > 50 lines?
+- **Types**: Any use of `any` or `as unknown`?
+- **Structure**: Feature-Sliced Design compliance?
+
+### Phase 6: Report
+Create `.jstar/audit_report.md`:
+
+| Severity | Category | Location | Issue | Recommendation |
+|----------|----------|----------|-------|----------------|
+| CRITICAL | SECURITY | `api/auth` | ... | ... |
+| HIGH | LOGIC | `service.ts:42` | ... | ... |
+| HIGH | GUARDRAIL | `package.json` | No rate limiter installed | Add `@upstash/ratelimit` |
+
+Severities: `CRITICAL`, `HIGH`, `WARNING`, `INFO`
+Categories: `SECURITY`, `LOGIC`, `COMPLETENESS`, `QUALITY`, `GUARDRAIL`
+
+### Phase 7: Remediation
+For each CRITICAL/HIGH:
+1. Implement fix
+2. Run build/tests
+3. Re-verify with grep/logic check
+4. Stage changes

package/assets/.agent/skills/seo-ready/SKILL.md

@@ -0,0 +1,140 @@
+---
+name: seo-ready
+description: Make any Next.js page SEO-ready with metadata, structured data, sitemap, and accessibility best practices.
+---
+
+# SEO Ready Skill
+
+Transform Next.js pages into fully SEO-optimized pages.
+
+## When to Use
+- SEO optimization requests
+- Before launching pages to production
+- When asked about metadata or search visibility
+- Accessibility audits
+
+## Phase 1: Global Setup (Once Per Project)
+
+### Check Root Metadata
+```bash
+head -50 src/app/layout.tsx
+```
+
+Required in `layout.tsx`:
+```typescript
+export const metadata: Metadata = {
+  title: { default: "Site Name", template: "%s | Site Name" },
+  description: "...",
+  metadataBase: new URL("https://your-domain.com"),
+  openGraph: { /* ... */ },
+  twitter: { /* ... */ },
+};
+```
+
+### Sitemap
+```bash
+ls src/app/sitemap.ts 2>/dev/null || echo "MISSING"
+```
+
+If missing, create `src/app/sitemap.ts`:
+```typescript
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://your-domain.com'
+  return [
+    { url: baseUrl, lastModified: new Date(), changeFrequency: 'yearly', priority: 1 },
+  ]
+}
+```
+
+### Robots.txt
+Create `src/app/robots.ts` if missing.
+
+### Web Manifest (PWA)
+Create `src/app/manifest.ts` if missing.
+
+### Icons
+Check: `src/app/icon.png`, `src/app/apple-icon.png`
+
+### OpenGraph Image
+Options:
+- **Static**: `src/app/opengraph-image.png` (1200x630px)
+- **Dynamic**: `src/app/opengraph-image.tsx`
+
+### JSON-LD Structured Data
+Add to `<body>` in layout:
+```tsx
+<script
+  type="application/ld+json"
+  dangerouslySetInnerHTML={{
+    __html: JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "Your App",
+    })
+  }}
+/>
+```
+
+## Phase 2: Per-Page Optimization
+
+### Server Component Check
+If page starts with `'use client'`, refactor:
+- Move client logic to `src/features/<feature>/components/`
+- Page file becomes Server Component that imports client component
+
+### Page Metadata
+```typescript
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: "Page Title",  // Becomes "Page Title | Site Name"
+  description: "Specific description for this page.",
+};
+```
+
+### Semantic HTML Audit
+- `<main>` for primary content
+- `<section>` with `id` for anchors
+- `<article>` for standalone content
+- Proper heading hierarchy (`<h1>` → `<h2>` etc.)
+
+### Image Optimization
+- Use `<Image>` component
+- Required: `alt`, `width`, `height`
+
+## Phase 3: Accessibility
+
+- ARIA labels on interactive elements
+- `<html lang="en">` set correctly
+- Keyboard navigable
+
+## Phase 4: Verification
+
+```bash
+pnpm build
+pnpm dev
+# Visit /sitemap.xml and /robots.txt
+```
+
+## Checklist
+| Item | Status |
+|------|--------|
+| Root metadata | [ ] |
+| sitemap.ts | [ ] |
+| robots.ts | [ ] |
+| manifest.ts | [ ] |
+| Icons | [ ] |
+| OpenGraph image | [ ] |
+| JSON-LD | [ ] |
+| Page metadata | [ ] |
+| Semantic HTML | [ ] |
+| Build passes | [ ] |
+
+## References
+
+Content writing patterns merged from [coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills):
+
+- [AEO & GEO Patterns](references/aeo-geo-patterns.md): Content blocks optimized for answer engines and AI citation
+- [AI Writing Detection](references/ai-writing-detection.md): Words and phrases to avoid (the "anti-slop" guide)