devstack 0.1.0

package/vendor/skills/skills/remotion-best-practices/rules/transparent-videos.md

@@ -0,0 +1,102 @@
+---
+name: transparent-videos
+description: Rendering transparent videos in Remotion
+metadata:
+  tags: transparent, alpha, codec, vp9, prores, webm
+---
+
+# Rendering Transparent Videos
+
+Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.
+
+## Transparent ProRes
+
+Ideal for when importing into video editing software.
+
+**CLI:**
+
+```bash
+npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov
+```
+
+**Default in Studio** (restart Studio after changing):
+
+```ts
+// remotion.config.ts
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("png");
+Config.setPixelFormat("yuva444p10le");
+Config.setCodec("prores");
+Config.setProResProfile("4444");
+```
+
+**Setting it as the default export settings for a composition** (using `calculateMetadata`):
+
+```tsx
+import { CalculateMetadataFunction } from "remotion";
+
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
+  return {
+    defaultCodec: "prores",
+    defaultVideoImageFormat: "png",
+    defaultPixelFormat: "yuva444p10le",
+    defaultProResProfile: "4444",
+  };
+};
+
+<Composition
+  id="my-video"
+  component={MyVideo}
+  durationInFrames={150}
+  fps={30}
+  width={1920}
+  height={1080}
+  calculateMetadata={calculateMetadata}
+/>;
+```
+
+## Transparent WebM (VP9)
+
+Ideal for when playing in a browser.
+
+**CLI:**
+
+```bash
+npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webm
+```
+
+**Default in Studio** (restart Studio after changing):
+
+```ts
+// remotion.config.ts
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("png");
+Config.setPixelFormat("yuva420p");
+Config.setCodec("vp9");
+```
+
+**Setting it as the default export settings for a composition** (using `calculateMetadata`):
+
+```tsx
+import { CalculateMetadataFunction } from "remotion";
+
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
+  return {
+    defaultCodec: "vp8",
+    defaultVideoImageFormat: "png",
+    defaultPixelFormat: "yuva420p",
+  };
+};
+
+<Composition
+  id="my-video"
+  component={MyVideo}
+  durationInFrames={150}
+  fps={30}
+  width={1920}
+  height={1080}
+  calculateMetadata={calculateMetadata}
+/>;
+```

package/vendor/skills/skills/remotion-best-practices/rules/trimming.md

@@ -0,0 +1,51 @@
+---
+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/vendor/skills/skills/remotion-best-practices/rules/videos.md

@@ -0,0 +1,169 @@
+---
+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/vendor/skills/skills/remotion-best-practices/rules/voiceover.md

@@ -0,0 +1,94 @@
+---
+name: voiceover
+description: Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS
+metadata:
+  tags: voiceover, audio, elevenlabs, tts, speech, calculateMetadata, dynamic duration
+---
+
+# Adding AI voiceover to a Remotion composition
+
+Use ElevenLabs TTS to generate speech audio per scene, then use [`calculateMetadata`](./calculate-metadata) to dynamically size the composition to match the audio.
+
+## Prerequisites
+
+An **ElevenLabs API key** is required (`ELEVENLABS_API_KEY` environment variable).
+
+**MUST** ask the user for their ElevenLabs API key if `ELEVENLABS_API_KEY` is not set. **MUST NOT** fall back to other TTS tools.
+
+Ensure the environment variable is available when running the generation script:
+
+```bash
+node --strip-types generate-voiceover.ts
+```
+
+## Generating audio with ElevenLabs
+
+Create a script that reads the config, calls the ElevenLabs API for each scene, and writes MP3 files to the `public/` directory so Remotion can access them via `staticFile()`.
+
+The core API call for a single scene:
+
+```ts title="generate-voiceover.ts"
+const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
+  method: "POST",
+  headers: {
+    "xi-api-key": process.env.ELEVENLABS_API_KEY!,
+    "Content-Type": "application/json",
+    Accept: "audio/mpeg",
+  },
+  body: JSON.stringify({
+    text: "Welcome to the show.",
+    model_id: "eleven_multilingual_v2",
+    voice_settings: {
+      stability: 0.5,
+      similarity_boost: 0.75,
+      style: 0.3,
+    },
+  }),
+});
+
+const audioBuffer = Buffer.from(await response.arrayBuffer());
+writeFileSync(`public/voiceover/${compositionId}/${scene.id}.mp3`, audioBuffer);
+```
+
+## Dynamic composition duration with calculateMetadata
+
+Use [`calculateMetadata`](./calculate-metadata.md) to measure the [audio durations](./get-audio-duration.md) and set the composition length accordingly.
+
+```tsx
+import { CalculateMetadataFunction, staticFile } from "remotion";
+import { getAudioDuration } from "./get-audio-duration";
+
+const FPS = 30;
+
+const SCENE_AUDIO_FILES = [
+  "voiceover/my-comp/scene-01-intro.mp3",
+  "voiceover/my-comp/scene-02-main.mp3",
+  "voiceover/my-comp/scene-03-outro.mp3",
+];
+
+export const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
+  const durations = await Promise.all(
+    SCENE_AUDIO_FILES.map(file => getAudioDuration(staticFile(file)))
+  );
+
+  const sceneDurations = durations.map(durationInSeconds => {
+    return durationInSeconds * FPS;
+  });
+
+  return {
+    durationInFrames: Math.ceil(sceneDurations.reduce((sum, d) => sum + d, 0)),
+  };
+};
+```
+
+The computed `sceneDurations` are passed into the component via a `voiceover` prop so the component knows how long each scene should be.
+
+If the composition uses [`<TransitionSeries>`](./transitions.md), subtract the overlap from total duration: [./transitions.md#calculating-total-composition-duration](./transitions.md#calculating-total-composition-duration)
+
+## Rendering audio in the component
+
+See [audio.md](./audio.md) for more information on how to render audio in the component.
+
+## Delaying audio start
+
+See [audio.md#delaying](./audio.md#delaying) for more information on how to delay the audio start.

package/vendor/skills/skills/requirements-clarity/README.md

@@ -0,0 +1,275 @@
+# Requirements Clarity
+
+A systematic skill for transforming vague requirements into actionable Product Requirements Documents (PRDs) through focused dialogue and iterative clarification.
+
+## Purpose
+
+This skill helps you avoid costly misunderstandings and rework by ensuring requirements are crystal clear before implementation begins. It uses a 100-point scoring system to systematically identify gaps and guide you through targeted questions until your requirements are development-ready.
+
+## When to Use This Skill
+
+### Use When
+
+- Requirements are vague or ambiguous (e.g., "add login feature", "implement payment")
+- Features are complex and estimated to take more than 2 days
+- Cross-team coordination is required
+- Missing technical context (no tech stack, integration points, or constraints mentioned)
+- Incomplete specifications (no acceptance criteria, success metrics, edge cases)
+- Unclear scope boundaries ("what exactly does 'user management' include?")
+
+### Don't Use When
+
+- Specific file paths are mentioned (e.g., "fix auth.go:45")
+- Code snippets are already included in the request
+- Working with existing functions/classes (use code review instead)
+- Bug fixes with clear reproduction steps
+
+## How It Works
+
+### The Clarification Process
+
+1. **Initial Analysis** (Step 1)
+   - Parses your requirement description
+   - Generates a clarity score (0-100) using a detailed rubric
+   - Identifies what's clear and what needs clarification
+   - Creates a feature name and prepares for PRD generation
+
+2. **Gap Analysis** (Step 2)
+   - Systematically identifies missing information across four dimensions:
+     - **Functional Scope**: Core functionality, boundaries, edge cases
+     - **User Interaction**: Inputs, outputs, success/failure scenarios
+     - **Technical Constraints**: Performance, compatibility, security, scalability
+     - **Business Value**: Problem statement, target users, success metrics
+
+3. **Interactive Clarification** (Step 3)
+   - Asks 2-3 focused questions per round (avoids overwhelming you)
+   - Builds context progressively
+   - Updates clarity score after each response
+   - Continues until score reaches ≥ 90/100
+
+4. **PRD Generation** (Step 4)
+   - Once clarity score ≥ 90, generates comprehensive PRD
+   - Saves to `./docs/prds/{feature-name}-v{version}-prd.md`
+   - Includes all clarified information in structured format
+
+### Clarity Scoring Rubric
+
+The 100-point scoring system evaluates:
+
+- **Functional Clarity** (30 points): Clear inputs/outputs, user interaction, success criteria
+- **Technical Specificity** (25 points): Technology stack, integration points, constraints
+- **Implementation Completeness** (25 points): Edge cases, error handling, data validation
+- **Business Context** (20 points): Problem statement, target users, success metrics
+
+## Key Features
+
+### Systematic Questioning
+
+- Focused, specific questions (not overwhelming)
+- One category at a time
+- Builds on previous answers
+- Uses your language and provides examples
+
+### Quality-Driven Iteration
+
+- Continuous clarity assessment
+- Transparent score updates
+- Iterates until ≥ 90 points achieved
+- Documents all clarification rounds
+
+### Actionable Output
+
+- Concrete specifications ready for development
+- Measurable acceptance criteria (checklistable format)
+- Executable implementation phases with specific tasks
+- Complete PRD with all necessary sections
+
+### Core Principles
+
+- **Why?** (YAGNI check) - Ensures features are truly needed
+- **Simpler?** (KISS check) - Explores simpler alternatives before complex solutions
+
+## Usage Examples
+
+### Example 1: Vague Feature Request
+
+**User Input:**
+
+```
+I need a login feature for my app.
+```
+
+**Skill Response:**
+
+```
+I understand your requirement. Let me help you refine this specification.
+
+Current Clarity Score: 25/100
+
+Clear Aspects:
+- Need authentication functionality
+
+Needs Clarification:
+- Authentication method (email/password, OAuth, SSO?)
+- User types and permissions
+- Security requirements
+- Integration with existing systems
+- Success metrics
+
+Let me systematically clarify these points...
+
+1. Authentication Method: What authentication method do you prefer?
+   - For example: Email/password, social login (Google/GitHub),
+     magic links, or SSO?
+
+2. User Management: Do you need different user roles or permissions?
+   - For example: Admin vs. regular users, or all users have same access?
+
+3. Technology Stack: What's your current tech stack?
+   - For example: React frontend, Node.js backend, PostgreSQL database?
+```
+
+### Example 2: After Clarification Round
+
+**After User Response:**
+
+```
+Thank you for the additional information!
+
+Clarity Score Update: 25/100 → 65/100
+
+New Clarified Content:
+- Authentication: Email/password with optional Google OAuth
+- User roles: Admin and regular users with different permissions
+- Tech stack: Next.js 14, PostgreSQL, using NextAuth.js
+
+Remaining Points to Clarify:
+- Password requirements and security constraints
+- Session management (duration, refresh tokens?)
+- Edge cases (account lockout, password reset)
+- Success metrics (MAU, conversion rate?)
+
+Let me continue with the next round of questions...
+
+1. Security Requirements: What are your password requirements?
+   - For example: Minimum length, special characters, 2FA?
+
+2. Session Management: How long should user sessions last?
+   - For example: 24 hours, 7 days, remember me option?
+
+3. Edge Cases: How should we handle failed login attempts?
+   - For example: Rate limiting, account lockout after X attempts?
+```
+
+### Example 3: Final PRD Generation
+
+**When Clarity Score ≥ 90:**
+
+```
+Perfect! I will now generate the complete PRD document...
+
+[Generates PRD at ./docs/prds/user-authentication-v1.0-prd.md]
+
+Your Product Requirements Document is ready!
+
+File: ./docs/prds/user-authentication-v1.0-prd.md
+Quality Score: 92/100
+Clarification Rounds: 3
+
+The PRD includes:
+✓ Complete requirements description with background and value proposition
+✓ Technical approach with architecture decisions
+✓ Measurable acceptance criteria (functional, quality, user acceptance)
+✓ 4 execution phases with specific tasks and deliverables
+✓ Risk assessment and mitigation strategies
+
+You can now hand this off to your development team for implementation.
+```
+
+## Generated PRD Structure
+
+The final PRD includes:
+
+1. **Requirements Description**
+   - Background (business problem, target users, value proposition)
+   - Feature overview (core features, boundaries, user scenarios)
+   - Detailed requirements (I/O, user interaction, data, edge cases)
+
+2. **Design Decisions**
+   - Technical approach (architecture, components, data storage, interfaces)
+   - Constraints (performance, compatibility, security, scalability)
+   - Risk assessment (technical, dependency, schedule risks)
+
+3. **Acceptance Criteria**
+   - Functional acceptance (feature-specific conditions)
+   - Quality standards (code quality, test coverage, performance, security)
+   - User acceptance (UX, documentation, training)
+
+4. **Execution Phases**
+   - Phase 1: Preparation (environment setup, technical validation)
+   - Phase 2: Core Development (implement core functionality)
+   - Phase 3: Integration & Testing (quality assurance)
+   - Phase 4: Deployment (release and monitoring)
+
+Each phase includes specific tasks, deliverables, and time estimates.
+
+## Output Location
+
+PRDs are saved to:
+
+```
+./docs/prds/{feature-name}-v{version}-prd.md
+```
+
+Where:
+
+- `{feature-name}`: Auto-generated in kebab-case format
+- `{version}`: Document version (default 1.0, or user-specified)
+
+## Best Practices
+
+### DO
+
+- Answer questions thoroughly but concisely
+- Provide examples when you have specific preferences
+- Ask for clarification if questions aren't clear
+- Review the final PRD and provide feedback
+- Share constraints and non-negotiables upfront
+
+### DON'T
+
+- Rush through clarification rounds
+- Assume the skill knows your technical context
+- Skip questions that seem "obvious"
+- Approve PRD before reviewing thoroughly
+- Provide contradictory information across rounds
+
+## Success Criteria
+
+A successful requirements clarification session results in:
+
+- Clarity score ≥ 90/100
+- All PRD sections complete with substantial content
+- Acceptance criteria in checklistable format
+- Execution phases with actionable, concrete tasks
+- Development team can start implementation immediately
+- No major questions or ambiguities remain
+
+## Tips for Better Results
+
+1. **Be Specific**: Instead of "fast", say "< 200ms response time"
+2. **Think End-to-End**: Consider the full user journey
+3. **Share Constraints Early**: Technical limitations, budget, timeline
+4. **Provide Context**: Explain the "why" behind your requirement
+5. **Reference Examples**: "Like Stripe's payment flow" is clearer than abstract descriptions
+
+## Related Skills
+
+- **feature-planning**: For breaking down features after PRD is complete
+- **implementation-blueprint**: For detailed implementation planning
+- **dev-spec**: For complete design and planning sessions
+- **critical-brainstorm**: For exploring and stress-testing ideas before clarification
+
+---
+
+**Need help clarifying requirements?** Invoke this skill and provide your initial requirement description. The skill will guide you through systematic clarification until you have a development-ready PRD.