Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
1bd7db87b9 | ||
|
|
41576e7664 | ||
|
|
c3e5876b7c | ||
|
|
da230d00b0 | ||
|
|
674fa7703d | ||
|
|
a9ff10d511 | ||
|
|
1f753cd190 | ||
|
|
87671ce026 |
21
CHANGELOG.md
21
CHANGELOG.md
@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## [2.6.0] - 2026-01-21 - "Everything Skills Edition"
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- **8 Verified Skills** from [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code):
|
||||||
|
- `cc-skill-backend-patterns`
|
||||||
|
- `cc-skill-clickhouse-io`
|
||||||
|
- `cc-skill-coding-standards`
|
||||||
|
- `cc-skill-continuous-learning`
|
||||||
|
- `cc-skill-frontend-patterns`
|
||||||
|
- `cc-skill-project-guidelines-example`
|
||||||
|
- `cc-skill-security-review`
|
||||||
|
- `cc-skill-strategic-compact`
|
||||||
|
- **Documentation**: New `WALKTHROUGH.md` for import process details.
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
- **Skill Cleanup**: Removed 27 unwanted agents, commands, and rules from the `everything-claude-code` import to focus strictly on skills.
|
||||||
|
- **Index**: Regenerated `skills_index.json` (Total: 233 skills).
|
||||||
|
- **Credits**: Updated README credits and registry.
|
||||||
|
|
||||||
## [1.0.0] - 2026-01-19 - "Marketing Edition"
|
## [1.0.0] - 2026-01-19 - "Marketing Edition"
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|||||||
451
README.md
451
README.md
@@ -1,6 +1,6 @@
|
|||||||
# 🌌 Antigravity Awesome Skills: 224+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
# 🌌 Antigravity Awesome Skills: 233+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More
|
||||||
|
|
||||||
> **The Ultimate Collection of 224+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode**
|
> **The Ultimate Collection of 233+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode**
|
||||||
|
|
||||||
[](https://opensource.org/licenses/MIT)
|
[](https://opensource.org/licenses/MIT)
|
||||||
[](https://claude.ai)
|
[](https://claude.ai)
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
[](https://github.com/opencode-ai/opencode)
|
[](https://github.com/opencode-ai/opencode)
|
||||||
[](https://github.com/anthropics/antigravity)
|
[](https://github.com/anthropics/antigravity)
|
||||||
|
|
||||||
**Antigravity Awesome Skills** is a curated, battle-tested library of **224 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
**Antigravity Awesome Skills** is a curated, battle-tested library of **233 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants:
|
||||||
|
|
||||||
- 🟣 **Claude Code** (Anthropic CLI)
|
- 🟣 **Claude Code** (Anthropic CLI)
|
||||||
- 🔵 **Gemini CLI** (Google DeepMind)
|
- 🔵 **Gemini CLI** (Google DeepMind)
|
||||||
@@ -55,7 +55,7 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skill
|
|||||||
@brainstorming help me design a todo app
|
@brainstorming help me design a todo app
|
||||||
```
|
```
|
||||||
|
|
||||||
That's it! Your AI assistant now has 224 specialized skills. 🎉
|
That's it! Your AI assistant now has 233 specialized skills. 🎉
|
||||||
|
|
||||||
**Additional Resources:**
|
**Additional Resources:**
|
||||||
|
|
||||||
@@ -109,227 +109,236 @@ The repository is organized into several key areas of expertise:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Full Skill Registry (224/224)
|
## Full Skill Registry (233/233)
|
||||||
|
|
||||||
Below is the complete list of available skills. Each skill folder contains a `SKILL.md` that can be imported into Antigravity or Claude Code.
|
Below is the complete list of available skills. Each skill folder contains a `SKILL.md` that can be imported into Antigravity or Claude Code.
|
||||||
|
|
||||||
> [!NOTE] > **Document Skills**: We provide both **community** and **official Anthropic** versions for DOCX, PDF, PPTX, and XLSX. Locally, the official versions are used by default (via symlinks). In the repository, both versions are available for flexibility.
|
> [!NOTE] > **Document Skills**: We provide both **community** and **official Anthropic** versions for DOCX, PDF, PPTX, and XLSX. Locally, the official versions are used by default (via symlinks). In the repository, both versions are available for flexibility.
|
||||||
|
|
||||||
| Skill Name | Description | Path |
|
| Skill Name | Description | Path |
|
||||||
| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- |
|
| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
|
||||||
| **3D Web Experience** | Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL. | `skills/3d-web-experience` |
|
| **3D Web Experience** | Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL. | `skills/3d-web-experience` |
|
||||||
| **A/B Test Setup** | Plan and implement A/B tests with proper experiment design, statistical significance, and test analysis. | `skills/ab-test-setup` |
|
| **A/B Test Setup** | Plan and implement A/B tests with proper experiment design, statistical significance, and test analysis. | `skills/ab-test-setup` |
|
||||||
| **Active Directory Attacks** | This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing. | `skills/active-directory-attacks` |
|
| **Active Directory Attacks** | This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing. | `skills/active-directory-attacks` |
|
||||||
| **Address GitHub Comments** | Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI. | `skills/address-github-comments` |
|
| **Address GitHub Comments** | Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI. | `skills/address-github-comments` |
|
||||||
| **Agent Evaluation** | Testing and benchmarking LLM agents including behavioral testing, capability assessment, reliability metrics. | `skills/agent-evaluation` |
|
| **Agent Evaluation** | Testing and benchmarking LLM agents including behavioral testing, capability assessment, reliability metrics. | `skills/agent-evaluation` |
|
||||||
| **Agent Manager Skill** | Use when you need to manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling. | `skills/agent-manager-skill` |
|
| **Agent Manager Skill** | Use when you need to manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling. | `skills/agent-manager-skill` |
|
||||||
| **Agent Memory Systems** | Memory architecture for agents: short-term, long-term (vector stores), and cognitive architectures. | `skills/agent-memory-systems` |
|
| **Agent Memory Systems** | Memory architecture for agents: short-term, long-term (vector stores), and cognitive architectures. | `skills/agent-memory-systems` |
|
||||||
| **Agent Tool Builder** | Tool design from schema to error handling. JSON Schema best practices, validation, and MCP. | `skills/agent-tool-builder` |
|
| **Agent Tool Builder** | Tool design from schema to error handling. JSON Schema best practices, validation, and MCP. | `skills/agent-tool-builder` |
|
||||||
| **AI Agents Architect** | Expert in autonomous AI agents. Tool use, memory systems, planning strategies, multi-agent orchestration. | `skills/ai-agents-architect` |
|
| **AI Agents Architect** | Expert in autonomous AI agents. Tool use, memory systems, planning strategies, multi-agent orchestration. | `skills/ai-agents-architect` |
|
||||||
| **AI Product** | LLM integration patterns, RAG architecture, prompt engineering, AI UX, and cost optimization. | `skills/ai-product` |
|
| **AI Product** | LLM integration patterns, RAG architecture, prompt engineering, AI UX, and cost optimization. | `skills/ai-product` |
|
||||||
| **AI Wrapper Product** | Building products that wrap AI APIs into focused tools. Prompt engineering, cost management. | `skills/ai-wrapper-product` |
|
| **AI Wrapper Product** | Building products that wrap AI APIs into focused tools. Prompt engineering, cost management. | `skills/ai-wrapper-product` |
|
||||||
| **Algolia Search** | Algolia search implementation, indexing strategies, React InstantSearch, relevance tuning. | `skills/algolia-search` |
|
| **Algolia Search** | Algolia search implementation, indexing strategies, React InstantSearch, relevance tuning. | `skills/algolia-search` |
|
||||||
| **Algorithmic Art** | Creating algorithmic art using p5. | `skills/algorithmic-art` |
|
| **Algorithmic Art** | Creating algorithmic art using p5. | `skills/algorithmic-art` |
|
||||||
| **Analytics Tracking** | Set up analytics tracking with GA4, GTM, and custom event implementations for marketing measurement. | `skills/analytics-tracking` |
|
| **Analytics Tracking** | Set up analytics tracking with GA4, GTM, and custom event implementations for marketing measurement. | `skills/analytics-tracking` |
|
||||||
| **API Fuzzing for Bug Bounty** | This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques. | `skills/api-fuzzing-bug-bounty` |
|
| **API Fuzzing for Bug Bounty** | This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques. | `skills/api-fuzzing-bug-bounty` |
|
||||||
| **API Patterns** | API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning. | `skills/api-patterns` |
|
| **API Patterns** | API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning. | `skills/api-patterns` |
|
||||||
| **App Builder** | Main application building orchestrator. Creates full-stack applications from natural language requests. | `skills/app-builder` |
|
| **App Builder** | Main application building orchestrator. Creates full-stack applications from natural language requests. | `skills/app-builder` |
|
||||||
| **App Store Optimization** | Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store. | `skills/app-store-optimization` |
|
| **App Store Optimization** | Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store. | `skills/app-store-optimization` |
|
||||||
| **Architecture** | Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. | `skills/architecture` |
|
| **Architecture** | Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. | `skills/architecture` |
|
||||||
| **Autonomous Agent Patterns** | "Design patterns for building autonomous coding agents. | `skills/autonomous-agent-patterns` |
|
| **Autonomous Agent Patterns** | "Design patterns for building autonomous coding agents. | `skills/autonomous-agent-patterns` |
|
||||||
| **Autonomous Agents** | AI systems that independently decompose goals, plan actions, execute tools. ReAct, reflection. | `skills/autonomous-agents` |
|
| **Autonomous Agents** | AI systems that independently decompose goals, plan actions, execute tools. ReAct, reflection. | `skills/autonomous-agents` |
|
||||||
| **AWS Penetration Testing** | This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment. | `skills/aws-penetration-testing` |
|
| **AWS Penetration Testing** | This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment. | `skills/aws-penetration-testing` |
|
||||||
| **AWS Serverless** | Serverless on AWS. Lambda, API Gateway, DynamoDB, SQS/SNS, SAM/CDK deployment. | `skills/aws-serverless` |
|
| **AWS Serverless** | Serverless on AWS. Lambda, API Gateway, DynamoDB, SQS/SNS, SAM/CDK deployment. | `skills/aws-serverless` |
|
||||||
| **Azure Functions** | Azure Functions patterns. Isolated worker model, Durable Functions, cold start optimization. | `skills/azure-functions` |
|
| **Azure Functions** | Azure Functions patterns. Isolated worker model, Durable Functions, cold start optimization. | `skills/azure-functions` |
|
||||||
| **Backend Guidelines** | Comprehensive backend development guide for Node. | `skills/backend-dev-guidelines` |
|
| **Backend Guidelines** | Comprehensive backend development guide for Node. | `skills/backend-dev-guidelines` |
|
||||||
| **Bash Linux** | Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. | `skills/bash-linux` |
|
| **Bash Linux** | Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. | `skills/bash-linux` |
|
||||||
| **Behavioral Modes** | AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). | `skills/behavioral-modes` |
|
| **Behavioral Modes** | AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). | `skills/behavioral-modes` |
|
||||||
| **BlockRun** | Agent wallet for LLM micropayments. Use when user needs capabilities Claude lacks (image generation, real-time X/Twitter data) or explicitly requests external models ("blockrun", "use grok", "use gpt", "dall-e", "deepseek"). | `skills/blockrun` |
|
| **BlockRun** | Agent wallet for LLM micropayments. Use when user needs capabilities Claude lacks (image generation, real-time X/Twitter data) or explicitly requests external models ("blockrun", "use grok", "use gpt", "dall-e", "deepseek"). | `skills/blockrun` |
|
||||||
| **Brainstorming** | "You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. | `skills/brainstorming` |
|
| **Brainstorming** | "You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. | `skills/brainstorming` |
|
||||||
| **Brand Guidelines (Anthropic)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-anthropic` |
|
| **Brand Guidelines (Anthropic)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-anthropic` |
|
||||||
| **Brand Guidelines (Community)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-community` |
|
| **Brand Guidelines (Community)** | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. | `skills/brand-guidelines-community` |
|
||||||
| **Broken Authentication Testing** | This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". | `skills/broken-authentication` |
|
| **Broken Authentication Testing** | This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". | `skills/broken-authentication` |
|
||||||
| **Browser Automation** | Browser automation with Playwright and Puppeteer. Testing, scraping, agentic control. | `skills/browser-automation` |
|
| **Browser Automation** | Browser automation with Playwright and Puppeteer. Testing, scraping, agentic control. | `skills/browser-automation` |
|
||||||
| **Browser Extension Builder** | Building browser extensions - Chrome, Firefox. Manifest v3, content scripts, monetization. | `skills/browser-extension-builder` |
|
| **Browser Extension Builder** | Building browser extensions - Chrome, Firefox. Manifest v3, content scripts, monetization. | `skills/browser-extension-builder` |
|
||||||
| **BullMQ Specialist** | BullMQ for Redis-backed job queues, background processing in Node.js/TypeScript. | `skills/bullmq-specialist` |
|
| **BullMQ Specialist** | BullMQ for Redis-backed job queues, background processing in Node.js/TypeScript. | `skills/bullmq-specialist` |
|
||||||
| **Bun Development** | "Modern JavaScript/TypeScript development with Bun runtime. | `skills/bun-development` |
|
| **Bun Development** | "Modern JavaScript/TypeScript development with Bun runtime. | `skills/bun-development` |
|
||||||
| **Burp Suite Web Application Testing** | This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". | `skills/burp-suite-testing` |
|
| **Burp Suite Web Application Testing** | This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". | `skills/burp-suite-testing` |
|
||||||
| **Canvas Design** | Create beautiful visual art in . | `skills/canvas-design` |
|
| **Canvas Design** | Create beautiful visual art in . | `skills/canvas-design` |
|
||||||
| **Claude Code Guide** | Master guide for using Claude Code effectively. | `skills/claude-code-guide` |
|
| **CC Skill: Backend Patterns** | Backend architecture patterns from everything-claude-code. API design, database, caching, error handling. | `skills/cc-skill-backend-patterns` |
|
||||||
| **Claude D3.js** | Creating interactive data visualisations using d3. | `skills/claude-d3js-skill` |
|
| **CC Skill: ClickHouse IO** | ClickHouse analytics patterns from everything-claude-code. | `skills/cc-skill-clickhouse-io` |
|
||||||
| **Clean Code** | Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments. | `skills/clean-code` |
|
| **CC Skill: Coding Standards** | Language best practices from everything-claude-code. | `skills/cc-skill-coding-standards` |
|
||||||
| **Clerk Auth** | Clerk auth implementation, middleware, organizations, webhooks, user sync. | `skills/clerk-auth` |
|
| **CC Skill: Continuous Learning** | Continuous learning patterns from everything-claude-code. | `skills/cc-skill-continuous-learning` |
|
||||||
| **Cloud Penetration Testing** | This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". | `skills/cloud-penetration-testing` |
|
| **CC Skill: Frontend Patterns** | React/Next.js patterns from everything-claude-code. | `skills/cc-skill-frontend-patterns` |
|
||||||
| **Code Review Checklist** | Code review guidelines covering code quality, security, and best practices. | `skills/code-review-checklist` |
|
| **CC Skill: Project Guidelines Example** | Example project-specific skill from everything-claude-code. | `skills/cc-skill-project-guidelines-example` |
|
||||||
| **Competitor Alternatives** | Create compelling competitor comparison and alternative pages for SEO and conversions. | `skills/competitor-alternatives` |
|
| **CC Skill: Security Review** | Security checklist skill from everything-claude-code. | `skills/cc-skill-security-review` |
|
||||||
| **Computer Use Agents** | AI agents that interact with computers like humans. Screen control, sandboxing. | `skills/computer-use-agents` |
|
| **CC Skill: Strategic Compact** | Strategic planning skill from everything-claude-code. | `skills/cc-skill-strategic-compact` |
|
||||||
| **Concise Planning** | Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist. | `skills/concise-planning` |
|
| **Claude Code Guide** | Master guide for using Claude Code effectively. | `skills/claude-code-guide` |
|
||||||
| **Content Creator** | Create SEO-optimized marketing content with consistent brand voice. | `skills/content-creator` |
|
| **Claude D3.js** | Creating interactive data visualisations using d3. | `skills/claude-d3js-skill` |
|
||||||
| **Context Window Management** | Managing LLM context windows. Summarization, trimming, routing. | `skills/context-window-management` |
|
| **Clean Code** | Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments. | `skills/clean-code` |
|
||||||
| **Conversation Memory** | Persistent memory for LLM conversations. Short-term, long-term, entity-based memory. | `skills/conversation-memory` |
|
| **Clerk Auth** | Clerk auth implementation, middleware, organizations, webhooks, user sync. | `skills/clerk-auth` |
|
||||||
| **Copy Editing** | Edit and polish existing marketing copy with a systematic seven-sweeps framework. | `skills/copy-editing` |
|
| **Cloud Penetration Testing** | This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". | `skills/cloud-penetration-testing` |
|
||||||
| **Copywriting** | Write compelling marketing copy for homepages, landing pages, pricing pages, and feature pages. | `skills/copywriting` |
|
| **Code Review Checklist** | Code review guidelines covering code quality, security, and best practices. | `skills/code-review-checklist` |
|
||||||
| **Core Components** | Core component library and design system patterns. | `skills/core-components` |
|
| **Competitor Alternatives** | Create compelling competitor comparison and alternative pages for SEO and conversions. | `skills/competitor-alternatives` |
|
||||||
| **CrewAI** | Role-based multi-agent framework. Agent design, task definition, crew orchestration. | `skills/crewai` |
|
| **Computer Use Agents** | AI agents that interact with computers like humans. Screen control, sandboxing. | `skills/computer-use-agents` |
|
||||||
| **Cross-Site Scripting and HTML Injection Testing** | This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". | `skills/xss-html-injection` |
|
| **Concise Planning** | Use when a user asks for a plan for a coding task, to generate a clear, actionable, and atomic checklist. | `skills/concise-planning` |
|
||||||
| **Database Design** | Database design principles. Schema design, indexing strategy, ORM selection, serverless databases. | `skills/database-design` |
|
| **Content Creator** | Create SEO-optimized marketing content with consistent brand voice. | `skills/content-creator` |
|
||||||
| **Deployment Procedures** | Production deployment principles. Safe deployment workflows, rollback strategies, and verification. | `skills/deployment-procedures` |
|
| **Context Window Management** | Managing LLM context windows. Summarization, trimming, routing. | `skills/context-window-management` |
|
||||||
| **Discord Bot Architect** | Production Discord bots. Discord.js, Pycord, slash commands, sharding. | `skills/discord-bot-architect` |
|
| **Conversation Memory** | Persistent memory for LLM conversations. Short-term, long-term, entity-based memory. | `skills/conversation-memory` |
|
||||||
| **Dispatching Parallel Agents** | Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies. | `skills/dispatching-parallel-agents` |
|
| **Copy Editing** | Edit and polish existing marketing copy with a systematic seven-sweeps framework. | `skills/copy-editing` |
|
||||||
| **Doc Co-authoring** | Guide users through a structured workflow for co-authoring documentation. | `skills/doc-coauthoring` |
|
| **Copywriting** | Write compelling marketing copy for homepages, landing pages, pricing pages, and feature pages. | `skills/copywriting` |
|
||||||
| **Docker Expert** | Docker containerization expert. Multi-stage builds, image optimization, container security, Docker Compose. | `skills/docker-expert` |
|
| **Core Components** | Core component library and design system patterns. | `skills/core-components` |
|
||||||
| **Documentation Templates** | Documentation templates and structure guidelines. README, API docs, code comments. | `skills/documentation-templates` |
|
| **CrewAI** | Role-based multi-agent framework. Agent design, task definition, crew orchestration. | `skills/crewai` |
|
||||||
| **DOCX (Official)** | "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. | `skills/docx-official` |
|
| **Cross-Site Scripting and HTML Injection Testing** | This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". | `skills/xss-html-injection` |
|
||||||
| **Email Sequence** | Create and optimize email sequences, drip campaigns, and lifecycle email programs. | `skills/email-sequence` |
|
| **Database Design** | Database design principles. Schema design, indexing strategy, ORM selection, serverless databases. | `skills/database-design` |
|
||||||
| **Email Systems** | Transactional email, marketing automation, deliverability, infrastructure. | `skills/email-systems` |
|
| **Deployment Procedures** | Production deployment principles. Safe deployment workflows, rollback strategies, and verification. | `skills/deployment-procedures` |
|
||||||
| **Ethical Hacking Methodology** | This skill should be used when the user asks to "learn ethical hacking", "understand penetration testing lifecycle", "perform reconnaissance", "conduct security scanning", "exploit vulnerabilities", or "write penetration test reports". | `skills/ethical-hacking-methodology` |
|
| **Discord Bot Architect** | Production Discord bots. Discord.js, Pycord, slash commands, sharding. | `skills/discord-bot-architect` |
|
||||||
| **Executing Plans** | Use when you have a written implementation plan to execute in a separate session with review checkpoints. | `skills/executing-plans` |
|
| **Dispatching Parallel Agents** | Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies. | `skills/dispatching-parallel-agents` |
|
||||||
| **File Organizer** | Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. | `skills/file-organizer` |
|
| **Doc Co-authoring** | Guide users through a structured workflow for co-authoring documentation. | `skills/doc-coauthoring` |
|
||||||
| **File Path Traversal Testing** | This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities", or "access files outside web root". | `skills/file-path-traversal` |
|
| **Docker Expert** | Docker containerization expert. Multi-stage builds, image optimization, container security, Docker Compose. | `skills/docker-expert` |
|
||||||
| **File Uploads** | File uploads and cloud storage. S3, Cloudflare R2, presigned URLs. | `skills/file-uploads` |
|
| **Documentation Templates** | Documentation templates and structure guidelines. README, API docs, code comments. | `skills/documentation-templates` |
|
||||||
| **Finishing Dev Branch** | Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup. | `skills/finishing-a-development-branch` |
|
| **DOCX (Official)** | "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. | `skills/docx-official` |
|
||||||
| **Firebase** | Firebase Auth, Firestore, Realtime Database, Cloud Functions, Storage. | `skills/firebase` |
|
| **Email Sequence** | Create and optimize email sequences, drip campaigns, and lifecycle email programs. | `skills/email-sequence` |
|
||||||
| **Form CRO** | Optimize lead capture forms, contact forms, demo request forms for higher conversion rates. | `skills/form-cro` |
|
| **Email Systems** | Transactional email, marketing automation, deliverability, infrastructure. | `skills/email-systems` |
|
||||||
| **Free Tool Strategy** | Plan and build free tools for marketing, lead generation, and SEO value. | `skills/free-tool-strategy` |
|
| **Ethical Hacking Methodology** | This skill should be used when the user asks to "learn ethical hacking", "understand penetration testing lifecycle", "perform reconnaissance", "conduct security scanning", "exploit vulnerabilities", or "write penetration test reports". | `skills/ethical-hacking-methodology` |
|
||||||
| **Frontend Design** | Create distinctive, production-grade frontend interfaces with high design quality. | `skills/frontend-design` |
|
| **Executing Plans** | Use when you have a written implementation plan to execute in a separate session with review checkpoints. | `skills/executing-plans` |
|
||||||
| **Frontend Guidelines** | Frontend development guidelines for React/TypeScript applications. | `skills/frontend-dev-guidelines` |
|
| **File Organizer** | Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. | `skills/file-organizer` |
|
||||||
| **Game Development** | Game development orchestrator. Routes to platform-specific skills based on project needs. | `skills/game-development` |
|
| **File Path Traversal Testing** | This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities", or "access files outside web root". | `skills/file-path-traversal` |
|
||||||
| **GCP Cloud Run** | Serverless on GCP. Cloud Run services and functions, Pub/Sub. | `skills/gcp-cloud-run` |
|
| **File Uploads** | File uploads and cloud storage. S3, Cloudflare R2, presigned URLs. | `skills/file-uploads` |
|
||||||
| **GEO Fundamentals** | Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity). | `skills/geo-fundamentals` |
|
| **Finishing Dev Branch** | Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup. | `skills/finishing-a-development-branch` |
|
||||||
| **Git Pushing** | Stage, commit, and push git changes with conventional commit messages. | `skills/git-pushing` |
|
| **Firebase** | Firebase Auth, Firestore, Realtime Database, Cloud Functions, Storage. | `skills/firebase` |
|
||||||
| **GitHub Workflow Automation** | "Automate GitHub workflows with AI assistance. | `skills/github-workflow-automation` |
|
| **Form CRO** | Optimize lead capture forms, contact forms, demo request forms for higher conversion rates. | `skills/form-cro` |
|
||||||
| **GraphQL** | Schema design, resolvers, DataLoader, federation, Apollo/urql integration. | `skills/graphql` |
|
| **Free Tool Strategy** | Plan and build free tools for marketing, lead generation, and SEO value. | `skills/free-tool-strategy` |
|
||||||
| **HTML Injection Testing** | This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". | `skills/html-injection-testing` |
|
| **Frontend Design** | Create distinctive, production-grade frontend interfaces with high design quality. | `skills/frontend-design` |
|
||||||
| **HubSpot Integration** | HubSpot CRM integration. OAuth, CRM objects, webhooks, custom objects. | `skills/hubspot-integration` |
|
| **Frontend Guidelines** | Frontend development guidelines for React/TypeScript applications. | `skills/frontend-dev-guidelines` |
|
||||||
| **i18n Localization** | Internationalization and localization patterns. Detecting hardcoded strings, managing translations. | `skills/i18n-localization` |
|
| **Game Development** | Game development orchestrator. Routes to platform-specific skills based on project needs. | `skills/game-development` |
|
||||||
| **IDOR Vulnerability Testing** | This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references," or "bypass authorization to access other users' data. | `skills/idor-testing` |
|
| **GCP Cloud Run** | Serverless on GCP. Cloud Run services and functions, Pub/Sub. | `skills/gcp-cloud-run` |
|
||||||
| **Inngest** | Inngest for serverless background jobs, event-driven workflows. | `skills/inngest` |
|
| **GEO Fundamentals** | Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity). | `skills/geo-fundamentals` |
|
||||||
| **Interactive Portfolio** | Building portfolios that land jobs. Developer, designer portfolios. | `skills/interactive-portfolio` |
|
| **Git Pushing** | Stage, commit, and push git changes with conventional commit messages. | `skills/git-pushing` |
|
||||||
| **Internal Comms (Anthropic)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-anthropic` |
|
| **GitHub Workflow Automation** | "Automate GitHub workflows with AI assistance. | `skills/github-workflow-automation` |
|
||||||
| **Internal Comms (Community)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-community` |
|
| **GraphQL** | Schema design, resolvers, DataLoader, federation, Apollo/urql integration. | `skills/graphql` |
|
||||||
| **JavaScript Mastery** | "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. | `skills/javascript-mastery` |
|
| **HTML Injection Testing** | This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". | `skills/html-injection-testing` |
|
||||||
| **Kaizen** | Guide for continuous improvement, error proofing, and standardization. | `skills/kaizen` |
|
| **HubSpot Integration** | HubSpot CRM integration. OAuth, CRM objects, webhooks, custom objects. | `skills/hubspot-integration` |
|
||||||
| **Langfuse** | Open-source LLM observability. Tracing, prompt management, evaluation. | `skills/langfuse` |
|
| **i18n Localization** | Internationalization and localization patterns. Detecting hardcoded strings, managing translations. | `skills/i18n-localization` |
|
||||||
| **LangGraph** | Stateful, multi-actor AI applications. Graph construction, persistence. | `skills/langgraph` |
|
| **IDOR Vulnerability Testing** | This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references," or "bypass authorization to access other users' data. | `skills/idor-testing` |
|
||||||
| **Launch Strategy** | Plan product launches, feature announcements, and go-to-market strategies. | `skills/launch-strategy` |
|
| **Inngest** | Inngest for serverless background jobs, event-driven workflows. | `skills/inngest` |
|
||||||
| **Lint and Validate** | Automatic quality control, linting, and static analysis procedures. | `skills/lint-and-validate` |
|
| **Interactive Portfolio** | Building portfolios that land jobs. Developer, designer portfolios. | `skills/interactive-portfolio` |
|
||||||
| **Linux Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs for root access", "enumerate Linux systems for privilege escalation", or "gain root access from low-privilege shell". | `skills/linux-privilege-escalation` |
|
| **Internal Comms (Anthropic)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-anthropic` |
|
||||||
| **Linux Shell Scripting** | This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts". | `skills/linux-shell-scripting` |
|
| **Internal Comms (Community)** | A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. | `skills/internal-comms-community` |
|
||||||
| **LLM App Patterns** | "Production-ready patterns for building LLM applications. | `skills/llm-app-patterns` |
|
| **JavaScript Mastery** | "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. | `skills/javascript-mastery` |
|
||||||
| **Loki Mode** | Multi-agent autonomous startup system for Claude Code. | `skills/loki-mode` |
|
| **Kaizen** | Guide for continuous improvement, error proofing, and standardization. | `skills/kaizen` |
|
||||||
| **Marketing Ideas** | 140 proven SaaS marketing ideas and strategies organized by category. | `skills/marketing-ideas` |
|
| **Langfuse** | Open-source LLM observability. Tracing, prompt management, evaluation. | `skills/langfuse` |
|
||||||
| **Marketing Psychology** | 70+ mental models and psychological principles for marketing and persuasion. | `skills/marketing-psychology` |
|
| **LangGraph** | Stateful, multi-actor AI applications. Graph construction, persistence. | `skills/langgraph` |
|
||||||
| **MCP Builder** | Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. | `skills/mcp-builder` |
|
| **Launch Strategy** | Plan product launches, feature announcements, and go-to-market strategies. | `skills/launch-strategy` |
|
||||||
| **Metasploit Framework** | This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "use auxiliary modules for scanning", or "develop custom exploits". | `skills/metasploit-framework` |
|
| **Lint and Validate** | Automatic quality control, linting, and static analysis procedures. | `skills/lint-and-validate` |
|
||||||
| **Micro-SaaS Launcher** | Launching small SaaS products fast. Idea validation, MVP, pricing. | `skills/micro-saas-launcher` |
|
| **Linux Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs for root access", "enumerate Linux systems for privilege escalation", or "gain root access from low-privilege shell". | `skills/linux-privilege-escalation` |
|
||||||
| **Mobile Design** | Mobile-first design thinking for iOS and Android apps. Touch interaction, performance patterns. | `skills/mobile-design` |
|
| **Linux Shell Scripting** | This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts". | `skills/linux-shell-scripting` |
|
||||||
| **Moodle External API Development** | Create custom external web service APIs for Moodle LMS. Use when implementing web services for course management, user tracking, quiz operations, or custom plugin functionality. Covers parameter validation, database operations, error handling, service registration, and Moodle coding standards. | `skills/moodle-external-api-development` |
|
| **LLM App Patterns** | "Production-ready patterns for building LLM applications. | `skills/llm-app-patterns` |
|
||||||
| **Neon Postgres** | Neon serverless Postgres, branching, connection pooling, Prisma integration. | `skills/neon-postgres` |
|
| **Loki Mode** | Multi-agent autonomous startup system for Claude Code. | `skills/loki-mode` |
|
||||||
| **NestJS Expert** | Nest.js framework expert. Module architecture, dependency injection, middleware, guards, interceptors. | `skills/nestjs-expert` |
|
| **Marketing Ideas** | 140 proven SaaS marketing ideas and strategies organized by category. | `skills/marketing-ideas` |
|
||||||
| **Network 101** | This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on configuring and testing network services for penetration testing labs. | `skills/network-101` |
|
| **Marketing Psychology** | 70+ mental models and psychological principles for marketing and persuasion. | `skills/marketing-psychology` |
|
||||||
| **Next.js Best Practices** | Next.js App Router principles. Server Components, data fetching, routing patterns. | `skills/nextjs-best-practices` |
|
| **MCP Builder** | Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. | `skills/mcp-builder` |
|
||||||
| **Next.js Supabase Auth** | Supabase Auth with Next.js App Router. Auth middleware. | `skills/nextjs-supabase-auth` |
|
| **Metasploit Framework** | This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "use auxiliary modules for scanning", or "develop custom exploits". | `skills/metasploit-framework` |
|
||||||
| **Node.js Best Practices** | Node.js development principles. Framework selection, async patterns, security, architecture. | `skills/nodejs-best-practices` |
|
| **Micro-SaaS Launcher** | Launching small SaaS products fast. Idea validation, MVP, pricing. | `skills/micro-saas-launcher` |
|
||||||
| **NotebookLM** | Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. | `skills/notebooklm` |
|
| **Mobile Design** | Mobile-first design thinking for iOS and Android apps. Touch interaction, performance patterns. | `skills/mobile-design` |
|
||||||
| **Notion Template Business** | Building and selling Notion templates. Design, pricing, marketing. | `skills/notion-template-business` |
|
| **Moodle External API Development** | Create custom external web service APIs for Moodle LMS. Use when implementing web services for course management, user tracking, quiz operations, or custom plugin functionality. Covers parameter validation, database operations, error handling, service registration, and Moodle coding standards. | `skills/moodle-external-api-development` |
|
||||||
| **Onboarding CRO** | Optimize post-signup onboarding, user activation, and time-to-value. | `skills/onboarding-cro` |
|
| **Neon Postgres** | Neon serverless Postgres, branching, connection pooling, Prisma integration. | `skills/neon-postgres` |
|
||||||
| **Page CRO** | Conversion rate optimization for marketing pages - homepages, landing pages, pricing pages. | `skills/page-cro` |
|
| **NestJS Expert** | Nest.js framework expert. Module architecture, dependency injection, middleware, guards, interceptors. | `skills/nestjs-expert` |
|
||||||
| **Paid Ads** | Create and optimize paid ad campaigns on Google Ads, Meta, LinkedIn, and other platforms. | `skills/paid-ads` |
|
| **Network 101** | This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on configuring and testing network services for penetration testing labs. | `skills/network-101` |
|
||||||
| **Parallel Agents** | Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise. | `skills/parallel-agents` |
|
| **Next.js Best Practices** | Next.js App Router principles. Server Components, data fetching, routing patterns. | `skills/nextjs-best-practices` |
|
||||||
| **Paywall Upgrade CRO** | Optimize in-app paywalls, upgrade screens, and freemium conversion moments. | `skills/paywall-upgrade-cro` |
|
| **Next.js Supabase Auth** | Supabase Auth with Next.js App Router. Auth middleware. | `skills/nextjs-supabase-auth` |
|
||||||
| **PDF (Official)** | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. | `skills/pdf-official` |
|
| **Node.js Best Practices** | Node.js development principles. Framework selection, async patterns, security, architecture. | `skills/nodejs-best-practices` |
|
||||||
| **Pentest Checklist** | This skill should be used when the user asks to "plan a penetration test", "create a security assessment checklist", "prepare for penetration testing", "define pentest scope", "follow security testing best practices", or needs a structured methodology for penetration testing engagements. | `skills/pentest-checklist` |
|
| **NotebookLM** | Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. | `skills/notebooklm` |
|
||||||
| **Pentest Commands** | This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "enumerate networks", or needs essential penetration testing command references. | `skills/pentest-commands` |
|
| **Notion Template Business** | Building and selling Notion templates. Design, pricing, marketing. | `skills/notion-template-business` |
|
||||||
| **Performance Profiling** | Performance profiling principles. Measurement, analysis, and optimization techniques. | `skills/performance-profiling` |
|
| **Onboarding CRO** | Optimize post-signup onboarding, user activation, and time-to-value. | `skills/onboarding-cro` |
|
||||||
| **Personal Tool Builder** | Building custom tools. Rapid prototyping, local-first apps, CLI tools. | `skills/personal-tool-builder` |
|
| **Page CRO** | Conversion rate optimization for marketing pages - homepages, landing pages, pricing pages. | `skills/page-cro` |
|
||||||
| **Plaid Fintech** | Plaid API for banking. Link token flows, transactions, ACH. | `skills/plaid-fintech` |
|
| **Paid Ads** | Create and optimize paid ad campaigns on Google Ads, Meta, LinkedIn, and other platforms. | `skills/paid-ads` |
|
||||||
| **Plan Writing** | Structured task planning with clear breakdowns, dependencies, and verification criteria. | `skills/plan-writing` |
|
| **Parallel Agents** | Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise. | `skills/parallel-agents` |
|
||||||
| **Planning With Files** | Implements Manus-style file-based planning for complex tasks. | `skills/planning-with-files` |
|
| **Paywall Upgrade CRO** | Optimize in-app paywalls, upgrade screens, and freemium conversion moments. | `skills/paywall-upgrade-cro` |
|
||||||
| **Playwright Automation** | Complete browser automation with Playwright. | `skills/playwright-skill` |
|
| **PDF (Official)** | Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. | `skills/pdf-official` |
|
||||||
| **Popup CRO** | Create and optimize popups, modals, and overlays for conversion. | `skills/popup-cro` |
|
| **Pentest Checklist** | This skill should be used when the user asks to "plan a penetration test", "create a security assessment checklist", "prepare for penetration testing", "define pentest scope", "follow security testing best practices", or needs a structured methodology for penetration testing engagements. | `skills/pentest-checklist` |
|
||||||
| **PowerShell Windows** | PowerShell Windows patterns. Critical pitfalls, operator syntax, error handling. | `skills/powershell-windows` |
|
| **Pentest Commands** | This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "enumerate networks", or needs essential penetration testing command references. | `skills/pentest-commands` |
|
||||||
| **PPTX (Official)** | "Presentation creation, editing, and analysis. | `skills/pptx-official` |
|
| **Performance Profiling** | Performance profiling principles. Measurement, analysis, and optimization techniques. | `skills/performance-profiling` |
|
||||||
| **Pricing Strategy** | Design pricing, packaging, and monetization strategy for SaaS products. | `skills/pricing-strategy` |
|
| **Personal Tool Builder** | Building custom tools. Rapid prototyping, local-first apps, CLI tools. | `skills/personal-tool-builder` |
|
||||||
| **Prisma Expert** | Prisma ORM expert for schema design, migrations, query optimization, relations modeling. | `skills/prisma-expert` |
|
| **Plaid Fintech** | Plaid API for banking. Link token flows, transactions, ACH. | `skills/plaid-fintech` |
|
||||||
| **Privilege Escalation Methods** | This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass-the-ticket", "token impersonation", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems. | `skills/privilege-escalation-methods` |
|
| **Plan Writing** | Structured task planning with clear breakdowns, dependencies, and verification criteria. | `skills/plan-writing` |
|
||||||
| **Product Toolkit** | Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. | `skills/product-manager-toolkit` |
|
| **Planning With Files** | Implements Manus-style file-based planning for complex tasks. | `skills/planning-with-files` |
|
||||||
| **Programmatic SEO** | Build SEO-driven pages at scale using templates and data. | `skills/programmatic-seo` |
|
| **Playwright Automation** | Complete browser automation with Playwright. | `skills/playwright-skill` |
|
||||||
| **Prompt Caching** | Caching strategies for LLM prompts. Anthropic caching, CAG. | `skills/prompt-caching` |
|
| **Popup CRO** | Create and optimize popups, modals, and overlays for conversion. | `skills/popup-cro` |
|
||||||
| **Prompt Engineer** | Designing prompts for LLM applications. Structure, evaluation. | `skills/prompt-engineer` |
|
| **PowerShell Windows** | PowerShell Windows patterns. Critical pitfalls, operator syntax, error handling. | `skills/powershell-windows` |
|
||||||
| **Prompt Engineering** | Expert guide on prompt engineering patterns, best practices, and optimization techniques. | `skills/prompt-engineering` |
|
| **PPTX (Official)** | "Presentation creation, editing, and analysis. | `skills/pptx-official` |
|
||||||
| **Prompt Library** | "Curated collection of high-quality prompts for various use cases. | `skills/prompt-library` |
|
| **Pricing Strategy** | Design pricing, packaging, and monetization strategy for SaaS products. | `skills/pricing-strategy` |
|
||||||
| **Python Patterns** | Python development principles. Framework selection, async patterns, type hints, project structure. | `skills/python-patterns` |
|
| **Prisma Expert** | Prisma ORM expert for schema design, migrations, query optimization, relations modeling. | `skills/prisma-expert` |
|
||||||
| **RAG Engineer** | Building RAG systems. Embedding models, vector databases, chunking. | `skills/rag-engineer` |
|
| **Privilege Escalation Methods** | This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass-the-ticket", "token impersonation", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems. | `skills/privilege-escalation-methods` |
|
||||||
| **RAG Implementation** | RAG patterns. Chunking, embeddings, vector stores. | `skills/rag-implementation` |
|
| **Product Toolkit** | Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. | `skills/product-manager-toolkit` |
|
||||||
| **React Best Practices** | React and Next. | `skills/react-best-practices` |
|
| **Programmatic SEO** | Build SEO-driven pages at scale using templates and data. | `skills/programmatic-seo` |
|
||||||
| **React Patterns** | Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices. | `skills/react-patterns` |
|
| **Prompt Caching** | Caching strategies for LLM prompts. Anthropic caching, CAG. | `skills/prompt-caching` |
|
||||||
| **React UI Patterns** | Modern React UI patterns for loading states, error handling, and data fetching. | `skills/react-ui-patterns` |
|
| **Prompt Engineer** | Designing prompts for LLM applications. Structure, evaluation. | `skills/prompt-engineer` |
|
||||||
| **Research Engineer** | Academic Research Engineer persona with scientific rigor, zero hallucinations, and optimal language selection for high-precision engineering tasks. | `skills/research-engineer` |
|
| **Prompt Engineering** | Expert guide on prompt engineering patterns, best practices, and optimization techniques. | `skills/prompt-engineering` |
|
||||||
| **Receiving Code Review** | Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation. | `skills/receiving-code-review` |
|
| **Prompt Library** | "Curated collection of high-quality prompts for various use cases. | `skills/prompt-library` |
|
||||||
| **Red Team Tactics** | Red team tactics principles based on MITRE ATT&CK. Attack phases, detection evasion, reporting. | `skills/red-team-tactics` |
|
| **Python Patterns** | Python development principles. Framework selection, async patterns, type hints, project structure. | `skills/python-patterns` |
|
||||||
| **Red Team Tools and Methodology** | This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters. | `skills/red-team-tools` |
|
| **RAG Engineer** | Building RAG systems. Embedding models, vector databases, chunking. | `skills/rag-engineer` |
|
||||||
| **Referral Program** | Design referral programs, affiliate programs, and word-of-mouth strategies. | `skills/referral-program` |
|
| **RAG Implementation** | RAG patterns. Chunking, embeddings, vector stores. | `skills/rag-implementation` |
|
||||||
| **Requesting Code Review** | Use when completing tasks, implementing major features, or before merging to verify work meets requirements. | `skills/requesting-code-review` |
|
| **React Best Practices** | React and Next. | `skills/react-best-practices` |
|
||||||
| **Salesforce Development** | Salesforce integration, Apex development, Lightning components. | `skills/salesforce-development` |
|
| **React Patterns** | Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices. | `skills/react-patterns` |
|
||||||
| **Schema Markup** | Add structured data and JSON-LD schema markup for SEO and rich snippets. | `skills/schema-markup` |
|
| **React UI Patterns** | Modern React UI patterns for loading states, error handling, and data fetching. | `skills/react-ui-patterns` |
|
||||||
| **Scroll Experience** | GSAP/Framer scroll-driven storytelling. Parallax effects. | `skills/scroll-experience` |
|
| **Research Engineer** | Academic Research Engineer persona with scientific rigor, zero hallucinations, and optimal language selection for high-precision engineering tasks. | `skills/research-engineer` |
|
||||||
| **Security Scanning Tools** | This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". | `skills/scanning-tools` |
|
| **Receiving Code Review** | Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation. | `skills/receiving-code-review` |
|
||||||
| **Segment CDP** | Segment customer data platform. Event tracking, identity resolution. | `skills/segment-cdp` |
|
| **Red Team Tactics** | Red team tactics principles based on MITRE ATT&CK. Attack phases, detection evasion, reporting. | `skills/red-team-tactics` |
|
||||||
| **Senior Architect** | Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. | `skills/senior-architect` |
|
| **Remotion Best Practices** | Best practices for Remotion - Video creation in React. Includes 28 modular rules for animations, audio, video, captions, 3D, charts, transitions, and more. | `skills/remotion-best-practices` |
|
||||||
| **Senior Fullstack** | Comprehensive fullstack development skill for building complete web applications with React, Next. | `skills/senior-fullstack` |
|
| **Red Team Tools and Methodology** | This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters. | `skills/red-team-tools` |
|
||||||
| **SEO Audit** | Audit technical and on-page SEO issues for better search rankings. | `skills/seo-audit` |
|
| **Referral Program** | Design referral programs, affiliate programs, and word-of-mouth strategies. | `skills/referral-program` |
|
||||||
| **SEO Fundamentals** | SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles. | `skills/seo-fundamentals` |
|
| **Requesting Code Review** | Use when completing tasks, implementing major features, or before merging to verify work meets requirements. | `skills/requesting-code-review` |
|
||||||
| **Server Management** | Server management principles. Process management, monitoring strategy, and scaling decisions. | `skills/server-management` |
|
| **Salesforce Development** | Salesforce integration, Apex development, Lightning components. | `skills/salesforce-development` |
|
||||||
| **Shodan Reconnaissance and Pentesting** | This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan," or "discover IoT devices and open ports. | `skills/shodan-reconnaissance` |
|
| **Schema Markup** | Add structured data and JSON-LD schema markup for SEO and rich snippets. | `skills/schema-markup` |
|
||||||
| **Shopify Apps** | Building Shopify apps. App Bridge, Polaris, webhooks. | `skills/shopify-apps` |
|
| **Scroll Experience** | GSAP/Framer scroll-driven storytelling. Parallax effects. | `skills/scroll-experience` |
|
||||||
| **Shopify Development** | Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. Use when user asks about "shopify app", "checkout extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", or "metafields". | `skills/shopify-development` |
|
| **Security Scanning Tools** | This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". | `skills/scanning-tools` |
|
||||||
| **Signup Flow CRO** | Optimize signup, registration, and trial activation flows for higher conversions. | `skills/signup-flow-cro` |
|
| **Segment CDP** | Segment customer data platform. Event tracking, identity resolution. | `skills/segment-cdp` |
|
||||||
| **Skill Creator** | Guide for creating effective skills. | `skills/skill-creator` |
|
| **Senior Architect** | Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. | `skills/senior-architect` |
|
||||||
| **Skill Developer** | Create and manage Claude Code skills following Anthropic best practices. | `skills/skill-developer` |
|
| **Senior Fullstack** | Comprehensive fullstack development skill for building complete web applications with React, Next. | `skills/senior-fullstack` |
|
||||||
| **Slack Bot Builder** | Production Slack bots. Bolt framework, slash commands, modals. | `skills/slack-bot-builder` |
|
| **SEO Audit** | Audit technical and on-page SEO issues for better search rankings. | `skills/seo-audit` |
|
||||||
| **Slack GIF Creator** | Knowledge and utilities for creating animated GIFs optimized for Slack. | `skills/slack-gif-creator` |
|
| **SEO Fundamentals** | SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles. | `skills/seo-fundamentals` |
|
||||||
| **SMTP Penetration Testing** | This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "assess mail server security". | `skills/smtp-penetration-testing` |
|
| **Server Management** | Server management principles. Process management, monitoring strategy, and scaling decisions. | `skills/server-management` |
|
||||||
| **Social Content** | Create and schedule social media content for LinkedIn, Twitter/X, and other platforms. | `skills/social-content` |
|
| **Shodan Reconnaissance and Pentesting** | This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan," or "discover IoT devices and open ports. | `skills/shodan-reconnaissance` |
|
||||||
| **Software Architecture** | Guide for quality focused software architecture. | `skills/software-architecture` |
|
| **Shopify Apps** | Building Shopify apps. App Bridge, Polaris, webhooks. | `skills/shopify-apps` |
|
||||||
| **SQL Injection Testing** | This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through injection", "detect SQL injection flaws", or "exploit database query vulnerabilities". | `skills/sql-injection-testing` |
|
| **Shopify Development** | Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. Use when user asks about "shopify app", "checkout extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", or "metafields". | `skills/shopify-development` |
|
||||||
| **SQLMap Database Penetration Testing** | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulnerable database," or "perform automated database penetration testing. | `skills/sqlmap-database-pentesting` |
|
| **Signup Flow CRO** | Optimize signup, registration, and trial activation flows for higher conversions. | `skills/signup-flow-cro` |
|
||||||
| **SSH Penetration Testing** | This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "audit SSH security". | `skills/ssh-penetration-testing` |
|
| **Skill Creator** | Guide for creating effective skills. | `skills/skill-creator` |
|
||||||
| **Stripe Integration** | Stripe patterns. Checkout, subscriptions, payment intents, webhooks. | `skills/stripe-integration` |
|
| **Skill Developer** | Create and manage Claude Code skills following Anthropic best practices. | `skills/skill-developer` |
|
||||||
| **Subagent Driven Dev** | Use when executing implementation plans with independent tasks in the current session. | `skills/subagent-driven-development` |
|
| **Slack Bot Builder** | Production Slack bots. Bolt framework, slash commands, modals. | `skills/slack-bot-builder` |
|
||||||
| **Systematic Debugging** | Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes. | `skills/systematic-debugging` |
|
| **Slack GIF Creator** | Knowledge and utilities for creating animated GIFs optimized for Slack. | `skills/slack-gif-creator` |
|
||||||
| **Tailwind Patterns** | Tailwind CSS v4 principles. CSS-first configuration, container queries, design token architecture. | `skills/tailwind-patterns` |
|
| **SMTP Penetration Testing** | This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "assess mail server security". | `skills/smtp-penetration-testing` |
|
||||||
| **TDD** | Use when implementing any feature or bugfix, before writing implementation code. | `skills/test-driven-development` |
|
| **Social Content** | Create and schedule social media content for LinkedIn, Twitter/X, and other platforms. | `skills/social-content` |
|
||||||
| **TDD Workflow** | Test-Driven Development workflow principles. RED-GREEN-REFACTOR cycle. | `skills/tdd-workflow` |
|
| **Software Architecture** | Guide for quality focused software architecture. | `skills/software-architecture` |
|
||||||
| **Telegram Bot Builder** | Building Telegram bots. Bot API, inline mode, payments, Mini Apps. | `skills/telegram-bot-builder` |
|
| **SQL Injection Testing** | This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through injection", "detect SQL injection flaws", or "exploit database query vulnerabilities". | `skills/sql-injection-testing` |
|
||||||
| **Telegram Mini App** | TON Connect, Telegram Mini Apps, wallet integration. | `skills/telegram-mini-app` |
|
| **SQLMap Database Penetration Testing** | This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulnerable database," or "perform automated database penetration testing. | `skills/sqlmap-database-pentesting` |
|
||||||
| **Test Fixing** | Run tests and systematically fix all failing tests using smart error grouping. | `skills/test-fixing` |
|
| **SSH Penetration Testing** | This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "audit SSH security". | `skills/ssh-penetration-testing` |
|
||||||
| **Testing Patterns** | Jest testing patterns, factory functions, mocking strategies, and TDD workflow. | `skills/testing-patterns` |
|
| **Stripe Integration** | Stripe patterns. Checkout, subscriptions, payment intents, webhooks. | `skills/stripe-integration` |
|
||||||
| **Theme Factory** | Toolkit for styling artifacts with a theme. | `skills/theme-factory` |
|
| **Subagent Driven Dev** | Use when executing implementation plans with independent tasks in the current session. | `skills/subagent-driven-development` |
|
||||||
| **Top 100 Vulnerabilities** | This skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about injection attacks", "review access control weaknesses", "analyze API security issues", "assess security misconfigurations", "understand client-side vulnerabilities", "examine mobile and IoT security flaws", or "reference the OWASP-aligned vulnerability taxonomy". | `skills/top-web-vulnerabilities` |
|
| **Systematic Debugging** | Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes. | `skills/systematic-debugging` |
|
||||||
| **Trigger.dev** | Trigger.dev for serverless background jobs. Long-running tasks. | `skills/trigger-dev` |
|
| **Tailwind Patterns** | Tailwind CSS v4 principles. CSS-first configuration, container queries, design token architecture. | `skills/tailwind-patterns` |
|
||||||
| **Twilio Communications** | Twilio for SMS, voice, video. Programmable messaging, OTP. | `skills/twilio-communications` |
|
| **TDD** | Use when implementing any feature or bugfix, before writing implementation code. | `skills/test-driven-development` |
|
||||||
| **TypeScript Expert** | TypeScript expert with deep knowledge of type-level programming, performance optimization, migration strategies. | `skills/typescript-expert` |
|
| **TDD Workflow** | Test-Driven Development workflow principles. RED-GREEN-REFACTOR cycle. | `skills/tdd-workflow` |
|
||||||
| **UI/UX Pro Max** | "UI/UX design intelligence. | `skills/ui-ux-pro-max` |
|
| **Telegram Bot Builder** | Building Telegram bots. Bot API, inline mode, payments, Mini Apps. | `skills/telegram-bot-builder` |
|
||||||
| **Upstash QStash** | Upstash QStash for serverless message queues. | `skills/upstash-qstash` |
|
| **Telegram Mini App** | TON Connect, Telegram Mini Apps, wallet integration. | `skills/telegram-mini-app` |
|
||||||
| **Using Git Worktrees** | Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification. | `skills/using-git-worktrees` |
|
| **Test Fixing** | Run tests and systematically fix all failing tests using smart error grouping. | `skills/test-fixing` |
|
||||||
| **Using Superpowers** | Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions. | `skills/using-superpowers` |
|
| **Testing Patterns** | Jest testing patterns, factory functions, mocking strategies, and TDD workflow. | `skills/testing-patterns` |
|
||||||
| **Vercel Deployment** | Vercel deployment. Edge functions, preview deployments. | `skills/vercel-deployment` |
|
| **Theme Factory** | Toolkit for styling artifacts with a theme. | `skills/theme-factory` |
|
||||||
| **Verification Before Completion** | Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always. | `skills/verification-before-completion` |
|
| **Top 100 Vulnerabilities** | This skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about injection attacks", "review access control weaknesses", "analyze API security issues", "assess security misconfigurations", "understand client-side vulnerabilities", "examine mobile and IoT security flaws", or "reference the OWASP-aligned vulnerability taxonomy". | `skills/top-web-vulnerabilities` |
|
||||||
| **Viral Generator Builder** | Building shareable generators that go viral. | `skills/viral-generator-builder` |
|
| **Trigger.dev** | Trigger.dev for serverless background jobs. Long-running tasks. | `skills/trigger-dev` |
|
||||||
| **Voice Agents** | Voice-based AI assistants. Speech-to-text, real-time conversation. | `skills/voice-agents` |
|
| **Twilio Communications** | Twilio for SMS, voice, video. Programmable messaging, OTP. | `skills/twilio-communications` |
|
||||||
| **Voice AI Development** | Voice AI patterns. Wake words, streaming ASR, emotional TTS. | `skills/voice-ai-development` |
|
| **TypeScript Expert** | TypeScript expert with deep knowledge of type-level programming, performance optimization, migration strategies. | `skills/typescript-expert` |
|
||||||
| **Vulnerability Scanner** | Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping. | `skills/vulnerability-scanner` |
|
| **UI/UX Pro Max** | "UI/UX design intelligence. | `skills/ui-ux-pro-max` |
|
||||||
| **Web Artifacts** | Suite of tools for creating elaborate, multi-component claude. | `skills/web-artifacts-builder` |
|
| **Upstash QStash** | Upstash QStash for serverless message queues. | `skills/upstash-qstash` |
|
||||||
| **Web Design Guidelines** | Review UI code for Web Interface Guidelines compliance. | `skills/web-design-guidelines` |
|
| **Using Git Worktrees** | Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification. | `skills/using-git-worktrees` |
|
||||||
| **Webapp Testing** | Toolkit for interacting with and testing local web applications using Playwright. | `skills/webapp-testing` |
|
| **Using Superpowers** | Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions. | `skills/using-superpowers` |
|
||||||
| **Windows Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," or "perform post-exploitation privilege escalation. | `skills/windows-privilege-escalation` |
|
| **Vercel Deployment** | Vercel deployment. Edge functions, preview deployments. | `skills/vercel-deployment` |
|
||||||
| **Wireshark Network Traffic Analysis** | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anomalies", "investigate suspicious traffic", or "perform protocol analysis". | `skills/wireshark-analysis` |
|
| **Verification Before Completion** | Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always. | `skills/verification-before-completion` |
|
||||||
| **WordPress Penetration Testing** | This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". | `skills/wordpress-penetration-testing` |
|
| **Viral Generator Builder** | Building shareable generators that go viral. | `skills/viral-generator-builder` |
|
||||||
| **Workflow Automation** | "Design and implement automated workflows combining visual logic with custom code. | `skills/workflow-automation` |
|
| **Voice Agents** | Voice-based AI assistants. Speech-to-text, real-time conversation. | `skills/voice-agents` |
|
||||||
| **Writing Plans** | Use when you have a spec or requirements for a multi-step task, before touching code. | `skills/writing-plans` |
|
| **Voice AI Development** | Voice AI patterns. Wake words, streaming ASR, emotional TTS. | `skills/voice-ai-development` |
|
||||||
| **Writing Skills** | Use when creating new skills, editing existing skills, or verifying skills work before deployment. | `skills/writing-skills` |
|
| **Vulnerability Scanner** | Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping. | `skills/vulnerability-scanner` |
|
||||||
| **XLSX (Official)** | "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. | `skills/xlsx-official` |
|
| **Web Artifacts** | Suite of tools for creating elaborate, multi-component claude. | `skills/web-artifacts-builder` |
|
||||||
| **Zapier/Make Patterns** | No-code automation. Zapier, Make, n8n workflows. | `skills/zapier-make-patterns` |
|
| **Web Design Guidelines** | Review UI code for Web Interface Guidelines compliance. | `skills/web-design-guidelines` |
|
||||||
|
| **Webapp Testing** | Toolkit for interacting with and testing local web applications using Playwright. | `skills/webapp-testing` |
|
||||||
|
| **Windows Privilege Escalation** | This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," or "perform post-exploitation privilege escalation. | `skills/windows-privilege-escalation` |
|
||||||
|
| **Wireshark Network Traffic Analysis** | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anomalies", "investigate suspicious traffic", or "perform protocol analysis". | `skills/wireshark-analysis` |
|
||||||
|
| **WordPress Penetration Testing** | This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". | `skills/wordpress-penetration-testing` |
|
||||||
|
| **Workflow Automation** | "Design and implement automated workflows combining visual logic with custom code. | `skills/workflow-automation` |
|
||||||
|
| **Writing Plans** | Use when you have a spec or requirements for a multi-step task, before touching code. | `skills/writing-plans` |
|
||||||
|
| **Writing Skills** | Use when creating new skills, editing existing skills, or verifying skills work before deployment. | `skills/writing-skills` |
|
||||||
|
| **XLSX (Official)** | "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. | `skills/xlsx-official` |
|
||||||
|
| **Zapier/Make Patterns** | No-code automation. Zapier, Make, n8n workflows. | `skills/zapier-make-patterns` |
|
||||||
|
|
||||||
> [!TIP]
|
> [!TIP]
|
||||||
> Use the `validate_skills.py` script in the `scripts/` directory to ensure all skills are properly formatted and ready for use.
|
> Use the `validate_skills.py` script in the `scripts/` directory to ensure all skills are properly formatted and ready for use.
|
||||||
@@ -378,6 +387,7 @@ This collection would not be possible without the incredible work of the Claude
|
|||||||
|
|
||||||
- **[anthropics/skills](https://github.com/anthropics/skills)**: Official Anthropic skills repository - Document manipulation (DOCX, PDF, PPTX, XLSX), Brand Guidelines, Internal Communications.
|
- **[anthropics/skills](https://github.com/anthropics/skills)**: Official Anthropic skills repository - Document manipulation (DOCX, PDF, PPTX, XLSX), Brand Guidelines, Internal Communications.
|
||||||
- **[anthropics/claude-cookbooks](https://github.com/anthropics/claude-cookbooks)**: Official notebooks and recipes for building with Claude.
|
- **[anthropics/claude-cookbooks](https://github.com/anthropics/claude-cookbooks)**: Official notebooks and recipes for building with Claude.
|
||||||
|
- **[remotion-dev/skills](https://github.com/remotion-dev/skills)**: Official Remotion skills - Video creation in React with 28 modular rules.
|
||||||
- **[vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)**: Vercel Labs official skills - React Best Practices, Web Design Guidelines.
|
- **[vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)**: Vercel Labs official skills - React Best Practices, Web Design Guidelines.
|
||||||
- **[openai/skills](https://github.com/openai/skills)**: OpenAI Codex skills catalog - Agent skills, Skill Creator, Concise Planning.
|
- **[openai/skills](https://github.com/openai/skills)**: OpenAI Codex skills catalog - Agent skills, Skill Creator, Concise Planning.
|
||||||
|
|
||||||
@@ -395,6 +405,7 @@ This collection would not be possible without the incredible work of the Claude
|
|||||||
- **[vibeforge1111/vibeship-spawner-skills](https://github.com/vibeforge1111/vibeship-spawner-skills)**: AI Agents, Integrations, Maker Tools (57 skills, Apache 2.0).
|
- **[vibeforge1111/vibeship-spawner-skills](https://github.com/vibeforge1111/vibeship-spawner-skills)**: AI Agents, Integrations, Maker Tools (57 skills, Apache 2.0).
|
||||||
- **[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills)**: Marketing skills for CRO, copywriting, SEO, paid ads, and growth (23 skills, MIT).
|
- **[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills)**: Marketing skills for CRO, copywriting, SEO, paid ads, and growth (23 skills, MIT).
|
||||||
- **[vudovn/antigravity-kit](https://github.com/vudovn/antigravity-kit)**: AI Agent templates with Skills, Agents, and Workflows (33 skills, MIT).
|
- **[vudovn/antigravity-kit](https://github.com/vudovn/antigravity-kit)**: AI Agent templates with Skills, Agents, and Workflows (33 skills, MIT).
|
||||||
|
- **[affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code)**: Complete Claude Code configuration collection from Anthropic hackathon winner - skills only (8 skills, MIT).
|
||||||
|
|
||||||
### Inspirations
|
### Inspirations
|
||||||
|
|
||||||
|
|||||||
584
skills/cc-skill-backend-patterns/SKILL.md
Normal file
584
skills/cc-skill-backend-patterns/SKILL.md
Normal file
@@ -0,0 +1,584 @@
|
|||||||
|
---
|
||||||
|
name: backend-patterns
|
||||||
|
description: Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Backend Development Patterns
|
||||||
|
|
||||||
|
Backend architecture patterns and best practices for scalable server-side applications.
|
||||||
|
|
||||||
|
## API Design Patterns
|
||||||
|
|
||||||
|
### RESTful API Structure
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ Resource-based URLs
|
||||||
|
GET /api/markets # List resources
|
||||||
|
GET /api/markets/:id # Get single resource
|
||||||
|
POST /api/markets # Create resource
|
||||||
|
PUT /api/markets/:id # Replace resource
|
||||||
|
PATCH /api/markets/:id # Update resource
|
||||||
|
DELETE /api/markets/:id # Delete resource
|
||||||
|
|
||||||
|
// ✅ Query parameters for filtering, sorting, pagination
|
||||||
|
GET /api/markets?status=active&sort=volume&limit=20&offset=0
|
||||||
|
```
|
||||||
|
|
||||||
|
### Repository Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Abstract data access logic
|
||||||
|
interface MarketRepository {
|
||||||
|
findAll(filters?: MarketFilters): Promise<Market[]>
|
||||||
|
findById(id: string): Promise<Market | null>
|
||||||
|
create(data: CreateMarketDto): Promise<Market>
|
||||||
|
update(id: string, data: UpdateMarketDto): Promise<Market>
|
||||||
|
delete(id: string): Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
class SupabaseMarketRepository implements MarketRepository {
|
||||||
|
async findAll(filters?: MarketFilters): Promise<Market[]> {
|
||||||
|
let query = supabase.from('markets').select('*')
|
||||||
|
|
||||||
|
if (filters?.status) {
|
||||||
|
query = query.eq('status', filters.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filters?.limit) {
|
||||||
|
query = query.limit(filters.limit)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data, error } = await query
|
||||||
|
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
// Other methods...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Service Layer Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Business logic separated from data access
|
||||||
|
class MarketService {
|
||||||
|
constructor(private marketRepo: MarketRepository) {}
|
||||||
|
|
||||||
|
async searchMarkets(query: string, limit: number = 10): Promise<Market[]> {
|
||||||
|
// Business logic
|
||||||
|
const embedding = await generateEmbedding(query)
|
||||||
|
const results = await this.vectorSearch(embedding, limit)
|
||||||
|
|
||||||
|
// Fetch full data
|
||||||
|
const markets = await this.marketRepo.findByIds(results.map(r => r.id))
|
||||||
|
|
||||||
|
// Sort by similarity
|
||||||
|
return markets.sort((a, b) => {
|
||||||
|
const scoreA = results.find(r => r.id === a.id)?.score || 0
|
||||||
|
const scoreB = results.find(r => r.id === b.id)?.score || 0
|
||||||
|
return scoreA - scoreB
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private async vectorSearch(embedding: number[], limit: number) {
|
||||||
|
// Vector search implementation
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Middleware Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Request/response processing pipeline
|
||||||
|
export function withAuth(handler: NextApiHandler): NextApiHandler {
|
||||||
|
return async (req, res) => {
|
||||||
|
const token = req.headers.authorization?.replace('Bearer ', '')
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
return res.status(401).json({ error: 'Unauthorized' })
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const user = await verifyToken(token)
|
||||||
|
req.user = user
|
||||||
|
return handler(req, res)
|
||||||
|
} catch (error) {
|
||||||
|
return res.status(401).json({ error: 'Invalid token' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
export default withAuth(async (req, res) => {
|
||||||
|
// Handler has access to req.user
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Database Patterns
|
||||||
|
|
||||||
|
### Query Optimization
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Select only needed columns
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('markets')
|
||||||
|
.select('id, name, status, volume')
|
||||||
|
.eq('status', 'active')
|
||||||
|
.order('volume', { ascending: false })
|
||||||
|
.limit(10)
|
||||||
|
|
||||||
|
// ❌ BAD: Select everything
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('markets')
|
||||||
|
.select('*')
|
||||||
|
```
|
||||||
|
|
||||||
|
### N+1 Query Prevention
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ❌ BAD: N+1 query problem
|
||||||
|
const markets = await getMarkets()
|
||||||
|
for (const market of markets) {
|
||||||
|
market.creator = await getUser(market.creator_id) // N queries
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ GOOD: Batch fetch
|
||||||
|
const markets = await getMarkets()
|
||||||
|
const creatorIds = markets.map(m => m.creator_id)
|
||||||
|
const creators = await getUsers(creatorIds) // 1 query
|
||||||
|
const creatorMap = new Map(creators.map(c => [c.id, c]))
|
||||||
|
|
||||||
|
markets.forEach(market => {
|
||||||
|
market.creator = creatorMap.get(market.creator_id)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Transaction Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
async function createMarketWithPosition(
|
||||||
|
marketData: CreateMarketDto,
|
||||||
|
positionData: CreatePositionDto
|
||||||
|
) {
|
||||||
|
// Use Supabase transaction
|
||||||
|
const { data, error } = await supabase.rpc('create_market_with_position', {
|
||||||
|
market_data: marketData,
|
||||||
|
position_data: positionData
|
||||||
|
})
|
||||||
|
|
||||||
|
if (error) throw new Error('Transaction failed')
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
// SQL function in Supabase
|
||||||
|
CREATE OR REPLACE FUNCTION create_market_with_position(
|
||||||
|
market_data jsonb,
|
||||||
|
position_data jsonb
|
||||||
|
)
|
||||||
|
RETURNS jsonb
|
||||||
|
LANGUAGE plpgsql
|
||||||
|
AS $$
|
||||||
|
BEGIN
|
||||||
|
-- Start transaction automatically
|
||||||
|
INSERT INTO markets VALUES (market_data);
|
||||||
|
INSERT INTO positions VALUES (position_data);
|
||||||
|
RETURN jsonb_build_object('success', true);
|
||||||
|
EXCEPTION
|
||||||
|
WHEN OTHERS THEN
|
||||||
|
-- Rollback happens automatically
|
||||||
|
RETURN jsonb_build_object('success', false, 'error', SQLERRM);
|
||||||
|
END;
|
||||||
|
$$;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Caching Strategies
|
||||||
|
|
||||||
|
### Redis Caching Layer
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
class CachedMarketRepository implements MarketRepository {
|
||||||
|
constructor(
|
||||||
|
private baseRepo: MarketRepository,
|
||||||
|
private redis: RedisClient
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async findById(id: string): Promise<Market | null> {
|
||||||
|
// Check cache first
|
||||||
|
const cached = await this.redis.get(`market:${id}`)
|
||||||
|
|
||||||
|
if (cached) {
|
||||||
|
return JSON.parse(cached)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache miss - fetch from database
|
||||||
|
const market = await this.baseRepo.findById(id)
|
||||||
|
|
||||||
|
if (market) {
|
||||||
|
// Cache for 5 minutes
|
||||||
|
await this.redis.setex(`market:${id}`, 300, JSON.stringify(market))
|
||||||
|
}
|
||||||
|
|
||||||
|
return market
|
||||||
|
}
|
||||||
|
|
||||||
|
async invalidateCache(id: string): Promise<void> {
|
||||||
|
await this.redis.del(`market:${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cache-Aside Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
async function getMarketWithCache(id: string): Promise<Market> {
|
||||||
|
const cacheKey = `market:${id}`
|
||||||
|
|
||||||
|
// Try cache
|
||||||
|
const cached = await redis.get(cacheKey)
|
||||||
|
if (cached) return JSON.parse(cached)
|
||||||
|
|
||||||
|
// Cache miss - fetch from DB
|
||||||
|
const market = await db.markets.findUnique({ where: { id } })
|
||||||
|
|
||||||
|
if (!market) throw new Error('Market not found')
|
||||||
|
|
||||||
|
// Update cache
|
||||||
|
await redis.setex(cacheKey, 300, JSON.stringify(market))
|
||||||
|
|
||||||
|
return market
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error Handling Patterns
|
||||||
|
|
||||||
|
### Centralized Error Handler
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
class ApiError extends Error {
|
||||||
|
constructor(
|
||||||
|
public statusCode: number,
|
||||||
|
public message: string,
|
||||||
|
public isOperational = true
|
||||||
|
) {
|
||||||
|
super(message)
|
||||||
|
Object.setPrototypeOf(this, ApiError.prototype)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function errorHandler(error: unknown, req: Request): Response {
|
||||||
|
if (error instanceof ApiError) {
|
||||||
|
return NextResponse.json({
|
||||||
|
success: false,
|
||||||
|
error: error.message
|
||||||
|
}, { status: error.statusCode })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return NextResponse.json({
|
||||||
|
success: false,
|
||||||
|
error: 'Validation failed',
|
||||||
|
details: error.errors
|
||||||
|
}, { status: 400 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Log unexpected errors
|
||||||
|
console.error('Unexpected error:', error)
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
success: false,
|
||||||
|
error: 'Internal server error'
|
||||||
|
}, { status: 500 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
try {
|
||||||
|
const data = await fetchData()
|
||||||
|
return NextResponse.json({ success: true, data })
|
||||||
|
} catch (error) {
|
||||||
|
return errorHandler(error, request)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Retry with Exponential Backoff
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
async function fetchWithRetry<T>(
|
||||||
|
fn: () => Promise<T>,
|
||||||
|
maxRetries = 3
|
||||||
|
): Promise<T> {
|
||||||
|
let lastError: Error
|
||||||
|
|
||||||
|
for (let i = 0; i < maxRetries; i++) {
|
||||||
|
try {
|
||||||
|
return await fn()
|
||||||
|
} catch (error) {
|
||||||
|
lastError = error as Error
|
||||||
|
|
||||||
|
if (i < maxRetries - 1) {
|
||||||
|
// Exponential backoff: 1s, 2s, 4s
|
||||||
|
const delay = Math.pow(2, i) * 1000
|
||||||
|
await new Promise(resolve => setTimeout(resolve, delay))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
throw lastError!
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
const data = await fetchWithRetry(() => fetchFromAPI())
|
||||||
|
```
|
||||||
|
|
||||||
|
## Authentication & Authorization
|
||||||
|
|
||||||
|
### JWT Token Validation
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import jwt from 'jsonwebtoken'
|
||||||
|
|
||||||
|
interface JWTPayload {
|
||||||
|
userId: string
|
||||||
|
email: string
|
||||||
|
role: 'admin' | 'user'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function verifyToken(token: string): JWTPayload {
|
||||||
|
try {
|
||||||
|
const payload = jwt.verify(token, process.env.JWT_SECRET!) as JWTPayload
|
||||||
|
return payload
|
||||||
|
} catch (error) {
|
||||||
|
throw new ApiError(401, 'Invalid token')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function requireAuth(request: Request) {
|
||||||
|
const token = request.headers.get('authorization')?.replace('Bearer ', '')
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
throw new ApiError(401, 'Missing authorization token')
|
||||||
|
}
|
||||||
|
|
||||||
|
return verifyToken(token)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage in API route
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const user = await requireAuth(request)
|
||||||
|
|
||||||
|
const data = await getDataForUser(user.userId)
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true, data })
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Role-Based Access Control
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type Permission = 'read' | 'write' | 'delete' | 'admin'
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: string
|
||||||
|
role: 'admin' | 'moderator' | 'user'
|
||||||
|
}
|
||||||
|
|
||||||
|
const rolePermissions: Record<User['role'], Permission[]> = {
|
||||||
|
admin: ['read', 'write', 'delete', 'admin'],
|
||||||
|
moderator: ['read', 'write', 'delete'],
|
||||||
|
user: ['read', 'write']
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasPermission(user: User, permission: Permission): boolean {
|
||||||
|
return rolePermissions[user.role].includes(permission)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function requirePermission(permission: Permission) {
|
||||||
|
return async (request: Request) => {
|
||||||
|
const user = await requireAuth(request)
|
||||||
|
|
||||||
|
if (!hasPermission(user, permission)) {
|
||||||
|
throw new ApiError(403, 'Insufficient permissions')
|
||||||
|
}
|
||||||
|
|
||||||
|
return user
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
export const DELETE = requirePermission('delete')(async (request: Request) => {
|
||||||
|
// Handler with permission check
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rate Limiting
|
||||||
|
|
||||||
|
### Simple In-Memory Rate Limiter
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
class RateLimiter {
|
||||||
|
private requests = new Map<string, number[]>()
|
||||||
|
|
||||||
|
async checkLimit(
|
||||||
|
identifier: string,
|
||||||
|
maxRequests: number,
|
||||||
|
windowMs: number
|
||||||
|
): Promise<boolean> {
|
||||||
|
const now = Date.now()
|
||||||
|
const requests = this.requests.get(identifier) || []
|
||||||
|
|
||||||
|
// Remove old requests outside window
|
||||||
|
const recentRequests = requests.filter(time => now - time < windowMs)
|
||||||
|
|
||||||
|
if (recentRequests.length >= maxRequests) {
|
||||||
|
return false // Rate limit exceeded
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add current request
|
||||||
|
recentRequests.push(now)
|
||||||
|
this.requests.set(identifier, recentRequests)
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const limiter = new RateLimiter()
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const ip = request.headers.get('x-forwarded-for') || 'unknown'
|
||||||
|
|
||||||
|
const allowed = await limiter.checkLimit(ip, 100, 60000) // 100 req/min
|
||||||
|
|
||||||
|
if (!allowed) {
|
||||||
|
return NextResponse.json({
|
||||||
|
error: 'Rate limit exceeded'
|
||||||
|
}, { status: 429 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Continue with request
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Background Jobs & Queues
|
||||||
|
|
||||||
|
### Simple Queue Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
class JobQueue<T> {
|
||||||
|
private queue: T[] = []
|
||||||
|
private processing = false
|
||||||
|
|
||||||
|
async add(job: T): Promise<void> {
|
||||||
|
this.queue.push(job)
|
||||||
|
|
||||||
|
if (!this.processing) {
|
||||||
|
this.process()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async process(): Promise<void> {
|
||||||
|
this.processing = true
|
||||||
|
|
||||||
|
while (this.queue.length > 0) {
|
||||||
|
const job = this.queue.shift()!
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.execute(job)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Job failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.processing = false
|
||||||
|
}
|
||||||
|
|
||||||
|
private async execute(job: T): Promise<void> {
|
||||||
|
// Job execution logic
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage for indexing markets
|
||||||
|
interface IndexJob {
|
||||||
|
marketId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const indexQueue = new JobQueue<IndexJob>()
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const { marketId } = await request.json()
|
||||||
|
|
||||||
|
// Add to queue instead of blocking
|
||||||
|
await indexQueue.add({ marketId })
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true, message: 'Job queued' })
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Logging & Monitoring
|
||||||
|
|
||||||
|
### Structured Logging
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface LogContext {
|
||||||
|
userId?: string
|
||||||
|
requestId?: string
|
||||||
|
method?: string
|
||||||
|
path?: string
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
class Logger {
|
||||||
|
log(level: 'info' | 'warn' | 'error', message: string, context?: LogContext) {
|
||||||
|
const entry = {
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
level,
|
||||||
|
message,
|
||||||
|
...context
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(JSON.stringify(entry))
|
||||||
|
}
|
||||||
|
|
||||||
|
info(message: string, context?: LogContext) {
|
||||||
|
this.log('info', message, context)
|
||||||
|
}
|
||||||
|
|
||||||
|
warn(message: string, context?: LogContext) {
|
||||||
|
this.log('warn', message, context)
|
||||||
|
}
|
||||||
|
|
||||||
|
error(message: string, error: Error, context?: LogContext) {
|
||||||
|
this.log('error', message, {
|
||||||
|
...context,
|
||||||
|
error: error.message,
|
||||||
|
stack: error.stack
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const logger = new Logger()
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const requestId = crypto.randomUUID()
|
||||||
|
|
||||||
|
logger.info('Fetching markets', {
|
||||||
|
requestId,
|
||||||
|
method: 'GET',
|
||||||
|
path: '/api/markets'
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const markets = await fetchMarkets()
|
||||||
|
return NextResponse.json({ success: true, data: markets })
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Failed to fetch markets', error as Error, { requestId })
|
||||||
|
return NextResponse.json({ error: 'Internal error' }, { status: 500 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remember**: Backend patterns enable scalable, maintainable server-side applications. Choose patterns that fit your complexity level.
|
||||||
431
skills/cc-skill-clickhouse-io/SKILL.md
Normal file
431
skills/cc-skill-clickhouse-io/SKILL.md
Normal file
@@ -0,0 +1,431 @@
|
|||||||
|
---
|
||||||
|
name: clickhouse-io
|
||||||
|
description: ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads.
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# ClickHouse Analytics Patterns
|
||||||
|
|
||||||
|
ClickHouse-specific patterns for high-performance analytics and data engineering.
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
ClickHouse is a column-oriented database management system (DBMS) for online analytical processing (OLAP). It's optimized for fast analytical queries on large datasets.
|
||||||
|
|
||||||
|
**Key Features:**
|
||||||
|
- Column-oriented storage
|
||||||
|
- Data compression
|
||||||
|
- Parallel query execution
|
||||||
|
- Distributed queries
|
||||||
|
- Real-time analytics
|
||||||
|
|
||||||
|
## Table Design Patterns
|
||||||
|
|
||||||
|
### MergeTree Engine (Most Common)
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE markets_analytics (
|
||||||
|
date Date,
|
||||||
|
market_id String,
|
||||||
|
market_name String,
|
||||||
|
volume UInt64,
|
||||||
|
trades UInt32,
|
||||||
|
unique_traders UInt32,
|
||||||
|
avg_trade_size Float64,
|
||||||
|
created_at DateTime
|
||||||
|
) ENGINE = MergeTree()
|
||||||
|
PARTITION BY toYYYYMM(date)
|
||||||
|
ORDER BY (date, market_id)
|
||||||
|
SETTINGS index_granularity = 8192;
|
||||||
|
```
|
||||||
|
|
||||||
|
### ReplacingMergeTree (Deduplication)
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- For data that may have duplicates (e.g., from multiple sources)
|
||||||
|
CREATE TABLE user_events (
|
||||||
|
event_id String,
|
||||||
|
user_id String,
|
||||||
|
event_type String,
|
||||||
|
timestamp DateTime,
|
||||||
|
properties String
|
||||||
|
) ENGINE = ReplacingMergeTree()
|
||||||
|
PARTITION BY toYYYYMM(timestamp)
|
||||||
|
ORDER BY (user_id, event_id, timestamp)
|
||||||
|
PRIMARY KEY (user_id, event_id);
|
||||||
|
```
|
||||||
|
|
||||||
|
### AggregatingMergeTree (Pre-aggregation)
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- For maintaining aggregated metrics
|
||||||
|
CREATE TABLE market_stats_hourly (
|
||||||
|
hour DateTime,
|
||||||
|
market_id String,
|
||||||
|
total_volume AggregateFunction(sum, UInt64),
|
||||||
|
total_trades AggregateFunction(count, UInt32),
|
||||||
|
unique_users AggregateFunction(uniq, String)
|
||||||
|
) ENGINE = AggregatingMergeTree()
|
||||||
|
PARTITION BY toYYYYMM(hour)
|
||||||
|
ORDER BY (hour, market_id);
|
||||||
|
|
||||||
|
-- Query aggregated data
|
||||||
|
SELECT
|
||||||
|
hour,
|
||||||
|
market_id,
|
||||||
|
sumMerge(total_volume) AS volume,
|
||||||
|
countMerge(total_trades) AS trades,
|
||||||
|
uniqMerge(unique_users) AS users
|
||||||
|
FROM market_stats_hourly
|
||||||
|
WHERE hour >= toStartOfHour(now() - INTERVAL 24 HOUR)
|
||||||
|
GROUP BY hour, market_id
|
||||||
|
ORDER BY hour DESC;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Query Optimization Patterns
|
||||||
|
|
||||||
|
### Efficient Filtering
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- ✅ GOOD: Use indexed columns first
|
||||||
|
SELECT *
|
||||||
|
FROM markets_analytics
|
||||||
|
WHERE date >= '2025-01-01'
|
||||||
|
AND market_id = 'market-123'
|
||||||
|
AND volume > 1000
|
||||||
|
ORDER BY date DESC
|
||||||
|
LIMIT 100;
|
||||||
|
|
||||||
|
-- ❌ BAD: Filter on non-indexed columns first
|
||||||
|
SELECT *
|
||||||
|
FROM markets_analytics
|
||||||
|
WHERE volume > 1000
|
||||||
|
AND market_name LIKE '%election%'
|
||||||
|
AND date >= '2025-01-01';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Aggregations
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- ✅ GOOD: Use ClickHouse-specific aggregation functions
|
||||||
|
SELECT
|
||||||
|
toStartOfDay(created_at) AS day,
|
||||||
|
market_id,
|
||||||
|
sum(volume) AS total_volume,
|
||||||
|
count() AS total_trades,
|
||||||
|
uniq(trader_id) AS unique_traders,
|
||||||
|
avg(trade_size) AS avg_size
|
||||||
|
FROM trades
|
||||||
|
WHERE created_at >= today() - INTERVAL 7 DAY
|
||||||
|
GROUP BY day, market_id
|
||||||
|
ORDER BY day DESC, total_volume DESC;
|
||||||
|
|
||||||
|
-- ✅ Use quantile for percentiles (more efficient than percentile)
|
||||||
|
SELECT
|
||||||
|
quantile(0.50)(trade_size) AS median,
|
||||||
|
quantile(0.95)(trade_size) AS p95,
|
||||||
|
quantile(0.99)(trade_size) AS p99
|
||||||
|
FROM trades
|
||||||
|
WHERE created_at >= now() - INTERVAL 1 HOUR;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Window Functions
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Calculate running totals
|
||||||
|
SELECT
|
||||||
|
date,
|
||||||
|
market_id,
|
||||||
|
volume,
|
||||||
|
sum(volume) OVER (
|
||||||
|
PARTITION BY market_id
|
||||||
|
ORDER BY date
|
||||||
|
ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
|
||||||
|
) AS cumulative_volume
|
||||||
|
FROM markets_analytics
|
||||||
|
WHERE date >= today() - INTERVAL 30 DAY
|
||||||
|
ORDER BY market_id, date;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Data Insertion Patterns
|
||||||
|
|
||||||
|
### Bulk Insert (Recommended)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { ClickHouse } from 'clickhouse'
|
||||||
|
|
||||||
|
const clickhouse = new ClickHouse({
|
||||||
|
url: process.env.CLICKHOUSE_URL,
|
||||||
|
port: 8123,
|
||||||
|
basicAuth: {
|
||||||
|
username: process.env.CLICKHOUSE_USER,
|
||||||
|
password: process.env.CLICKHOUSE_PASSWORD
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// ✅ Batch insert (efficient)
|
||||||
|
async function bulkInsertTrades(trades: Trade[]) {
|
||||||
|
const values = trades.map(trade => `(
|
||||||
|
'${trade.id}',
|
||||||
|
'${trade.market_id}',
|
||||||
|
'${trade.user_id}',
|
||||||
|
${trade.amount},
|
||||||
|
'${trade.timestamp.toISOString()}'
|
||||||
|
)`).join(',')
|
||||||
|
|
||||||
|
await clickhouse.query(`
|
||||||
|
INSERT INTO trades (id, market_id, user_id, amount, timestamp)
|
||||||
|
VALUES ${values}
|
||||||
|
`).toPromise()
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ Individual inserts (slow)
|
||||||
|
async function insertTrade(trade: Trade) {
|
||||||
|
// Don't do this in a loop!
|
||||||
|
await clickhouse.query(`
|
||||||
|
INSERT INTO trades VALUES ('${trade.id}', ...)
|
||||||
|
`).toPromise()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Streaming Insert
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// For continuous data ingestion
|
||||||
|
import { createWriteStream } from 'fs'
|
||||||
|
import { pipeline } from 'stream/promises'
|
||||||
|
|
||||||
|
async function streamInserts() {
|
||||||
|
const stream = clickhouse.insert('trades').stream()
|
||||||
|
|
||||||
|
for await (const batch of dataSource) {
|
||||||
|
stream.write(batch)
|
||||||
|
}
|
||||||
|
|
||||||
|
await stream.end()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Materialized Views
|
||||||
|
|
||||||
|
### Real-time Aggregations
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Create materialized view for hourly stats
|
||||||
|
CREATE MATERIALIZED VIEW market_stats_hourly_mv
|
||||||
|
TO market_stats_hourly
|
||||||
|
AS SELECT
|
||||||
|
toStartOfHour(timestamp) AS hour,
|
||||||
|
market_id,
|
||||||
|
sumState(amount) AS total_volume,
|
||||||
|
countState() AS total_trades,
|
||||||
|
uniqState(user_id) AS unique_users
|
||||||
|
FROM trades
|
||||||
|
GROUP BY hour, market_id;
|
||||||
|
|
||||||
|
-- Query the materialized view
|
||||||
|
SELECT
|
||||||
|
hour,
|
||||||
|
market_id,
|
||||||
|
sumMerge(total_volume) AS volume,
|
||||||
|
countMerge(total_trades) AS trades,
|
||||||
|
uniqMerge(unique_users) AS users
|
||||||
|
FROM market_stats_hourly
|
||||||
|
WHERE hour >= now() - INTERVAL 24 HOUR
|
||||||
|
GROUP BY hour, market_id;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Performance Monitoring
|
||||||
|
|
||||||
|
### Query Performance
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Check slow queries
|
||||||
|
SELECT
|
||||||
|
query_id,
|
||||||
|
user,
|
||||||
|
query,
|
||||||
|
query_duration_ms,
|
||||||
|
read_rows,
|
||||||
|
read_bytes,
|
||||||
|
memory_usage
|
||||||
|
FROM system.query_log
|
||||||
|
WHERE type = 'QueryFinish'
|
||||||
|
AND query_duration_ms > 1000
|
||||||
|
AND event_time >= now() - INTERVAL 1 HOUR
|
||||||
|
ORDER BY query_duration_ms DESC
|
||||||
|
LIMIT 10;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Table Statistics
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Check table sizes
|
||||||
|
SELECT
|
||||||
|
database,
|
||||||
|
table,
|
||||||
|
formatReadableSize(sum(bytes)) AS size,
|
||||||
|
sum(rows) AS rows,
|
||||||
|
max(modification_time) AS latest_modification
|
||||||
|
FROM system.parts
|
||||||
|
WHERE active
|
||||||
|
GROUP BY database, table
|
||||||
|
ORDER BY sum(bytes) DESC;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Analytics Queries
|
||||||
|
|
||||||
|
### Time Series Analysis
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Daily active users
|
||||||
|
SELECT
|
||||||
|
toDate(timestamp) AS date,
|
||||||
|
uniq(user_id) AS daily_active_users
|
||||||
|
FROM events
|
||||||
|
WHERE timestamp >= today() - INTERVAL 30 DAY
|
||||||
|
GROUP BY date
|
||||||
|
ORDER BY date;
|
||||||
|
|
||||||
|
-- Retention analysis
|
||||||
|
SELECT
|
||||||
|
signup_date,
|
||||||
|
countIf(days_since_signup = 0) AS day_0,
|
||||||
|
countIf(days_since_signup = 1) AS day_1,
|
||||||
|
countIf(days_since_signup = 7) AS day_7,
|
||||||
|
countIf(days_since_signup = 30) AS day_30
|
||||||
|
FROM (
|
||||||
|
SELECT
|
||||||
|
user_id,
|
||||||
|
min(toDate(timestamp)) AS signup_date,
|
||||||
|
toDate(timestamp) AS activity_date,
|
||||||
|
dateDiff('day', signup_date, activity_date) AS days_since_signup
|
||||||
|
FROM events
|
||||||
|
GROUP BY user_id, activity_date
|
||||||
|
)
|
||||||
|
GROUP BY signup_date
|
||||||
|
ORDER BY signup_date DESC;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Funnel Analysis
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- Conversion funnel
|
||||||
|
SELECT
|
||||||
|
countIf(step = 'viewed_market') AS viewed,
|
||||||
|
countIf(step = 'clicked_trade') AS clicked,
|
||||||
|
countIf(step = 'completed_trade') AS completed,
|
||||||
|
round(clicked / viewed * 100, 2) AS view_to_click_rate,
|
||||||
|
round(completed / clicked * 100, 2) AS click_to_completion_rate
|
||||||
|
FROM (
|
||||||
|
SELECT
|
||||||
|
user_id,
|
||||||
|
session_id,
|
||||||
|
event_type AS step
|
||||||
|
FROM events
|
||||||
|
WHERE event_date = today()
|
||||||
|
)
|
||||||
|
GROUP BY session_id;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cohort Analysis
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- User cohorts by signup month
|
||||||
|
SELECT
|
||||||
|
toStartOfMonth(signup_date) AS cohort,
|
||||||
|
toStartOfMonth(activity_date) AS month,
|
||||||
|
dateDiff('month', cohort, month) AS months_since_signup,
|
||||||
|
count(DISTINCT user_id) AS active_users
|
||||||
|
FROM (
|
||||||
|
SELECT
|
||||||
|
user_id,
|
||||||
|
min(toDate(timestamp)) OVER (PARTITION BY user_id) AS signup_date,
|
||||||
|
toDate(timestamp) AS activity_date
|
||||||
|
FROM events
|
||||||
|
)
|
||||||
|
GROUP BY cohort, month, months_since_signup
|
||||||
|
ORDER BY cohort, months_since_signup;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Data Pipeline Patterns
|
||||||
|
|
||||||
|
### ETL Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Extract, Transform, Load
|
||||||
|
async function etlPipeline() {
|
||||||
|
// 1. Extract from source
|
||||||
|
const rawData = await extractFromPostgres()
|
||||||
|
|
||||||
|
// 2. Transform
|
||||||
|
const transformed = rawData.map(row => ({
|
||||||
|
date: new Date(row.created_at).toISOString().split('T')[0],
|
||||||
|
market_id: row.market_slug,
|
||||||
|
volume: parseFloat(row.total_volume),
|
||||||
|
trades: parseInt(row.trade_count)
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 3. Load to ClickHouse
|
||||||
|
await bulkInsertToClickHouse(transformed)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run periodically
|
||||||
|
setInterval(etlPipeline, 60 * 60 * 1000) // Every hour
|
||||||
|
```
|
||||||
|
|
||||||
|
### Change Data Capture (CDC)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Listen to PostgreSQL changes and sync to ClickHouse
|
||||||
|
import { Client } from 'pg'
|
||||||
|
|
||||||
|
const pgClient = new Client({ connectionString: process.env.DATABASE_URL })
|
||||||
|
|
||||||
|
pgClient.query('LISTEN market_updates')
|
||||||
|
|
||||||
|
pgClient.on('notification', async (msg) => {
|
||||||
|
const update = JSON.parse(msg.payload)
|
||||||
|
|
||||||
|
await clickhouse.insert('market_updates', [
|
||||||
|
{
|
||||||
|
market_id: update.id,
|
||||||
|
event_type: update.operation, // INSERT, UPDATE, DELETE
|
||||||
|
timestamp: new Date(),
|
||||||
|
data: JSON.stringify(update.new_data)
|
||||||
|
}
|
||||||
|
])
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
### 1. Partitioning Strategy
|
||||||
|
- Partition by time (usually month or day)
|
||||||
|
- Avoid too many partitions (performance impact)
|
||||||
|
- Use DATE type for partition key
|
||||||
|
|
||||||
|
### 2. Ordering Key
|
||||||
|
- Put most frequently filtered columns first
|
||||||
|
- Consider cardinality (high cardinality first)
|
||||||
|
- Order impacts compression
|
||||||
|
|
||||||
|
### 3. Data Types
|
||||||
|
- Use smallest appropriate type (UInt32 vs UInt64)
|
||||||
|
- Use LowCardinality for repeated strings
|
||||||
|
- Use Enum for categorical data
|
||||||
|
|
||||||
|
### 4. Avoid
|
||||||
|
- SELECT * (specify columns)
|
||||||
|
- FINAL (merge data before query instead)
|
||||||
|
- Too many JOINs (denormalize for analytics)
|
||||||
|
- Small frequent inserts (batch instead)
|
||||||
|
|
||||||
|
### 5. Monitoring
|
||||||
|
- Track query performance
|
||||||
|
- Monitor disk usage
|
||||||
|
- Check merge operations
|
||||||
|
- Review slow query log
|
||||||
|
|
||||||
|
**Remember**: ClickHouse excels at analytical workloads. Design tables for your query patterns, batch inserts, and leverage materialized views for real-time aggregations.
|
||||||
522
skills/cc-skill-coding-standards/SKILL.md
Normal file
522
skills/cc-skill-coding-standards/SKILL.md
Normal file
@@ -0,0 +1,522 @@
|
|||||||
|
---
|
||||||
|
name: coding-standards
|
||||||
|
description: Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Coding Standards & Best Practices
|
||||||
|
|
||||||
|
Universal coding standards applicable across all projects.
|
||||||
|
|
||||||
|
## Code Quality Principles
|
||||||
|
|
||||||
|
### 1. Readability First
|
||||||
|
- Code is read more than written
|
||||||
|
- Clear variable and function names
|
||||||
|
- Self-documenting code preferred over comments
|
||||||
|
- Consistent formatting
|
||||||
|
|
||||||
|
### 2. KISS (Keep It Simple, Stupid)
|
||||||
|
- Simplest solution that works
|
||||||
|
- Avoid over-engineering
|
||||||
|
- No premature optimization
|
||||||
|
- Easy to understand > clever code
|
||||||
|
|
||||||
|
### 3. DRY (Don't Repeat Yourself)
|
||||||
|
- Extract common logic into functions
|
||||||
|
- Create reusable components
|
||||||
|
- Share utilities across modules
|
||||||
|
- Avoid copy-paste programming
|
||||||
|
|
||||||
|
### 4. YAGNI (You Aren't Gonna Need It)
|
||||||
|
- Don't build features before they're needed
|
||||||
|
- Avoid speculative generality
|
||||||
|
- Add complexity only when required
|
||||||
|
- Start simple, refactor when needed
|
||||||
|
|
||||||
|
## TypeScript/JavaScript Standards
|
||||||
|
|
||||||
|
### Variable Naming
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Descriptive names
|
||||||
|
const marketSearchQuery = 'election'
|
||||||
|
const isUserAuthenticated = true
|
||||||
|
const totalRevenue = 1000
|
||||||
|
|
||||||
|
// ❌ BAD: Unclear names
|
||||||
|
const q = 'election'
|
||||||
|
const flag = true
|
||||||
|
const x = 1000
|
||||||
|
```
|
||||||
|
|
||||||
|
### Function Naming
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Verb-noun pattern
|
||||||
|
async function fetchMarketData(marketId: string) { }
|
||||||
|
function calculateSimilarity(a: number[], b: number[]) { }
|
||||||
|
function isValidEmail(email: string): boolean { }
|
||||||
|
|
||||||
|
// ❌ BAD: Unclear or noun-only
|
||||||
|
async function market(id: string) { }
|
||||||
|
function similarity(a, b) { }
|
||||||
|
function email(e) { }
|
||||||
|
```
|
||||||
|
|
||||||
|
### Immutability Pattern (CRITICAL)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ ALWAYS use spread operator
|
||||||
|
const updatedUser = {
|
||||||
|
...user,
|
||||||
|
name: 'New Name'
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedArray = [...items, newItem]
|
||||||
|
|
||||||
|
// ❌ NEVER mutate directly
|
||||||
|
user.name = 'New Name' // BAD
|
||||||
|
items.push(newItem) // BAD
|
||||||
|
```
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Comprehensive error handling
|
||||||
|
async function fetchData(url: string) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url)
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fetch failed:', error)
|
||||||
|
throw new Error('Failed to fetch data')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ BAD: No error handling
|
||||||
|
async function fetchData(url) {
|
||||||
|
const response = await fetch(url)
|
||||||
|
return response.json()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Async/Await Best Practices
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Parallel execution when possible
|
||||||
|
const [users, markets, stats] = await Promise.all([
|
||||||
|
fetchUsers(),
|
||||||
|
fetchMarkets(),
|
||||||
|
fetchStats()
|
||||||
|
])
|
||||||
|
|
||||||
|
// ❌ BAD: Sequential when unnecessary
|
||||||
|
const users = await fetchUsers()
|
||||||
|
const markets = await fetchMarkets()
|
||||||
|
const stats = await fetchStats()
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type Safety
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Proper types
|
||||||
|
interface Market {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
status: 'active' | 'resolved' | 'closed'
|
||||||
|
created_at: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMarket(id: string): Promise<Market> {
|
||||||
|
// Implementation
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ BAD: Using 'any'
|
||||||
|
function getMarket(id: any): Promise<any> {
|
||||||
|
// Implementation
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## React Best Practices
|
||||||
|
|
||||||
|
### Component Structure
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Functional component with types
|
||||||
|
interface ButtonProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
onClick: () => void
|
||||||
|
disabled?: boolean
|
||||||
|
variant?: 'primary' | 'secondary'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Button({
|
||||||
|
children,
|
||||||
|
onClick,
|
||||||
|
disabled = false,
|
||||||
|
variant = 'primary'
|
||||||
|
}: ButtonProps) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`btn btn-${variant}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ❌ BAD: No types, unclear structure
|
||||||
|
export function Button(props) {
|
||||||
|
return <button onClick={props.onClick}>{props.children}</button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Hooks
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Reusable custom hook
|
||||||
|
export function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value)
|
||||||
|
}, delay)
|
||||||
|
|
||||||
|
return () => clearTimeout(handler)
|
||||||
|
}, [value, delay])
|
||||||
|
|
||||||
|
return debouncedValue
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
const debouncedQuery = useDebounce(searchQuery, 500)
|
||||||
|
```
|
||||||
|
|
||||||
|
### State Management
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Proper state updates
|
||||||
|
const [count, setCount] = useState(0)
|
||||||
|
|
||||||
|
// Functional update for state based on previous state
|
||||||
|
setCount(prev => prev + 1)
|
||||||
|
|
||||||
|
// ❌ BAD: Direct state reference
|
||||||
|
setCount(count + 1) // Can be stale in async scenarios
|
||||||
|
```
|
||||||
|
|
||||||
|
### Conditional Rendering
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Clear conditional rendering
|
||||||
|
{isLoading && <Spinner />}
|
||||||
|
{error && <ErrorMessage error={error} />}
|
||||||
|
{data && <DataDisplay data={data} />}
|
||||||
|
|
||||||
|
// ❌ BAD: Ternary hell
|
||||||
|
{isLoading ? <Spinner /> : error ? <ErrorMessage error={error} /> : data ? <DataDisplay data={data} /> : null}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Design Standards
|
||||||
|
|
||||||
|
### REST API Conventions
|
||||||
|
|
||||||
|
```
|
||||||
|
GET /api/markets # List all markets
|
||||||
|
GET /api/markets/:id # Get specific market
|
||||||
|
POST /api/markets # Create new market
|
||||||
|
PUT /api/markets/:id # Update market (full)
|
||||||
|
PATCH /api/markets/:id # Update market (partial)
|
||||||
|
DELETE /api/markets/:id # Delete market
|
||||||
|
|
||||||
|
# Query parameters for filtering
|
||||||
|
GET /api/markets?status=active&limit=10&offset=0
|
||||||
|
```
|
||||||
|
|
||||||
|
### Response Format
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Consistent response structure
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
success: boolean
|
||||||
|
data?: T
|
||||||
|
error?: string
|
||||||
|
meta?: {
|
||||||
|
total: number
|
||||||
|
page: number
|
||||||
|
limit: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success response
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
data: markets,
|
||||||
|
meta: { total: 100, page: 1, limit: 10 }
|
||||||
|
})
|
||||||
|
|
||||||
|
// Error response
|
||||||
|
return NextResponse.json({
|
||||||
|
success: false,
|
||||||
|
error: 'Invalid request'
|
||||||
|
}, { status: 400 })
|
||||||
|
```
|
||||||
|
|
||||||
|
### Input Validation
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
// ✅ GOOD: Schema validation
|
||||||
|
const CreateMarketSchema = z.object({
|
||||||
|
name: z.string().min(1).max(200),
|
||||||
|
description: z.string().min(1).max(2000),
|
||||||
|
endDate: z.string().datetime(),
|
||||||
|
categories: z.array(z.string()).min(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const body = await request.json()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const validated = CreateMarketSchema.parse(body)
|
||||||
|
// Proceed with validated data
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return NextResponse.json({
|
||||||
|
success: false,
|
||||||
|
error: 'Validation failed',
|
||||||
|
details: error.errors
|
||||||
|
}, { status: 400 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## File Organization
|
||||||
|
|
||||||
|
### Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── app/ # Next.js App Router
|
||||||
|
│ ├── api/ # API routes
|
||||||
|
│ ├── markets/ # Market pages
|
||||||
|
│ └── (auth)/ # Auth pages (route groups)
|
||||||
|
├── components/ # React components
|
||||||
|
│ ├── ui/ # Generic UI components
|
||||||
|
│ ├── forms/ # Form components
|
||||||
|
│ └── layouts/ # Layout components
|
||||||
|
├── hooks/ # Custom React hooks
|
||||||
|
├── lib/ # Utilities and configs
|
||||||
|
│ ├── api/ # API clients
|
||||||
|
│ ├── utils/ # Helper functions
|
||||||
|
│ └── constants/ # Constants
|
||||||
|
├── types/ # TypeScript types
|
||||||
|
└── styles/ # Global styles
|
||||||
|
```
|
||||||
|
|
||||||
|
### File Naming
|
||||||
|
|
||||||
|
```
|
||||||
|
components/Button.tsx # PascalCase for components
|
||||||
|
hooks/useAuth.ts # camelCase with 'use' prefix
|
||||||
|
lib/formatDate.ts # camelCase for utilities
|
||||||
|
types/market.types.ts # camelCase with .types suffix
|
||||||
|
```
|
||||||
|
|
||||||
|
## Comments & Documentation
|
||||||
|
|
||||||
|
### When to Comment
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Explain WHY, not WHAT
|
||||||
|
// Use exponential backoff to avoid overwhelming the API during outages
|
||||||
|
const delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
|
||||||
|
|
||||||
|
// Deliberately using mutation here for performance with large arrays
|
||||||
|
items.push(newItem)
|
||||||
|
|
||||||
|
// ❌ BAD: Stating the obvious
|
||||||
|
// Increment counter by 1
|
||||||
|
count++
|
||||||
|
|
||||||
|
// Set name to user's name
|
||||||
|
name = user.name
|
||||||
|
```
|
||||||
|
|
||||||
|
### JSDoc for Public APIs
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* Searches markets using semantic similarity.
|
||||||
|
*
|
||||||
|
* @param query - Natural language search query
|
||||||
|
* @param limit - Maximum number of results (default: 10)
|
||||||
|
* @returns Array of markets sorted by similarity score
|
||||||
|
* @throws {Error} If OpenAI API fails or Redis unavailable
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```typescript
|
||||||
|
* const results = await searchMarkets('election', 5)
|
||||||
|
* console.log(results[0].name) // "Trump vs Biden"
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export async function searchMarkets(
|
||||||
|
query: string,
|
||||||
|
limit: number = 10
|
||||||
|
): Promise<Market[]> {
|
||||||
|
// Implementation
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Performance Best Practices
|
||||||
|
|
||||||
|
### Memoization
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { useMemo, useCallback } from 'react'
|
||||||
|
|
||||||
|
// ✅ GOOD: Memoize expensive computations
|
||||||
|
const sortedMarkets = useMemo(() => {
|
||||||
|
return markets.sort((a, b) => b.volume - a.volume)
|
||||||
|
}, [markets])
|
||||||
|
|
||||||
|
// ✅ GOOD: Memoize callbacks
|
||||||
|
const handleSearch = useCallback((query: string) => {
|
||||||
|
setSearchQuery(query)
|
||||||
|
}, [])
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lazy Loading
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { lazy, Suspense } from 'react'
|
||||||
|
|
||||||
|
// ✅ GOOD: Lazy load heavy components
|
||||||
|
const HeavyChart = lazy(() => import('./HeavyChart'))
|
||||||
|
|
||||||
|
export function Dashboard() {
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<Spinner />}>
|
||||||
|
<HeavyChart />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Database Queries
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Select only needed columns
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('markets')
|
||||||
|
.select('id, name, status')
|
||||||
|
.limit(10)
|
||||||
|
|
||||||
|
// ❌ BAD: Select everything
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('markets')
|
||||||
|
.select('*')
|
||||||
|
```
|
||||||
|
|
||||||
|
## Testing Standards
|
||||||
|
|
||||||
|
### Test Structure (AAA Pattern)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
test('calculates similarity correctly', () => {
|
||||||
|
// Arrange
|
||||||
|
const vector1 = [1, 0, 0]
|
||||||
|
const vector2 = [0, 1, 0]
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const similarity = calculateCosineSimilarity(vector1, vector2)
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(similarity).toBe(0)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Test Naming
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Descriptive test names
|
||||||
|
test('returns empty array when no markets match query', () => { })
|
||||||
|
test('throws error when OpenAI API key is missing', () => { })
|
||||||
|
test('falls back to substring search when Redis unavailable', () => { })
|
||||||
|
|
||||||
|
// ❌ BAD: Vague test names
|
||||||
|
test('works', () => { })
|
||||||
|
test('test search', () => { })
|
||||||
|
```
|
||||||
|
|
||||||
|
## Code Smell Detection
|
||||||
|
|
||||||
|
Watch for these anti-patterns:
|
||||||
|
|
||||||
|
### 1. Long Functions
|
||||||
|
```typescript
|
||||||
|
// ❌ BAD: Function > 50 lines
|
||||||
|
function processMarketData() {
|
||||||
|
// 100 lines of code
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ GOOD: Split into smaller functions
|
||||||
|
function processMarketData() {
|
||||||
|
const validated = validateData()
|
||||||
|
const transformed = transformData(validated)
|
||||||
|
return saveData(transformed)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Deep Nesting
|
||||||
|
```typescript
|
||||||
|
// ❌ BAD: 5+ levels of nesting
|
||||||
|
if (user) {
|
||||||
|
if (user.isAdmin) {
|
||||||
|
if (market) {
|
||||||
|
if (market.isActive) {
|
||||||
|
if (hasPermission) {
|
||||||
|
// Do something
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ GOOD: Early returns
|
||||||
|
if (!user) return
|
||||||
|
if (!user.isAdmin) return
|
||||||
|
if (!market) return
|
||||||
|
if (!market.isActive) return
|
||||||
|
if (!hasPermission) return
|
||||||
|
|
||||||
|
// Do something
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Magic Numbers
|
||||||
|
```typescript
|
||||||
|
// ❌ BAD: Unexplained numbers
|
||||||
|
if (retryCount > 3) { }
|
||||||
|
setTimeout(callback, 500)
|
||||||
|
|
||||||
|
// ✅ GOOD: Named constants
|
||||||
|
const MAX_RETRIES = 3
|
||||||
|
const DEBOUNCE_DELAY_MS = 500
|
||||||
|
|
||||||
|
if (retryCount > MAX_RETRIES) { }
|
||||||
|
setTimeout(callback, DEBOUNCE_DELAY_MS)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remember**: Code quality is not negotiable. Clear, maintainable code enables rapid development and confident refactoring.
|
||||||
10
skills/cc-skill-continuous-learning/SKILL.md
Normal file
10
skills/cc-skill-continuous-learning/SKILL.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
name: cc-skill-continuous-learning
|
||||||
|
description: Development skill skill from everything-claude-code
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# cc-skill-continuous-learning
|
||||||
|
|
||||||
|
Development skill skill.
|
||||||
18
skills/cc-skill-continuous-learning/config.json
Normal file
18
skills/cc-skill-continuous-learning/config.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"min_session_length": 10,
|
||||||
|
"extraction_threshold": "medium",
|
||||||
|
"auto_approve": false,
|
||||||
|
"learned_skills_path": "~/.claude/skills/learned/",
|
||||||
|
"patterns_to_detect": [
|
||||||
|
"error_resolution",
|
||||||
|
"user_corrections",
|
||||||
|
"workarounds",
|
||||||
|
"debugging_techniques",
|
||||||
|
"project_specific"
|
||||||
|
],
|
||||||
|
"ignore_patterns": [
|
||||||
|
"simple_typos",
|
||||||
|
"one_time_fixes",
|
||||||
|
"external_api_issues"
|
||||||
|
]
|
||||||
|
}
|
||||||
60
skills/cc-skill-continuous-learning/evaluate-session.sh
Executable file
60
skills/cc-skill-continuous-learning/evaluate-session.sh
Executable file
@@ -0,0 +1,60 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# Continuous Learning - Session Evaluator
|
||||||
|
# Runs on Stop hook to extract reusable patterns from Claude Code sessions
|
||||||
|
#
|
||||||
|
# Why Stop hook instead of UserPromptSubmit:
|
||||||
|
# - Stop runs once at session end (lightweight)
|
||||||
|
# - UserPromptSubmit runs every message (heavy, adds latency)
|
||||||
|
#
|
||||||
|
# Hook config (in ~/.claude/settings.json):
|
||||||
|
# {
|
||||||
|
# "hooks": {
|
||||||
|
# "Stop": [{
|
||||||
|
# "matcher": "*",
|
||||||
|
# "hooks": [{
|
||||||
|
# "type": "command",
|
||||||
|
# "command": "~/.claude/skills/continuous-learning/evaluate-session.sh"
|
||||||
|
# }]
|
||||||
|
# }]
|
||||||
|
# }
|
||||||
|
# }
|
||||||
|
#
|
||||||
|
# Patterns to detect: error_resolution, debugging_techniques, workarounds, project_specific
|
||||||
|
# Patterns to ignore: simple_typos, one_time_fixes, external_api_issues
|
||||||
|
# Extracted skills saved to: ~/.claude/skills/learned/
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||||
|
CONFIG_FILE="$SCRIPT_DIR/config.json"
|
||||||
|
LEARNED_SKILLS_PATH="${HOME}/.claude/skills/learned"
|
||||||
|
MIN_SESSION_LENGTH=10
|
||||||
|
|
||||||
|
# Load config if exists
|
||||||
|
if [ -f "$CONFIG_FILE" ]; then
|
||||||
|
MIN_SESSION_LENGTH=$(jq -r '.min_session_length // 10' "$CONFIG_FILE")
|
||||||
|
LEARNED_SKILLS_PATH=$(jq -r '.learned_skills_path // "~/.claude/skills/learned/"' "$CONFIG_FILE" | sed "s|~|$HOME|")
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Ensure learned skills directory exists
|
||||||
|
mkdir -p "$LEARNED_SKILLS_PATH"
|
||||||
|
|
||||||
|
# Get transcript path from environment (set by Claude Code)
|
||||||
|
transcript_path="${CLAUDE_TRANSCRIPT_PATH:-}"
|
||||||
|
|
||||||
|
if [ -z "$transcript_path" ] || [ ! -f "$transcript_path" ]; then
|
||||||
|
exit 0
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Count messages in session
|
||||||
|
message_count=$(grep -c '"type":"user"' "$transcript_path" 2>/dev/null || echo "0")
|
||||||
|
|
||||||
|
# Skip short sessions
|
||||||
|
if [ "$message_count" -lt "$MIN_SESSION_LENGTH" ]; then
|
||||||
|
echo "[ContinuousLearning] Session too short ($message_count messages), skipping" >&2
|
||||||
|
exit 0
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Signal to Claude that session should be evaluated for extractable patterns
|
||||||
|
echo "[ContinuousLearning] Session has $message_count messages - evaluate for extractable patterns" >&2
|
||||||
|
echo "[ContinuousLearning] Save learned skills to: $LEARNED_SKILLS_PATH" >&2
|
||||||
633
skills/cc-skill-frontend-patterns/SKILL.md
Normal file
633
skills/cc-skill-frontend-patterns/SKILL.md
Normal file
@@ -0,0 +1,633 @@
|
|||||||
|
---
|
||||||
|
name: frontend-patterns
|
||||||
|
description: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Frontend Development Patterns
|
||||||
|
|
||||||
|
Modern frontend patterns for React, Next.js, and performant user interfaces.
|
||||||
|
|
||||||
|
## Component Patterns
|
||||||
|
|
||||||
|
### Composition Over Inheritance
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ GOOD: Component composition
|
||||||
|
interface CardProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
variant?: 'default' | 'outlined'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Card({ children, variant = 'default' }: CardProps) {
|
||||||
|
return <div className={`card card-${variant}`}>{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardHeader({ children }: { children: React.ReactNode }) {
|
||||||
|
return <div className="card-header">{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardBody({ children }: { children: React.ReactNode }) {
|
||||||
|
return <div className="card-body">{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
<Card>
|
||||||
|
<CardHeader>Title</CardHeader>
|
||||||
|
<CardBody>Content</CardBody>
|
||||||
|
</Card>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compound Components
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface TabsContextValue {
|
||||||
|
activeTab: string
|
||||||
|
setActiveTab: (tab: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const TabsContext = createContext<TabsContextValue | undefined>(undefined)
|
||||||
|
|
||||||
|
export function Tabs({ children, defaultTab }: {
|
||||||
|
children: React.ReactNode
|
||||||
|
defaultTab: string
|
||||||
|
}) {
|
||||||
|
const [activeTab, setActiveTab] = useState(defaultTab)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
|
||||||
|
{children}
|
||||||
|
</TabsContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TabList({ children }: { children: React.ReactNode }) {
|
||||||
|
return <div className="tab-list">{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
|
||||||
|
const context = useContext(TabsContext)
|
||||||
|
if (!context) throw new Error('Tab must be used within Tabs')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={context.activeTab === id ? 'active' : ''}
|
||||||
|
onClick={() => context.setActiveTab(id)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
<Tabs defaultTab="overview">
|
||||||
|
<TabList>
|
||||||
|
<Tab id="overview">Overview</Tab>
|
||||||
|
<Tab id="details">Details</Tab>
|
||||||
|
</TabList>
|
||||||
|
</Tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Render Props Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface DataLoaderProps<T> {
|
||||||
|
url: string
|
||||||
|
children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
|
||||||
|
const [data, setData] = useState<T | null>(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<Error | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(url)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(setData)
|
||||||
|
.catch(setError)
|
||||||
|
.finally(() => setLoading(false))
|
||||||
|
}, [url])
|
||||||
|
|
||||||
|
return <>{children(data, loading, error)}</>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
<DataLoader<Market[]> url="/api/markets">
|
||||||
|
{(markets, loading, error) => {
|
||||||
|
if (loading) return <Spinner />
|
||||||
|
if (error) return <Error error={error} />
|
||||||
|
return <MarketList markets={markets!} />
|
||||||
|
}}
|
||||||
|
</DataLoader>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom Hooks Patterns
|
||||||
|
|
||||||
|
### State Management Hook
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export function useToggle(initialValue = false): [boolean, () => void] {
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
const toggle = useCallback(() => {
|
||||||
|
setValue(v => !v)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return [value, toggle]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
const [isOpen, toggleOpen] = useToggle()
|
||||||
|
```
|
||||||
|
|
||||||
|
### Async Data Fetching Hook
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface UseQueryOptions<T> {
|
||||||
|
onSuccess?: (data: T) => void
|
||||||
|
onError?: (error: Error) => void
|
||||||
|
enabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useQuery<T>(
|
||||||
|
key: string,
|
||||||
|
fetcher: () => Promise<T>,
|
||||||
|
options?: UseQueryOptions<T>
|
||||||
|
) {
|
||||||
|
const [data, setData] = useState<T | null>(null)
|
||||||
|
const [error, setError] = useState<Error | null>(null)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const refetch = useCallback(async () => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await fetcher()
|
||||||
|
setData(result)
|
||||||
|
options?.onSuccess?.(result)
|
||||||
|
} catch (err) {
|
||||||
|
const error = err as Error
|
||||||
|
setError(error)
|
||||||
|
options?.onError?.(error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [fetcher, options])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (options?.enabled !== false) {
|
||||||
|
refetch()
|
||||||
|
}
|
||||||
|
}, [key, refetch, options?.enabled])
|
||||||
|
|
||||||
|
return { data, error, loading, refetch }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
const { data: markets, loading, error, refetch } = useQuery(
|
||||||
|
'markets',
|
||||||
|
() => fetch('/api/markets').then(r => r.json()),
|
||||||
|
{
|
||||||
|
onSuccess: data => console.log('Fetched', data.length, 'markets'),
|
||||||
|
onError: err => console.error('Failed:', err)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Debounce Hook
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value)
|
||||||
|
}, delay)
|
||||||
|
|
||||||
|
return () => clearTimeout(handler)
|
||||||
|
}, [value, delay])
|
||||||
|
|
||||||
|
return debouncedValue
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const debouncedQuery = useDebounce(searchQuery, 500)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (debouncedQuery) {
|
||||||
|
performSearch(debouncedQuery)
|
||||||
|
}
|
||||||
|
}, [debouncedQuery])
|
||||||
|
```
|
||||||
|
|
||||||
|
## State Management Patterns
|
||||||
|
|
||||||
|
### Context + Reducer Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface State {
|
||||||
|
markets: Market[]
|
||||||
|
selectedMarket: Market | null
|
||||||
|
loading: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type Action =
|
||||||
|
| { type: 'SET_MARKETS'; payload: Market[] }
|
||||||
|
| { type: 'SELECT_MARKET'; payload: Market }
|
||||||
|
| { type: 'SET_LOADING'; payload: boolean }
|
||||||
|
|
||||||
|
function reducer(state: State, action: Action): State {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'SET_MARKETS':
|
||||||
|
return { ...state, markets: action.payload }
|
||||||
|
case 'SELECT_MARKET':
|
||||||
|
return { ...state, selectedMarket: action.payload }
|
||||||
|
case 'SET_LOADING':
|
||||||
|
return { ...state, loading: action.payload }
|
||||||
|
default:
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const MarketContext = createContext<{
|
||||||
|
state: State
|
||||||
|
dispatch: Dispatch<Action>
|
||||||
|
} | undefined>(undefined)
|
||||||
|
|
||||||
|
export function MarketProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
const [state, dispatch] = useReducer(reducer, {
|
||||||
|
markets: [],
|
||||||
|
selectedMarket: null,
|
||||||
|
loading: false
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MarketContext.Provider value={{ state, dispatch }}>
|
||||||
|
{children}
|
||||||
|
</MarketContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useMarkets() {
|
||||||
|
const context = useContext(MarketContext)
|
||||||
|
if (!context) throw new Error('useMarkets must be used within MarketProvider')
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Performance Optimization
|
||||||
|
|
||||||
|
### Memoization
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// ✅ useMemo for expensive computations
|
||||||
|
const sortedMarkets = useMemo(() => {
|
||||||
|
return markets.sort((a, b) => b.volume - a.volume)
|
||||||
|
}, [markets])
|
||||||
|
|
||||||
|
// ✅ useCallback for functions passed to children
|
||||||
|
const handleSearch = useCallback((query: string) => {
|
||||||
|
setSearchQuery(query)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// ✅ React.memo for pure components
|
||||||
|
export const MarketCard = React.memo<MarketCardProps>(({ market }) => {
|
||||||
|
return (
|
||||||
|
<div className="market-card">
|
||||||
|
<h3>{market.name}</h3>
|
||||||
|
<p>{market.description}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Code Splitting & Lazy Loading
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { lazy, Suspense } from 'react'
|
||||||
|
|
||||||
|
// ✅ Lazy load heavy components
|
||||||
|
const HeavyChart = lazy(() => import('./HeavyChart'))
|
||||||
|
const ThreeJsBackground = lazy(() => import('./ThreeJsBackground'))
|
||||||
|
|
||||||
|
export function Dashboard() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Suspense fallback={<ChartSkeleton />}>
|
||||||
|
<HeavyChart data={data} />
|
||||||
|
</Suspense>
|
||||||
|
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<ThreeJsBackground />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Virtualization for Long Lists
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual'
|
||||||
|
|
||||||
|
export function VirtualMarketList({ markets }: { markets: Market[] }) {
|
||||||
|
const parentRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const virtualizer = useVirtualizer({
|
||||||
|
count: markets.length,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
estimateSize: () => 100, // Estimated row height
|
||||||
|
overscan: 5 // Extra items to render
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: `${virtualizer.getTotalSize()}px`,
|
||||||
|
position: 'relative'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{virtualizer.getVirtualItems().map(virtualRow => (
|
||||||
|
<div
|
||||||
|
key={virtualRow.index}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: `${virtualRow.size}px`,
|
||||||
|
transform: `translateY(${virtualRow.start}px)`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MarketCard market={markets[virtualRow.index]} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Form Handling Patterns
|
||||||
|
|
||||||
|
### Controlled Form with Validation
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface FormData {
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
endDate: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
name?: string
|
||||||
|
description?: string
|
||||||
|
endDate?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CreateMarketForm() {
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
endDate: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const [errors, setErrors] = useState<FormErrors>({})
|
||||||
|
|
||||||
|
const validate = (): boolean => {
|
||||||
|
const newErrors: FormErrors = {}
|
||||||
|
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
newErrors.name = 'Name is required'
|
||||||
|
} else if (formData.name.length > 200) {
|
||||||
|
newErrors.name = 'Name must be under 200 characters'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.description.trim()) {
|
||||||
|
newErrors.description = 'Description is required'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.endDate) {
|
||||||
|
newErrors.endDate = 'End date is required'
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors)
|
||||||
|
return Object.keys(newErrors).length === 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (!validate()) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await createMarket(formData)
|
||||||
|
// Success handling
|
||||||
|
} catch (error) {
|
||||||
|
// Error handling
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<input
|
||||||
|
value={formData.name}
|
||||||
|
onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}
|
||||||
|
placeholder="Market name"
|
||||||
|
/>
|
||||||
|
{errors.name && <span className="error">{errors.name}</span>}
|
||||||
|
|
||||||
|
{/* Other fields */}
|
||||||
|
|
||||||
|
<button type="submit">Create Market</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error Boundary Pattern
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface ErrorBoundaryState {
|
||||||
|
hasError: boolean
|
||||||
|
error: Error | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ErrorBoundary extends React.Component<
|
||||||
|
{ children: React.ReactNode },
|
||||||
|
ErrorBoundaryState
|
||||||
|
> {
|
||||||
|
state: ErrorBoundaryState = {
|
||||||
|
hasError: false,
|
||||||
|
error: null
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||||
|
return { hasError: true, error }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('Error boundary caught:', error, errorInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
return (
|
||||||
|
<div className="error-fallback">
|
||||||
|
<h2>Something went wrong</h2>
|
||||||
|
<p>{this.state.error?.message}</p>
|
||||||
|
<button onClick={() => this.setState({ hasError: false })}>
|
||||||
|
Try again
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
<ErrorBoundary>
|
||||||
|
<App />
|
||||||
|
</ErrorBoundary>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Animation Patterns
|
||||||
|
|
||||||
|
### Framer Motion Animations
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
|
||||||
|
// ✅ List animations
|
||||||
|
export function AnimatedMarketList({ markets }: { markets: Market[] }) {
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{markets.map(market => (
|
||||||
|
<motion.div
|
||||||
|
key={market.id}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<MarketCard market={market} />
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ Modal animations
|
||||||
|
export function Modal({ isOpen, onClose, children }: ModalProps) {
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
className="modal-overlay"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="modal-content"
|
||||||
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Accessibility Patterns
|
||||||
|
|
||||||
|
### Keyboard Navigation
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export function Dropdown({ options, onSelect }: DropdownProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0)
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveIndex(i => Math.min(i + 1, options.length - 1))
|
||||||
|
break
|
||||||
|
case 'ArrowUp':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveIndex(i => Math.max(i - 1, 0))
|
||||||
|
break
|
||||||
|
case 'Enter':
|
||||||
|
e.preventDefault()
|
||||||
|
onSelect(options[activeIndex])
|
||||||
|
setIsOpen(false)
|
||||||
|
break
|
||||||
|
case 'Escape':
|
||||||
|
setIsOpen(false)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={isOpen}
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
>
|
||||||
|
{/* Dropdown implementation */}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Focus Management
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export function Modal({ isOpen, onClose, children }: ModalProps) {
|
||||||
|
const modalRef = useRef<HTMLDivElement>(null)
|
||||||
|
const previousFocusRef = useRef<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
// Save currently focused element
|
||||||
|
previousFocusRef.current = document.activeElement as HTMLElement
|
||||||
|
|
||||||
|
// Focus modal
|
||||||
|
modalRef.current?.focus()
|
||||||
|
} else {
|
||||||
|
// Restore focus when closing
|
||||||
|
previousFocusRef.current?.focus()
|
||||||
|
}
|
||||||
|
}, [isOpen])
|
||||||
|
|
||||||
|
return isOpen ? (
|
||||||
|
<div
|
||||||
|
ref={modalRef}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
tabIndex={-1}
|
||||||
|
onKeyDown={e => e.key === 'Escape' && onClose()}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remember**: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.
|
||||||
352
skills/cc-skill-project-guidelines-example/SKILL.md
Normal file
352
skills/cc-skill-project-guidelines-example/SKILL.md
Normal file
@@ -0,0 +1,352 @@
|
|||||||
|
---
|
||||||
|
name: cc-skill-project-guidelines-example
|
||||||
|
description: Project Guidelines Skill (Example)
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Project Guidelines Skill (Example)
|
||||||
|
|
||||||
|
This is an example of a project-specific skill. Use this as a template for your own projects.
|
||||||
|
|
||||||
|
Based on a real production application: [Zenith](https://zenith.chat) - AI-powered customer discovery platform.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## When to Use
|
||||||
|
|
||||||
|
Reference this skill when working on the specific project it's designed for. Project skills contain:
|
||||||
|
- Architecture overview
|
||||||
|
- File structure
|
||||||
|
- Code patterns
|
||||||
|
- Testing requirements
|
||||||
|
- Deployment workflow
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture Overview
|
||||||
|
|
||||||
|
**Tech Stack:**
|
||||||
|
- **Frontend**: Next.js 15 (App Router), TypeScript, React
|
||||||
|
- **Backend**: FastAPI (Python), Pydantic models
|
||||||
|
- **Database**: Supabase (PostgreSQL)
|
||||||
|
- **AI**: Claude API with tool calling and structured output
|
||||||
|
- **Deployment**: Google Cloud Run
|
||||||
|
- **Testing**: Playwright (E2E), pytest (backend), React Testing Library
|
||||||
|
|
||||||
|
**Services:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ Frontend │
|
||||||
|
│ Next.js 15 + TypeScript + TailwindCSS │
|
||||||
|
│ Deployed: Vercel / Cloud Run │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ Backend │
|
||||||
|
│ FastAPI + Python 3.11 + Pydantic │
|
||||||
|
│ Deployed: Cloud Run │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
┌───────────────┼───────────────┐
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────────┐ ┌──────────┐ ┌──────────┐
|
||||||
|
│ Supabase │ │ Claude │ │ Redis │
|
||||||
|
│ Database │ │ API │ │ Cache │
|
||||||
|
└──────────┘ └──────────┘ └──────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
project/
|
||||||
|
├── frontend/
|
||||||
|
│ └── src/
|
||||||
|
│ ├── app/ # Next.js app router pages
|
||||||
|
│ │ ├── api/ # API routes
|
||||||
|
│ │ ├── (auth)/ # Auth-protected routes
|
||||||
|
│ │ └── workspace/ # Main app workspace
|
||||||
|
│ ├── components/ # React components
|
||||||
|
│ │ ├── ui/ # Base UI components
|
||||||
|
│ │ ├── forms/ # Form components
|
||||||
|
│ │ └── layouts/ # Layout components
|
||||||
|
│ ├── hooks/ # Custom React hooks
|
||||||
|
│ ├── lib/ # Utilities
|
||||||
|
│ ├── types/ # TypeScript definitions
|
||||||
|
│ └── config/ # Configuration
|
||||||
|
│
|
||||||
|
├── backend/
|
||||||
|
│ ├── routers/ # FastAPI route handlers
|
||||||
|
│ ├── models.py # Pydantic models
|
||||||
|
│ ├── main.py # FastAPI app entry
|
||||||
|
│ ├── auth_system.py # Authentication
|
||||||
|
│ ├── database.py # Database operations
|
||||||
|
│ ├── services/ # Business logic
|
||||||
|
│ └── tests/ # pytest tests
|
||||||
|
│
|
||||||
|
├── deploy/ # Deployment configs
|
||||||
|
├── docs/ # Documentation
|
||||||
|
└── scripts/ # Utility scripts
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Code Patterns
|
||||||
|
|
||||||
|
### API Response Format (FastAPI)
|
||||||
|
|
||||||
|
```python
|
||||||
|
from pydantic import BaseModel
|
||||||
|
from typing import Generic, TypeVar, Optional
|
||||||
|
|
||||||
|
T = TypeVar('T')
|
||||||
|
|
||||||
|
class ApiResponse(BaseModel, Generic[T]):
|
||||||
|
success: bool
|
||||||
|
data: Optional[T] = None
|
||||||
|
error: Optional[str] = None
|
||||||
|
|
||||||
|
@classmethod
|
||||||
|
def ok(cls, data: T) -> "ApiResponse[T]":
|
||||||
|
return cls(success=True, data=data)
|
||||||
|
|
||||||
|
@classmethod
|
||||||
|
def fail(cls, error: str) -> "ApiResponse[T]":
|
||||||
|
return cls(success=False, error=error)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend API Calls (TypeScript)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
success: boolean
|
||||||
|
data?: T
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchApi<T>(
|
||||||
|
endpoint: string,
|
||||||
|
options?: RequestInit
|
||||||
|
): Promise<ApiResponse<T>> {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api${endpoint}`, {
|
||||||
|
...options,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options?.headers,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
return { success: false, error: `HTTP ${response.status}` }
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json()
|
||||||
|
} catch (error) {
|
||||||
|
return { success: false, error: String(error) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Claude AI Integration (Structured Output)
|
||||||
|
|
||||||
|
```python
|
||||||
|
from anthropic import Anthropic
|
||||||
|
from pydantic import BaseModel
|
||||||
|
|
||||||
|
class AnalysisResult(BaseModel):
|
||||||
|
summary: str
|
||||||
|
key_points: list[str]
|
||||||
|
confidence: float
|
||||||
|
|
||||||
|
async def analyze_with_claude(content: str) -> AnalysisResult:
|
||||||
|
client = Anthropic()
|
||||||
|
|
||||||
|
response = client.messages.create(
|
||||||
|
model="claude-sonnet-4-5-20250514",
|
||||||
|
max_tokens=1024,
|
||||||
|
messages=[{"role": "user", "content": content}],
|
||||||
|
tools=[{
|
||||||
|
"name": "provide_analysis",
|
||||||
|
"description": "Provide structured analysis",
|
||||||
|
"input_schema": AnalysisResult.model_json_schema()
|
||||||
|
}],
|
||||||
|
tool_choice={"type": "tool", "name": "provide_analysis"}
|
||||||
|
)
|
||||||
|
|
||||||
|
# Extract tool use result
|
||||||
|
tool_use = next(
|
||||||
|
block for block in response.content
|
||||||
|
if block.type == "tool_use"
|
||||||
|
)
|
||||||
|
|
||||||
|
return AnalysisResult(**tool_use.input)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Hooks (React)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
interface UseApiState<T> {
|
||||||
|
data: T | null
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useApi<T>(
|
||||||
|
fetchFn: () => Promise<ApiResponse<T>>
|
||||||
|
) {
|
||||||
|
const [state, setState] = useState<UseApiState<T>>({
|
||||||
|
data: null,
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
const execute = useCallback(async () => {
|
||||||
|
setState(prev => ({ ...prev, loading: true, error: null }))
|
||||||
|
|
||||||
|
const result = await fetchFn()
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setState({ data: result.data!, loading: false, error: null })
|
||||||
|
} else {
|
||||||
|
setState({ data: null, loading: false, error: result.error! })
|
||||||
|
}
|
||||||
|
}, [fetchFn])
|
||||||
|
|
||||||
|
return { ...state, execute }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Requirements
|
||||||
|
|
||||||
|
### Backend (pytest)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run all tests
|
||||||
|
poetry run pytest tests/
|
||||||
|
|
||||||
|
# Run with coverage
|
||||||
|
poetry run pytest tests/ --cov=. --cov-report=html
|
||||||
|
|
||||||
|
# Run specific test file
|
||||||
|
poetry run pytest tests/test_auth.py -v
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test structure:**
|
||||||
|
```python
|
||||||
|
import pytest
|
||||||
|
from httpx import AsyncClient
|
||||||
|
from main import app
|
||||||
|
|
||||||
|
@pytest.fixture
|
||||||
|
async def client():
|
||||||
|
async with AsyncClient(app=app, base_url="http://test") as ac:
|
||||||
|
yield ac
|
||||||
|
|
||||||
|
@pytest.mark.asyncio
|
||||||
|
async def test_health_check(client: AsyncClient):
|
||||||
|
response = await client.get("/health")
|
||||||
|
assert response.status_code == 200
|
||||||
|
assert response.json()["status"] == "healthy"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend (React Testing Library)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run tests
|
||||||
|
npm run test
|
||||||
|
|
||||||
|
# Run with coverage
|
||||||
|
npm run test -- --coverage
|
||||||
|
|
||||||
|
# Run E2E tests
|
||||||
|
npm run test:e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test structure:**
|
||||||
|
```typescript
|
||||||
|
import { render, screen, fireEvent } from '@testing-library/react'
|
||||||
|
import { WorkspacePanel } from './WorkspacePanel'
|
||||||
|
|
||||||
|
describe('WorkspacePanel', () => {
|
||||||
|
it('renders workspace correctly', () => {
|
||||||
|
render(<WorkspacePanel />)
|
||||||
|
expect(screen.getByRole('main')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('handles session creation', async () => {
|
||||||
|
render(<WorkspacePanel />)
|
||||||
|
fireEvent.click(screen.getByText('New Session'))
|
||||||
|
expect(await screen.findByText('Session created')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deployment Workflow
|
||||||
|
|
||||||
|
### Pre-Deployment Checklist
|
||||||
|
|
||||||
|
- [ ] All tests passing locally
|
||||||
|
- [ ] `npm run build` succeeds (frontend)
|
||||||
|
- [ ] `poetry run pytest` passes (backend)
|
||||||
|
- [ ] No hardcoded secrets
|
||||||
|
- [ ] Environment variables documented
|
||||||
|
- [ ] Database migrations ready
|
||||||
|
|
||||||
|
### Deployment Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and deploy frontend
|
||||||
|
cd frontend && npm run build
|
||||||
|
gcloud run deploy frontend --source .
|
||||||
|
|
||||||
|
# Build and deploy backend
|
||||||
|
cd backend
|
||||||
|
gcloud run deploy backend --source .
|
||||||
|
```
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Frontend (.env.local)
|
||||||
|
NEXT_PUBLIC_API_URL=https://api.example.com
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
||||||
|
|
||||||
|
# Backend (.env)
|
||||||
|
DATABASE_URL=postgresql://...
|
||||||
|
ANTHROPIC_API_KEY=sk-ant-...
|
||||||
|
SUPABASE_URL=https://xxx.supabase.co
|
||||||
|
SUPABASE_KEY=eyJ...
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Critical Rules
|
||||||
|
|
||||||
|
1. **No emojis** in code, comments, or documentation
|
||||||
|
2. **Immutability** - never mutate objects or arrays
|
||||||
|
3. **TDD** - write tests before implementation
|
||||||
|
4. **80% coverage** minimum
|
||||||
|
5. **Many small files** - 200-400 lines typical, 800 max
|
||||||
|
6. **No console.log** in production code
|
||||||
|
7. **Proper error handling** with try/catch
|
||||||
|
8. **Input validation** with Pydantic/Zod
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Related Skills
|
||||||
|
|
||||||
|
- `coding-standards.md` - General coding best practices
|
||||||
|
- `backend-patterns.md` - API and database patterns
|
||||||
|
- `frontend-patterns.md` - React and Next.js patterns
|
||||||
|
- `tdd-workflow/` - Test-driven development methodology
|
||||||
496
skills/cc-skill-security-review/SKILL.md
Normal file
496
skills/cc-skill-security-review/SKILL.md
Normal file
@@ -0,0 +1,496 @@
|
|||||||
|
---
|
||||||
|
name: security-review
|
||||||
|
description: Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Security Review Skill
|
||||||
|
|
||||||
|
This skill ensures all code follows security best practices and identifies potential vulnerabilities.
|
||||||
|
|
||||||
|
## When to Activate
|
||||||
|
|
||||||
|
- Implementing authentication or authorization
|
||||||
|
- Handling user input or file uploads
|
||||||
|
- Creating new API endpoints
|
||||||
|
- Working with secrets or credentials
|
||||||
|
- Implementing payment features
|
||||||
|
- Storing or transmitting sensitive data
|
||||||
|
- Integrating third-party APIs
|
||||||
|
|
||||||
|
## Security Checklist
|
||||||
|
|
||||||
|
### 1. Secrets Management
|
||||||
|
|
||||||
|
#### ❌ NEVER Do This
|
||||||
|
```typescript
|
||||||
|
const apiKey = "sk-proj-xxxxx" // Hardcoded secret
|
||||||
|
const dbPassword = "password123" // In source code
|
||||||
|
```
|
||||||
|
|
||||||
|
#### ✅ ALWAYS Do This
|
||||||
|
```typescript
|
||||||
|
const apiKey = process.env.OPENAI_API_KEY
|
||||||
|
const dbUrl = process.env.DATABASE_URL
|
||||||
|
|
||||||
|
// Verify secrets exist
|
||||||
|
if (!apiKey) {
|
||||||
|
throw new Error('OPENAI_API_KEY not configured')
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] No hardcoded API keys, tokens, or passwords
|
||||||
|
- [ ] All secrets in environment variables
|
||||||
|
- [ ] `.env.local` in .gitignore
|
||||||
|
- [ ] No secrets in git history
|
||||||
|
- [ ] Production secrets in hosting platform (Vercel, Railway)
|
||||||
|
|
||||||
|
### 2. Input Validation
|
||||||
|
|
||||||
|
#### Always Validate User Input
|
||||||
|
```typescript
|
||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
// Define validation schema
|
||||||
|
const CreateUserSchema = z.object({
|
||||||
|
email: z.string().email(),
|
||||||
|
name: z.string().min(1).max(100),
|
||||||
|
age: z.number().int().min(0).max(150)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Validate before processing
|
||||||
|
export async function createUser(input: unknown) {
|
||||||
|
try {
|
||||||
|
const validated = CreateUserSchema.parse(input)
|
||||||
|
return await db.users.create(validated)
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof z.ZodError) {
|
||||||
|
return { success: false, errors: error.errors }
|
||||||
|
}
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### File Upload Validation
|
||||||
|
```typescript
|
||||||
|
function validateFileUpload(file: File) {
|
||||||
|
// Size check (5MB max)
|
||||||
|
const maxSize = 5 * 1024 * 1024
|
||||||
|
if (file.size > maxSize) {
|
||||||
|
throw new Error('File too large (max 5MB)')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type check
|
||||||
|
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
|
||||||
|
if (!allowedTypes.includes(file.type)) {
|
||||||
|
throw new Error('Invalid file type')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extension check
|
||||||
|
const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif']
|
||||||
|
const extension = file.name.toLowerCase().match(/\.[^.]+$/)?.[0]
|
||||||
|
if (!extension || !allowedExtensions.includes(extension)) {
|
||||||
|
throw new Error('Invalid file extension')
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] All user inputs validated with schemas
|
||||||
|
- [ ] File uploads restricted (size, type, extension)
|
||||||
|
- [ ] No direct use of user input in queries
|
||||||
|
- [ ] Whitelist validation (not blacklist)
|
||||||
|
- [ ] Error messages don't leak sensitive info
|
||||||
|
|
||||||
|
### 3. SQL Injection Prevention
|
||||||
|
|
||||||
|
#### ❌ NEVER Concatenate SQL
|
||||||
|
```typescript
|
||||||
|
// DANGEROUS - SQL Injection vulnerability
|
||||||
|
const query = `SELECT * FROM users WHERE email = '${userEmail}'`
|
||||||
|
await db.query(query)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### ✅ ALWAYS Use Parameterized Queries
|
||||||
|
```typescript
|
||||||
|
// Safe - parameterized query
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('users')
|
||||||
|
.select('*')
|
||||||
|
.eq('email', userEmail)
|
||||||
|
|
||||||
|
// Or with raw SQL
|
||||||
|
await db.query(
|
||||||
|
'SELECT * FROM users WHERE email = $1',
|
||||||
|
[userEmail]
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] All database queries use parameterized queries
|
||||||
|
- [ ] No string concatenation in SQL
|
||||||
|
- [ ] ORM/query builder used correctly
|
||||||
|
- [ ] Supabase queries properly sanitized
|
||||||
|
|
||||||
|
### 4. Authentication & Authorization
|
||||||
|
|
||||||
|
#### JWT Token Handling
|
||||||
|
```typescript
|
||||||
|
// ❌ WRONG: localStorage (vulnerable to XSS)
|
||||||
|
localStorage.setItem('token', token)
|
||||||
|
|
||||||
|
// ✅ CORRECT: httpOnly cookies
|
||||||
|
res.setHeader('Set-Cookie',
|
||||||
|
`token=${token}; HttpOnly; Secure; SameSite=Strict; Max-Age=3600`)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Authorization Checks
|
||||||
|
```typescript
|
||||||
|
export async function deleteUser(userId: string, requesterId: string) {
|
||||||
|
// ALWAYS verify authorization first
|
||||||
|
const requester = await db.users.findUnique({
|
||||||
|
where: { id: requesterId }
|
||||||
|
})
|
||||||
|
|
||||||
|
if (requester.role !== 'admin') {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Unauthorized' },
|
||||||
|
{ status: 403 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Proceed with deletion
|
||||||
|
await db.users.delete({ where: { id: userId } })
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Row Level Security (Supabase)
|
||||||
|
```sql
|
||||||
|
-- Enable RLS on all tables
|
||||||
|
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
|
||||||
|
|
||||||
|
-- Users can only view their own data
|
||||||
|
CREATE POLICY "Users view own data"
|
||||||
|
ON users FOR SELECT
|
||||||
|
USING (auth.uid() = id);
|
||||||
|
|
||||||
|
-- Users can only update their own data
|
||||||
|
CREATE POLICY "Users update own data"
|
||||||
|
ON users FOR UPDATE
|
||||||
|
USING (auth.uid() = id);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] Tokens stored in httpOnly cookies (not localStorage)
|
||||||
|
- [ ] Authorization checks before sensitive operations
|
||||||
|
- [ ] Row Level Security enabled in Supabase
|
||||||
|
- [ ] Role-based access control implemented
|
||||||
|
- [ ] Session management secure
|
||||||
|
|
||||||
|
### 5. XSS Prevention
|
||||||
|
|
||||||
|
#### Sanitize HTML
|
||||||
|
```typescript
|
||||||
|
import DOMPurify from 'isomorphic-dompurify'
|
||||||
|
|
||||||
|
// ALWAYS sanitize user-provided HTML
|
||||||
|
function renderUserContent(html: string) {
|
||||||
|
const clean = DOMPurify.sanitize(html, {
|
||||||
|
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p'],
|
||||||
|
ALLOWED_ATTR: []
|
||||||
|
})
|
||||||
|
return <div dangerouslySetInnerHTML={{ __html: clean }} />
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Content Security Policy
|
||||||
|
```typescript
|
||||||
|
// next.config.js
|
||||||
|
const securityHeaders = [
|
||||||
|
{
|
||||||
|
key: 'Content-Security-Policy',
|
||||||
|
value: `
|
||||||
|
default-src 'self';
|
||||||
|
script-src 'self' 'unsafe-eval' 'unsafe-inline';
|
||||||
|
style-src 'self' 'unsafe-inline';
|
||||||
|
img-src 'self' data: https:;
|
||||||
|
font-src 'self';
|
||||||
|
connect-src 'self' https://api.example.com;
|
||||||
|
`.replace(/\s{2,}/g, ' ').trim()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] User-provided HTML sanitized
|
||||||
|
- [ ] CSP headers configured
|
||||||
|
- [ ] No unvalidated dynamic content rendering
|
||||||
|
- [ ] React's built-in XSS protection used
|
||||||
|
|
||||||
|
### 6. CSRF Protection
|
||||||
|
|
||||||
|
#### CSRF Tokens
|
||||||
|
```typescript
|
||||||
|
import { csrf } from '@/lib/csrf'
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const token = request.headers.get('X-CSRF-Token')
|
||||||
|
|
||||||
|
if (!csrf.verify(token)) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Invalid CSRF token' },
|
||||||
|
{ status: 403 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process request
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### SameSite Cookies
|
||||||
|
```typescript
|
||||||
|
res.setHeader('Set-Cookie',
|
||||||
|
`session=${sessionId}; HttpOnly; Secure; SameSite=Strict`)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] CSRF tokens on state-changing operations
|
||||||
|
- [ ] SameSite=Strict on all cookies
|
||||||
|
- [ ] Double-submit cookie pattern implemented
|
||||||
|
|
||||||
|
### 7. Rate Limiting
|
||||||
|
|
||||||
|
#### API Rate Limiting
|
||||||
|
```typescript
|
||||||
|
import rateLimit from 'express-rate-limit'
|
||||||
|
|
||||||
|
const limiter = rateLimit({
|
||||||
|
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||||
|
max: 100, // 100 requests per window
|
||||||
|
message: 'Too many requests'
|
||||||
|
})
|
||||||
|
|
||||||
|
// Apply to routes
|
||||||
|
app.use('/api/', limiter)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Expensive Operations
|
||||||
|
```typescript
|
||||||
|
// Aggressive rate limiting for searches
|
||||||
|
const searchLimiter = rateLimit({
|
||||||
|
windowMs: 60 * 1000, // 1 minute
|
||||||
|
max: 10, // 10 requests per minute
|
||||||
|
message: 'Too many search requests'
|
||||||
|
})
|
||||||
|
|
||||||
|
app.use('/api/search', searchLimiter)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] Rate limiting on all API endpoints
|
||||||
|
- [ ] Stricter limits on expensive operations
|
||||||
|
- [ ] IP-based rate limiting
|
||||||
|
- [ ] User-based rate limiting (authenticated)
|
||||||
|
|
||||||
|
### 8. Sensitive Data Exposure
|
||||||
|
|
||||||
|
#### Logging
|
||||||
|
```typescript
|
||||||
|
// ❌ WRONG: Logging sensitive data
|
||||||
|
console.log('User login:', { email, password })
|
||||||
|
console.log('Payment:', { cardNumber, cvv })
|
||||||
|
|
||||||
|
// ✅ CORRECT: Redact sensitive data
|
||||||
|
console.log('User login:', { email, userId })
|
||||||
|
console.log('Payment:', { last4: card.last4, userId })
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Error Messages
|
||||||
|
```typescript
|
||||||
|
// ❌ WRONG: Exposing internal details
|
||||||
|
catch (error) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: error.message, stack: error.stack },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ CORRECT: Generic error messages
|
||||||
|
catch (error) {
|
||||||
|
console.error('Internal error:', error)
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'An error occurred. Please try again.' },
|
||||||
|
{ status: 500 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] No passwords, tokens, or secrets in logs
|
||||||
|
- [ ] Error messages generic for users
|
||||||
|
- [ ] Detailed errors only in server logs
|
||||||
|
- [ ] No stack traces exposed to users
|
||||||
|
|
||||||
|
### 9. Blockchain Security (Solana)
|
||||||
|
|
||||||
|
#### Wallet Verification
|
||||||
|
```typescript
|
||||||
|
import { verify } from '@solana/web3.js'
|
||||||
|
|
||||||
|
async function verifyWalletOwnership(
|
||||||
|
publicKey: string,
|
||||||
|
signature: string,
|
||||||
|
message: string
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const isValid = verify(
|
||||||
|
Buffer.from(message),
|
||||||
|
Buffer.from(signature, 'base64'),
|
||||||
|
Buffer.from(publicKey, 'base64')
|
||||||
|
)
|
||||||
|
return isValid
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Transaction Verification
|
||||||
|
```typescript
|
||||||
|
async function verifyTransaction(transaction: Transaction) {
|
||||||
|
// Verify recipient
|
||||||
|
if (transaction.to !== expectedRecipient) {
|
||||||
|
throw new Error('Invalid recipient')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify amount
|
||||||
|
if (transaction.amount > maxAmount) {
|
||||||
|
throw new Error('Amount exceeds limit')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify user has sufficient balance
|
||||||
|
const balance = await getBalance(transaction.from)
|
||||||
|
if (balance < transaction.amount) {
|
||||||
|
throw new Error('Insufficient balance')
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] Wallet signatures verified
|
||||||
|
- [ ] Transaction details validated
|
||||||
|
- [ ] Balance checks before transactions
|
||||||
|
- [ ] No blind transaction signing
|
||||||
|
|
||||||
|
### 10. Dependency Security
|
||||||
|
|
||||||
|
#### Regular Updates
|
||||||
|
```bash
|
||||||
|
# Check for vulnerabilities
|
||||||
|
npm audit
|
||||||
|
|
||||||
|
# Fix automatically fixable issues
|
||||||
|
npm audit fix
|
||||||
|
|
||||||
|
# Update dependencies
|
||||||
|
npm update
|
||||||
|
|
||||||
|
# Check for outdated packages
|
||||||
|
npm outdated
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Lock Files
|
||||||
|
```bash
|
||||||
|
# ALWAYS commit lock files
|
||||||
|
git add package-lock.json
|
||||||
|
|
||||||
|
# Use in CI/CD for reproducible builds
|
||||||
|
npm ci # Instead of npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Verification Steps
|
||||||
|
- [ ] Dependencies up to date
|
||||||
|
- [ ] No known vulnerabilities (npm audit clean)
|
||||||
|
- [ ] Lock files committed
|
||||||
|
- [ ] Dependabot enabled on GitHub
|
||||||
|
- [ ] Regular security updates
|
||||||
|
|
||||||
|
## Security Testing
|
||||||
|
|
||||||
|
### Automated Security Tests
|
||||||
|
```typescript
|
||||||
|
// Test authentication
|
||||||
|
test('requires authentication', async () => {
|
||||||
|
const response = await fetch('/api/protected')
|
||||||
|
expect(response.status).toBe(401)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Test authorization
|
||||||
|
test('requires admin role', async () => {
|
||||||
|
const response = await fetch('/api/admin', {
|
||||||
|
headers: { Authorization: `Bearer ${userToken}` }
|
||||||
|
})
|
||||||
|
expect(response.status).toBe(403)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Test input validation
|
||||||
|
test('rejects invalid input', async () => {
|
||||||
|
const response = await fetch('/api/users', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email: 'not-an-email' })
|
||||||
|
})
|
||||||
|
expect(response.status).toBe(400)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Test rate limiting
|
||||||
|
test('enforces rate limits', async () => {
|
||||||
|
const requests = Array(101).fill(null).map(() =>
|
||||||
|
fetch('/api/endpoint')
|
||||||
|
)
|
||||||
|
|
||||||
|
const responses = await Promise.all(requests)
|
||||||
|
const tooManyRequests = responses.filter(r => r.status === 429)
|
||||||
|
|
||||||
|
expect(tooManyRequests.length).toBeGreaterThan(0)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Pre-Deployment Security Checklist
|
||||||
|
|
||||||
|
Before ANY production deployment:
|
||||||
|
|
||||||
|
- [ ] **Secrets**: No hardcoded secrets, all in env vars
|
||||||
|
- [ ] **Input Validation**: All user inputs validated
|
||||||
|
- [ ] **SQL Injection**: All queries parameterized
|
||||||
|
- [ ] **XSS**: User content sanitized
|
||||||
|
- [ ] **CSRF**: Protection enabled
|
||||||
|
- [ ] **Authentication**: Proper token handling
|
||||||
|
- [ ] **Authorization**: Role checks in place
|
||||||
|
- [ ] **Rate Limiting**: Enabled on all endpoints
|
||||||
|
- [ ] **HTTPS**: Enforced in production
|
||||||
|
- [ ] **Security Headers**: CSP, X-Frame-Options configured
|
||||||
|
- [ ] **Error Handling**: No sensitive data in errors
|
||||||
|
- [ ] **Logging**: No sensitive data logged
|
||||||
|
- [ ] **Dependencies**: Up to date, no vulnerabilities
|
||||||
|
- [ ] **Row Level Security**: Enabled in Supabase
|
||||||
|
- [ ] **CORS**: Properly configured
|
||||||
|
- [ ] **File Uploads**: Validated (size, type)
|
||||||
|
- [ ] **Wallet Signatures**: Verified (if blockchain)
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
|
||||||
|
- [Next.js Security](https://nextjs.org/docs/security)
|
||||||
|
- [Supabase Security](https://supabase.com/docs/guides/auth)
|
||||||
|
- [Web Security Academy](https://portswigger.net/web-security)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Remember**: Security is not optional. One vulnerability can compromise the entire platform. When in doubt, err on the side of caution.
|
||||||
10
skills/cc-skill-strategic-compact/SKILL.md
Normal file
10
skills/cc-skill-strategic-compact/SKILL.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
name: cc-skill-strategic-compact
|
||||||
|
description: Development skill skill from everything-claude-code
|
||||||
|
author: affaan-m
|
||||||
|
version: "1.0"
|
||||||
|
---
|
||||||
|
|
||||||
|
# cc-skill-strategic-compact
|
||||||
|
|
||||||
|
Development skill skill.
|
||||||
52
skills/cc-skill-strategic-compact/suggest-compact.sh
Executable file
52
skills/cc-skill-strategic-compact/suggest-compact.sh
Executable file
@@ -0,0 +1,52 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# Strategic Compact Suggester
|
||||||
|
# Runs on PreToolUse or periodically to suggest manual compaction at logical intervals
|
||||||
|
#
|
||||||
|
# Why manual over auto-compact:
|
||||||
|
# - Auto-compact happens at arbitrary points, often mid-task
|
||||||
|
# - Strategic compacting preserves context through logical phases
|
||||||
|
# - Compact after exploration, before execution
|
||||||
|
# - Compact after completing a milestone, before starting next
|
||||||
|
#
|
||||||
|
# Hook config (in ~/.claude/settings.json):
|
||||||
|
# {
|
||||||
|
# "hooks": {
|
||||||
|
# "PreToolUse": [{
|
||||||
|
# "matcher": "Edit|Write",
|
||||||
|
# "hooks": [{
|
||||||
|
# "type": "command",
|
||||||
|
# "command": "~/.claude/skills/strategic-compact/suggest-compact.sh"
|
||||||
|
# }]
|
||||||
|
# }]
|
||||||
|
# }
|
||||||
|
# }
|
||||||
|
#
|
||||||
|
# Criteria for suggesting compact:
|
||||||
|
# - Session has been running for extended period
|
||||||
|
# - Large number of tool calls made
|
||||||
|
# - Transitioning from research/exploration to implementation
|
||||||
|
# - Plan has been finalized
|
||||||
|
|
||||||
|
# Track tool call count (increment in a temp file)
|
||||||
|
COUNTER_FILE="/tmp/claude-tool-count-$$"
|
||||||
|
THRESHOLD=${COMPACT_THRESHOLD:-50}
|
||||||
|
|
||||||
|
# Initialize or increment counter
|
||||||
|
if [ -f "$COUNTER_FILE" ]; then
|
||||||
|
count=$(cat "$COUNTER_FILE")
|
||||||
|
count=$((count + 1))
|
||||||
|
echo "$count" > "$COUNTER_FILE"
|
||||||
|
else
|
||||||
|
echo "1" > "$COUNTER_FILE"
|
||||||
|
count=1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Suggest compact after threshold tool calls
|
||||||
|
if [ "$count" -eq "$THRESHOLD" ]; then
|
||||||
|
echo "[StrategicCompact] $THRESHOLD tool calls reached - consider /compact if transitioning phases" >&2
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Suggest at regular intervals after threshold
|
||||||
|
if [ "$count" -gt "$THRESHOLD" ] && [ $((count % 25)) -eq 0 ]; then
|
||||||
|
echo "[StrategicCompact] $count tool calls - good checkpoint for /compact if context is stale" >&2
|
||||||
|
fi
|
||||||
45
skills/remotion-best-practices/SKILL.md
Normal file
45
skills/remotion-best-practices/SKILL.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
name: remotion-best-practices
|
||||||
|
description: Best practices for Remotion - Video creation in React
|
||||||
|
author: remotion-dev
|
||||||
|
version: "1.0"
|
||||||
|
metadata:
|
||||||
|
tags: remotion, video, react, animation, composition
|
||||||
|
---
|
||||||
|
|
||||||
|
## When to use
|
||||||
|
|
||||||
|
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Read individual rule files for detailed explanations and code examples:
|
||||||
|
|
||||||
|
- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
|
||||||
|
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
|
||||||
|
- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
|
||||||
|
- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
|
||||||
|
- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
|
||||||
|
- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
|
||||||
|
- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion
|
||||||
|
- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
|
||||||
|
- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting
|
||||||
|
- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
|
||||||
|
- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
|
||||||
|
- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
|
||||||
|
- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
|
||||||
|
- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
|
||||||
|
- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
|
||||||
|
- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
|
||||||
|
- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions
|
||||||
|
- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
|
||||||
|
- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
|
||||||
|
- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
|
||||||
|
- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
|
||||||
|
- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
|
||||||
|
- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
|
||||||
|
- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
|
||||||
|
- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion
|
||||||
|
- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
|
||||||
|
- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
|
||||||
|
- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
|
||||||
86
skills/remotion-best-practices/rules/3d.md
Normal file
86
skills/remotion-best-practices/rules/3d.md
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
name: 3d
|
||||||
|
description: 3D content in Remotion using Three.js and React Three Fiber.
|
||||||
|
metadata:
|
||||||
|
tags: 3d, three, threejs
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using Three.js and React Three Fiber in Remotion
|
||||||
|
|
||||||
|
Follow React Three Fiber and Three.js best practices.
|
||||||
|
Only the following Remotion-specific rules need to be followed:
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the `@remotion/three` package needs to be installed.
|
||||||
|
If it is not, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/three # If project uses npm
|
||||||
|
bunx remotion add @remotion/three # If project uses bun
|
||||||
|
yarn remotion add @remotion/three # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/three # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using ThreeCanvas
|
||||||
|
|
||||||
|
You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.
|
||||||
|
`<ThreeCanvas>` MUST have a `width` and `height` prop.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { ThreeCanvas } from "@remotion/three";
|
||||||
|
import { useVideoConfig } from "remotion";
|
||||||
|
|
||||||
|
const { width, height } = useVideoConfig();
|
||||||
|
|
||||||
|
<ThreeCanvas width={width} height={height}>
|
||||||
|
<ambientLight intensity={0.4} />
|
||||||
|
<directionalLight position={[5, 5, 5]} intensity={0.8} />
|
||||||
|
<mesh>
|
||||||
|
<sphereGeometry args={[1, 32, 32]} />
|
||||||
|
<meshStandardMaterial color="red" />
|
||||||
|
</mesh>
|
||||||
|
</ThreeCanvas>
|
||||||
|
```
|
||||||
|
|
||||||
|
## No animations not driven by `useCurrentFrame()`
|
||||||
|
|
||||||
|
Shaders, models etc MUST NOT animate by themselves.
|
||||||
|
No animations are allowed unless they are driven by `useCurrentFrame()`.
|
||||||
|
Otherwise, it will cause flickering during rendering.
|
||||||
|
|
||||||
|
Using `useFrame()` from `@react-three/fiber` is forbidden.
|
||||||
|
|
||||||
|
## Animate using `useCurrentFrame()`
|
||||||
|
|
||||||
|
Use `useCurrentFrame()` to perform animations.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const rotationY = frame * 0.02;
|
||||||
|
|
||||||
|
<mesh rotation={[0, rotationY, 0]}>
|
||||||
|
<boxGeometry args={[2, 2, 2]} />
|
||||||
|
<meshStandardMaterial color="#4a9eff" />
|
||||||
|
</mesh>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using `<Sequence>` inside `<ThreeCanvas>`
|
||||||
|
|
||||||
|
The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Sequence } from "remotion";
|
||||||
|
import { ThreeCanvas } from "@remotion/three";
|
||||||
|
|
||||||
|
const { width, height } = useVideoConfig();
|
||||||
|
|
||||||
|
<ThreeCanvas width={width} height={height}>
|
||||||
|
<Sequence layout="none">
|
||||||
|
<mesh>
|
||||||
|
<boxGeometry args={[2, 2, 2]} />
|
||||||
|
<meshStandardMaterial color="#4a9eff" />
|
||||||
|
</mesh>
|
||||||
|
</Sequence>
|
||||||
|
</ThreeCanvas>
|
||||||
|
```
|
||||||
29
skills/remotion-best-practices/rules/animations.md
Normal file
29
skills/remotion-best-practices/rules/animations.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
name: animations
|
||||||
|
description: Fundamental animation skills for Remotion
|
||||||
|
metadata:
|
||||||
|
tags: animations, transitions, frames, useCurrentFrame
|
||||||
|
---
|
||||||
|
|
||||||
|
All animations MUST be driven by the `useCurrentFrame()` hook.
|
||||||
|
Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useCurrentFrame } from "remotion";
|
||||||
|
|
||||||
|
export const FadeIn = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ opacity }}>Hello World!</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
CSS transitions or animations are FORBIDDEN - they will not render correctly.
|
||||||
|
Tailwind animation class names are FORBIDDEN - they will not render correctly.
|
||||||
78
skills/remotion-best-practices/rules/assets.md
Normal file
78
skills/remotion-best-practices/rules/assets.md
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
---
|
||||||
|
name: assets
|
||||||
|
description: Importing images, videos, audio, and fonts into Remotion
|
||||||
|
metadata:
|
||||||
|
tags: assets, staticFile, images, fonts, public
|
||||||
|
---
|
||||||
|
|
||||||
|
# Importing assets in Remotion
|
||||||
|
|
||||||
|
## The public folder
|
||||||
|
|
||||||
|
Place assets in the `public/` folder at your project root.
|
||||||
|
|
||||||
|
## Using staticFile()
|
||||||
|
|
||||||
|
You MUST use `staticFile()` to reference files from the `public/` folder:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Img, staticFile} from 'remotion';
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <Img src={staticFile('logo.png')} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The function returns an encoded URL that works correctly when deploying to subdirectories.
|
||||||
|
|
||||||
|
## Using with components
|
||||||
|
|
||||||
|
**Images:**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Img, staticFile} from 'remotion';
|
||||||
|
|
||||||
|
<Img src={staticFile('photo.png')} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Videos:**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Video} from '@remotion/media';
|
||||||
|
import {staticFile} from 'remotion';
|
||||||
|
|
||||||
|
<Video src={staticFile('clip.mp4')} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Audio:**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Audio} from '@remotion/media';
|
||||||
|
import {staticFile} from 'remotion';
|
||||||
|
|
||||||
|
<Audio src={staticFile('music.mp3')} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Fonts:**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {staticFile} from 'remotion';
|
||||||
|
|
||||||
|
const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
|
||||||
|
await fontFamily.load();
|
||||||
|
document.fonts.add(fontFamily);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Remote URLs
|
||||||
|
|
||||||
|
Remote URLs can be used directly without `staticFile()`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Img src="https://example.com/image.png" />
|
||||||
|
<Video src="https://remotion.media/video.mp4" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Important notes
|
||||||
|
|
||||||
|
- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
|
||||||
|
- Special characters in filenames (`#`, `?`, `&`) are automatically encoded
|
||||||
173
skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx
Normal file
173
skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import {loadFont} from '@remotion/google-fonts/Inter';
|
||||||
|
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
|
||||||
|
|
||||||
|
const {fontFamily} = loadFont();
|
||||||
|
|
||||||
|
const COLOR_BAR = '#D4AF37';
|
||||||
|
const COLOR_TEXT = '#ffffff';
|
||||||
|
const COLOR_MUTED = '#888888';
|
||||||
|
const COLOR_BG = '#0a0a0a';
|
||||||
|
const COLOR_AXIS = '#333333';
|
||||||
|
|
||||||
|
// Ideal composition size: 1280x720
|
||||||
|
|
||||||
|
const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
|
||||||
|
<div style={{textAlign: 'center', marginBottom: 40}}>
|
||||||
|
<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const YAxis: React.FC<{steps: number[]; height: number}> = ({
|
||||||
|
steps,
|
||||||
|
height,
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
height,
|
||||||
|
paddingRight: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{steps
|
||||||
|
.slice()
|
||||||
|
.reverse()
|
||||||
|
.map((step) => (
|
||||||
|
<div
|
||||||
|
key={step}
|
||||||
|
style={{
|
||||||
|
color: COLOR_MUTED,
|
||||||
|
fontSize: 20,
|
||||||
|
textAlign: 'right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{step.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Bar: React.FC<{
|
||||||
|
height: number;
|
||||||
|
progress: number;
|
||||||
|
}> = ({height, progress}) => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height,
|
||||||
|
backgroundColor: COLOR_BAR,
|
||||||
|
borderRadius: '8px 8px 0 0',
|
||||||
|
opacity: progress,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const XAxis: React.FC<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
labels: string[];
|
||||||
|
height: number;
|
||||||
|
}> = ({children, labels, height}) => (
|
||||||
|
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
gap: 16,
|
||||||
|
height,
|
||||||
|
borderLeft: `2px solid ${COLOR_AXIS}`,
|
||||||
|
borderBottom: `2px solid ${COLOR_AXIS}`,
|
||||||
|
paddingLeft: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: 16,
|
||||||
|
paddingLeft: 16,
|
||||||
|
marginTop: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{labels.map((label) => (
|
||||||
|
<div
|
||||||
|
key={label}
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
textAlign: 'center',
|
||||||
|
color: COLOR_MUTED,
|
||||||
|
fontSize: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MyAnimation = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps, height} = useVideoConfig();
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{month: 'Jan', price: 2039},
|
||||||
|
{month: 'Mar', price: 2160},
|
||||||
|
{month: 'May', price: 2327},
|
||||||
|
{month: 'Jul', price: 2426},
|
||||||
|
{month: 'Sep', price: 2634},
|
||||||
|
{month: 'Nov', price: 2672},
|
||||||
|
];
|
||||||
|
|
||||||
|
const minPrice = 2000;
|
||||||
|
const maxPrice = 2800;
|
||||||
|
const priceRange = maxPrice - minPrice;
|
||||||
|
const chartHeight = height - 280;
|
||||||
|
const yAxisSteps = [2000, 2400, 2800];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{
|
||||||
|
backgroundColor: COLOR_BG,
|
||||||
|
padding: 60,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
fontFamily,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Title>Gold Price 2024</Title>
|
||||||
|
|
||||||
|
<div style={{display: 'flex', flex: 1}}>
|
||||||
|
<YAxis steps={yAxisSteps} height={chartHeight} />
|
||||||
|
<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
|
||||||
|
{data.map((item, i) => {
|
||||||
|
const progress = spring({
|
||||||
|
frame: frame - i * 5 - 10,
|
||||||
|
fps,
|
||||||
|
config: {damping: 18, stiffness: 80},
|
||||||
|
});
|
||||||
|
|
||||||
|
const barHeight =
|
||||||
|
((item.price - minPrice) / priceRange) * chartHeight * progress;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Bar key={item.month} height={barHeight} progress={progress} />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</XAxis>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import {
|
||||||
|
AbsoluteFill,
|
||||||
|
interpolate,
|
||||||
|
useCurrentFrame,
|
||||||
|
useVideoConfig,
|
||||||
|
} from 'remotion';
|
||||||
|
|
||||||
|
const COLOR_BG = '#ffffff';
|
||||||
|
const COLOR_TEXT = '#000000';
|
||||||
|
const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
|
||||||
|
const PAUSE_AFTER = 'From prompt to motion graphics.';
|
||||||
|
const FONT_SIZE = 72;
|
||||||
|
const FONT_WEIGHT = 700;
|
||||||
|
const CHAR_FRAMES = 2;
|
||||||
|
const CURSOR_BLINK_FRAMES = 16;
|
||||||
|
const PAUSE_SECONDS = 1;
|
||||||
|
|
||||||
|
// Ideal composition size: 1280x720
|
||||||
|
|
||||||
|
const getTypedText = ({
|
||||||
|
frame,
|
||||||
|
fullText,
|
||||||
|
pauseAfter,
|
||||||
|
charFrames,
|
||||||
|
pauseFrames,
|
||||||
|
}: {
|
||||||
|
frame: number;
|
||||||
|
fullText: string;
|
||||||
|
pauseAfter: string;
|
||||||
|
charFrames: number;
|
||||||
|
pauseFrames: number;
|
||||||
|
}): string => {
|
||||||
|
const pauseIndex = fullText.indexOf(pauseAfter);
|
||||||
|
const preLen =
|
||||||
|
pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
|
||||||
|
|
||||||
|
let typedChars = 0;
|
||||||
|
if (frame < preLen * charFrames) {
|
||||||
|
typedChars = Math.floor(frame / charFrames);
|
||||||
|
} else if (frame < preLen * charFrames + pauseFrames) {
|
||||||
|
typedChars = preLen;
|
||||||
|
} else {
|
||||||
|
const postPhase = frame - preLen * charFrames - pauseFrames;
|
||||||
|
typedChars = Math.min(
|
||||||
|
fullText.length,
|
||||||
|
preLen + Math.floor(postPhase / charFrames),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return fullText.slice(0, typedChars);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Cursor: React.FC<{
|
||||||
|
frame: number;
|
||||||
|
blinkFrames: number;
|
||||||
|
symbol?: string;
|
||||||
|
}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
|
||||||
|
const opacity = interpolate(
|
||||||
|
frame % blinkFrames,
|
||||||
|
[0, blinkFrames / 2, blinkFrames],
|
||||||
|
[1, 0, 1],
|
||||||
|
{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
|
||||||
|
);
|
||||||
|
|
||||||
|
return <span style={{opacity}}>{symbol}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MyAnimation = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
const pauseFrames = Math.round(fps * PAUSE_SECONDS);
|
||||||
|
|
||||||
|
const typedText = getTypedText({
|
||||||
|
frame,
|
||||||
|
fullText: FULL_TEXT,
|
||||||
|
pauseAfter: PAUSE_AFTER,
|
||||||
|
charFrames: CHAR_FRAMES,
|
||||||
|
pauseFrames,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{
|
||||||
|
backgroundColor: COLOR_BG,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: COLOR_TEXT,
|
||||||
|
fontSize: FONT_SIZE,
|
||||||
|
fontWeight: FONT_WEIGHT,
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{typedText}</span>
|
||||||
|
<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
import {loadFont} from '@remotion/google-fonts/Inter';
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
AbsoluteFill,
|
||||||
|
spring,
|
||||||
|
useCurrentFrame,
|
||||||
|
useVideoConfig,
|
||||||
|
} from 'remotion';
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Highlight a word in a sentence with a spring-animated wipe effect.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Ideal composition size: 1280x720
|
||||||
|
|
||||||
|
const COLOR_BG = '#ffffff';
|
||||||
|
const COLOR_TEXT = '#000000';
|
||||||
|
const COLOR_HIGHLIGHT = '#A7C7E7';
|
||||||
|
const FULL_TEXT = 'This is Remotion.';
|
||||||
|
const HIGHLIGHT_WORD = 'Remotion';
|
||||||
|
const FONT_SIZE = 72;
|
||||||
|
const FONT_WEIGHT = 700;
|
||||||
|
const HIGHLIGHT_START_FRAME = 30;
|
||||||
|
const HIGHLIGHT_WIPE_DURATION = 18;
|
||||||
|
|
||||||
|
const {fontFamily} = loadFont();
|
||||||
|
|
||||||
|
const Highlight: React.FC<{
|
||||||
|
word: string;
|
||||||
|
color: string;
|
||||||
|
delay: number;
|
||||||
|
durationInFrames: number;
|
||||||
|
}> = ({word, color, delay, durationInFrames}) => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
const highlightProgress = spring({
|
||||||
|
fps,
|
||||||
|
frame,
|
||||||
|
config: {damping: 200},
|
||||||
|
delay,
|
||||||
|
durationInFrames,
|
||||||
|
});
|
||||||
|
const scaleX = Math.max(0, Math.min(1, highlightProgress));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span style={{position: 'relative', display: 'inline-block'}}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: '50%',
|
||||||
|
height: '1.05em',
|
||||||
|
transform: `translateY(-50%) scaleX(${scaleX})`,
|
||||||
|
transformOrigin: 'left center',
|
||||||
|
backgroundColor: color,
|
||||||
|
borderRadius: '0.18em',
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span style={{position: 'relative', zIndex: 1}}>{word}</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MyAnimation = () => {
|
||||||
|
const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
|
||||||
|
const hasHighlight = highlightIndex >= 0;
|
||||||
|
const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
|
||||||
|
const postText = hasHighlight
|
||||||
|
? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{
|
||||||
|
backgroundColor: COLOR_BG,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontFamily,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: COLOR_TEXT,
|
||||||
|
fontSize: FONT_SIZE,
|
||||||
|
fontWeight: FONT_WEIGHT,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hasHighlight ? (
|
||||||
|
<>
|
||||||
|
<span>{preText}</span>
|
||||||
|
<Highlight
|
||||||
|
word={HIGHLIGHT_WORD}
|
||||||
|
color={COLOR_HIGHLIGHT}
|
||||||
|
delay={HIGHLIGHT_START_FRAME}
|
||||||
|
durationInFrames={HIGHLIGHT_WIPE_DURATION}
|
||||||
|
/>
|
||||||
|
<span>{postText}</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span>{FULL_TEXT}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
172
skills/remotion-best-practices/rules/audio.md
Normal file
172
skills/remotion-best-practices/rules/audio.md
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
---
|
||||||
|
name: audio
|
||||||
|
description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
|
||||||
|
metadata:
|
||||||
|
tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using audio in Remotion
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/media package needs to be installed.
|
||||||
|
If it is not installed, 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
|
||||||
|
```
|
||||||
|
|
||||||
|
## Importing Audio
|
||||||
|
|
||||||
|
Use `<Audio>` from `@remotion/media` to add audio to your composition.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Audio } from "@remotion/media";
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <Audio src={staticFile("audio.mp3")} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Remote URLs are also supported:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Audio src="https://remotion.media/audio.mp3" />
|
||||||
|
```
|
||||||
|
|
||||||
|
By default, audio plays from the start, at full volume and full length.
|
||||||
|
Multiple audio tracks can be layered by adding multiple `<Audio>` components.
|
||||||
|
|
||||||
|
## Trimming
|
||||||
|
|
||||||
|
Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
trimBefore={2 * fps} // Skip the first 2 seconds
|
||||||
|
trimAfter={10 * fps} // End at the 10 second mark
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
The audio still starts playing at the beginning of the composition - only the specified portion is played.
|
||||||
|
|
||||||
|
## Delaying
|
||||||
|
|
||||||
|
Wrap the audio in a `<Sequence>` to delay when it starts:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Sequence, staticFile } from "remotion";
|
||||||
|
import { Audio } from "@remotion/media";
|
||||||
|
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sequence from={1 * fps}>
|
||||||
|
<Audio src={staticFile("audio.mp3")} />
|
||||||
|
</Sequence>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
The audio will start playing after 1 second.
|
||||||
|
|
||||||
|
## Volume
|
||||||
|
|
||||||
|
Set a static volume (0 to 1):
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Audio src={staticFile("audio.mp3")} volume={0.5} />
|
||||||
|
```
|
||||||
|
|
||||||
|
Or use a callback for dynamic volume based on the current frame:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { interpolate } from "remotion";
|
||||||
|
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
volume={(f) =>
|
||||||
|
interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
The value of `f` starts at 0 when the audio begins to play, not the composition frame.
|
||||||
|
|
||||||
|
## Muting
|
||||||
|
|
||||||
|
Use `muted` to silence the audio. It can be set dynamically:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Speed
|
||||||
|
|
||||||
|
Use `playbackRate` to change the playback speed:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
|
||||||
|
<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
|
||||||
|
```
|
||||||
|
|
||||||
|
Reverse playback is not supported.
|
||||||
|
|
||||||
|
## Looping
|
||||||
|
|
||||||
|
Use `loop` to loop the audio indefinitely:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Audio src={staticFile("audio.mp3")} loop />
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
|
||||||
|
|
||||||
|
- `"repeat"`: Frame count resets to 0 each loop (default)
|
||||||
|
- `"extend"`: Frame count continues incrementing
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
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
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
toneFrequency={1.5} // Higher pitch
|
||||||
|
/>
|
||||||
|
<Audio
|
||||||
|
src={staticFile("audio.mp3")}
|
||||||
|
toneFrequency={0.8} // Lower pitch
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.
|
||||||
104
skills/remotion-best-practices/rules/calculate-metadata.md
Normal file
104
skills/remotion-best-practices/rules/calculate-metadata.md
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
name: calculate-metadata
|
||||||
|
description: Dynamically set composition duration, dimensions, and props
|
||||||
|
metadata:
|
||||||
|
tags: calculateMetadata, duration, dimensions, props, dynamic
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using calculateMetadata
|
||||||
|
|
||||||
|
Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Setting duration based on a video
|
||||||
|
|
||||||
|
Use the `getMediaMetadata()` function from the mediabunny/metadata skill to get the video duration:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {CalculateMetadataFunction} from 'remotion';
|
||||||
|
import {getMediaMetadata} from '../get-media-metadata';
|
||||||
|
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
|
||||||
|
const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
|
||||||
|
|
||||||
|
return {
|
||||||
|
durationInFrames: Math.ceil(durationInSeconds * 30),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Matching dimensions of a video
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
|
||||||
|
const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
|
||||||
|
|
||||||
|
return {
|
||||||
|
durationInFrames: Math.ceil(durationInSeconds * 30),
|
||||||
|
width: dimensions?.width ?? 1920,
|
||||||
|
height: dimensions?.height ?? 1080,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Setting duration based on multiple videos
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
|
||||||
|
const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
|
||||||
|
const allMetadata = await Promise.all(metadataPromises);
|
||||||
|
|
||||||
|
const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
durationInFrames: Math.ceil(totalDuration * 30),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Setting a default outName
|
||||||
|
|
||||||
|
Set the default output filename based on props:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
|
||||||
|
return {
|
||||||
|
defaultOutName: `video-${props.id}.mp4`,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Transforming props
|
||||||
|
|
||||||
|
Fetch data or transform props before rendering:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
|
||||||
|
const response = await fetch(props.dataUrl, {signal: abortSignal});
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
...props,
|
||||||
|
fetchedData: data,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The `abortSignal` cancels stale requests when props change in the Studio.
|
||||||
|
|
||||||
|
## Return value
|
||||||
|
|
||||||
|
All fields are optional. Returned values override the `<Composition>` props:
|
||||||
|
|
||||||
|
- `durationInFrames`: Number of frames
|
||||||
|
- `width`: Composition width in pixels
|
||||||
|
- `height`: Composition height in pixels
|
||||||
|
- `fps`: Frames per second
|
||||||
|
- `props`: Transformed props passed to the component
|
||||||
|
- `defaultOutName`: Default output filename
|
||||||
|
- `defaultCodec`: Default codec for rendering
|
||||||
75
skills/remotion-best-practices/rules/can-decode.md
Normal file
75
skills/remotion-best-practices/rules/can-decode.md
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
name: can-decode
|
||||||
|
description: Check if a video can be decoded by the browser using Mediabunny
|
||||||
|
metadata:
|
||||||
|
tags: decode, validation, video, audio, compatibility, browser
|
||||||
|
---
|
||||||
|
|
||||||
|
# Checking if a video can be decoded
|
||||||
|
|
||||||
|
Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
|
||||||
|
|
||||||
|
## The `canDecode()` function
|
||||||
|
|
||||||
|
This function can be copy-pasted into any project.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
|
||||||
|
|
||||||
|
export const canDecode = async (src: string) => {
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new UrlSource(src, {
|
||||||
|
getRetryDelay: () => null,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await input.getFormat();
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoTrack = await input.getPrimaryVideoTrack();
|
||||||
|
if (videoTrack && !(await videoTrack.canDecode())) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const audioTrack = await input.getPrimaryAudioTrack();
|
||||||
|
if (audioTrack && !(await audioTrack.canDecode())) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const src = "https://remotion.media/video.mp4";
|
||||||
|
const isDecodable = await canDecode(src);
|
||||||
|
|
||||||
|
if (isDecodable) {
|
||||||
|
console.log("Video can be decoded");
|
||||||
|
} else {
|
||||||
|
console.log("Video cannot be decoded by this browser");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with Blob
|
||||||
|
|
||||||
|
For file uploads or drag-and-drop, use `BlobSource`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
|
||||||
|
|
||||||
|
export const canDecodeBlob = async (blob: Blob) => {
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new BlobSource(blob),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Same validation logic as above
|
||||||
|
};
|
||||||
|
```
|
||||||
58
skills/remotion-best-practices/rules/charts.md
Normal file
58
skills/remotion-best-practices/rules/charts.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
name: charts
|
||||||
|
description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
|
||||||
|
metadata:
|
||||||
|
tags: charts, data, visualization, bar-chart, pie-chart, graphs
|
||||||
|
---
|
||||||
|
|
||||||
|
# Charts in Remotion
|
||||||
|
|
||||||
|
You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
|
||||||
|
|
||||||
|
## No animations not powered by `useCurrentFrame()`
|
||||||
|
|
||||||
|
Disable all animations by third party libraries.
|
||||||
|
They will cause flickering during rendering.
|
||||||
|
Instead, drive all animations from `useCurrentFrame()`.
|
||||||
|
|
||||||
|
## Bar Chart Animations
|
||||||
|
|
||||||
|
See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
|
||||||
|
|
||||||
|
### Staggered Bars
|
||||||
|
|
||||||
|
You can animate the height of the bars and stagger them like this:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const STAGGER_DELAY = 5;
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
const bars = data.map((item, i) => {
|
||||||
|
const delay = i * STAGGER_DELAY;
|
||||||
|
const height = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
delay,
|
||||||
|
config: {damping: 200},
|
||||||
|
});
|
||||||
|
return <div style={{height: height * item.value}} />;
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Pie Chart Animation
|
||||||
|
|
||||||
|
Animate segments using stroke-dashoffset, starting from 12 o'clock.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
const progress = interpolate(frame, [0, 100], [0, 1]);
|
||||||
|
|
||||||
|
const circumference = 2 * Math.PI * radius;
|
||||||
|
const segmentLength = (value / total) * circumference;
|
||||||
|
const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
|
||||||
|
|
||||||
|
<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
|
||||||
|
```
|
||||||
146
skills/remotion-best-practices/rules/compositions.md
Normal file
146
skills/remotion-best-practices/rules/compositions.md
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
name: compositions
|
||||||
|
description: Defining compositions, stills, folders, default props and dynamic metadata
|
||||||
|
metadata:
|
||||||
|
tags: composition, still, folder, props, metadata
|
||||||
|
---
|
||||||
|
|
||||||
|
A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
|
||||||
|
|
||||||
|
It normally is placed in the `src/Root.tsx` file.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Composition } from "remotion";
|
||||||
|
import { MyComposition } from "./MyComposition";
|
||||||
|
|
||||||
|
export const RemotionRoot = () => {
|
||||||
|
return (
|
||||||
|
<Composition
|
||||||
|
id="MyComposition"
|
||||||
|
component={MyComposition}
|
||||||
|
durationInFrames={100}
|
||||||
|
fps={30}
|
||||||
|
width={1080}
|
||||||
|
height={1080}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Default Props
|
||||||
|
|
||||||
|
Pass `defaultProps` to provide initial values for your component.
|
||||||
|
Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Composition } from "remotion";
|
||||||
|
import { MyComposition, MyCompositionProps } from "./MyComposition";
|
||||||
|
|
||||||
|
export const RemotionRoot = () => {
|
||||||
|
return (
|
||||||
|
<Composition
|
||||||
|
id="MyComposition"
|
||||||
|
component={MyComposition}
|
||||||
|
durationInFrames={100}
|
||||||
|
fps={30}
|
||||||
|
width={1080}
|
||||||
|
height={1080}
|
||||||
|
defaultProps={{
|
||||||
|
title: "Hello World",
|
||||||
|
color: "#ff0000",
|
||||||
|
} satisfies MyCompositionProps}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
|
||||||
|
|
||||||
|
## Folders
|
||||||
|
|
||||||
|
Use `<Folder>` to organize compositions in the sidebar.
|
||||||
|
Folder names can only contain letters, numbers, and hyphens.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Composition, Folder } from "remotion";
|
||||||
|
|
||||||
|
export const RemotionRoot = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Folder name="Marketing">
|
||||||
|
<Composition id="Promo" /* ... */ />
|
||||||
|
<Composition id="Ad" /* ... */ />
|
||||||
|
</Folder>
|
||||||
|
<Folder name="Social">
|
||||||
|
<Folder name="Instagram">
|
||||||
|
<Composition id="Story" /* ... */ />
|
||||||
|
<Composition id="Reel" /* ... */ />
|
||||||
|
</Folder>
|
||||||
|
</Folder>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Stills
|
||||||
|
|
||||||
|
Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Still } from "remotion";
|
||||||
|
import { Thumbnail } from "./Thumbnail";
|
||||||
|
|
||||||
|
export const RemotionRoot = () => {
|
||||||
|
return (
|
||||||
|
<Still
|
||||||
|
id="Thumbnail"
|
||||||
|
component={Thumbnail}
|
||||||
|
width={1280}
|
||||||
|
height={720}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Calculate Metadata
|
||||||
|
|
||||||
|
Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Composition, CalculateMetadataFunction } from "remotion";
|
||||||
|
import { MyComposition, MyCompositionProps } from "./MyComposition";
|
||||||
|
|
||||||
|
const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> = async ({
|
||||||
|
props,
|
||||||
|
abortSignal,
|
||||||
|
}) => {
|
||||||
|
const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
|
||||||
|
signal: abortSignal,
|
||||||
|
}).then((res) => res.json());
|
||||||
|
|
||||||
|
return {
|
||||||
|
durationInFrames: Math.ceil(data.duration * 30),
|
||||||
|
props: {
|
||||||
|
...props,
|
||||||
|
videoUrl: data.url,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RemotionRoot = () => {
|
||||||
|
return (
|
||||||
|
<Composition
|
||||||
|
id="MyComposition"
|
||||||
|
component={MyComposition}
|
||||||
|
durationInFrames={100} // Placeholder, will be overridden
|
||||||
|
fps={30}
|
||||||
|
width={1080}
|
||||||
|
height={1080}
|
||||||
|
defaultProps={{ videoId: "abc123" }}
|
||||||
|
calculateMetadata={calculateMetadata}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.
|
||||||
126
skills/remotion-best-practices/rules/display-captions.md
Normal file
126
skills/remotion-best-practices/rules/display-captions.md
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
---
|
||||||
|
name: display-captions
|
||||||
|
description: Displaying captions in Remotion with TikTok-style pages and word highlighting
|
||||||
|
metadata:
|
||||||
|
tags: captions, subtitles, display, tiktok, highlight
|
||||||
|
---
|
||||||
|
|
||||||
|
# Displaying captions in Remotion
|
||||||
|
|
||||||
|
This guide explains how to display captions in Remotion, assuming you already have captions in the `Caption` format.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/captions package needs to be installed.
|
||||||
|
If it is not installed, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/captions # If project uses npm
|
||||||
|
bunx remotion add @remotion/captions # If project uses bun
|
||||||
|
yarn remotion add @remotion/captions # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/captions # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Creating pages
|
||||||
|
|
||||||
|
Use `createTikTokStyleCaptions()` to group captions into pages. The `combineTokensWithinMilliseconds` option controls how many words appear at once:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {useMemo} from 'react';
|
||||||
|
import {createTikTokStyleCaptions} from '@remotion/captions';
|
||||||
|
import type {Caption} from '@remotion/captions';
|
||||||
|
|
||||||
|
// How often captions should switch (in milliseconds)
|
||||||
|
// Higher values = more words per page
|
||||||
|
// Lower values = fewer words (more word-by-word)
|
||||||
|
const SWITCH_CAPTIONS_EVERY_MS = 1200;
|
||||||
|
|
||||||
|
const {pages} = useMemo(() => {
|
||||||
|
return createTikTokStyleCaptions({
|
||||||
|
captions,
|
||||||
|
combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
|
||||||
|
});
|
||||||
|
}, [captions]);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rendering with Sequences
|
||||||
|
|
||||||
|
Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Sequence, useVideoConfig, AbsoluteFill} from 'remotion';
|
||||||
|
import type {TikTokPage} from '@remotion/captions';
|
||||||
|
|
||||||
|
const CaptionedContent: React.FC = () => {
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill>
|
||||||
|
{pages.map((page, index) => {
|
||||||
|
const nextPage = pages[index + 1] ?? null;
|
||||||
|
const startFrame = (page.startMs / 1000) * fps;
|
||||||
|
const endFrame = Math.min(
|
||||||
|
nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
|
||||||
|
startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
|
||||||
|
);
|
||||||
|
const durationInFrames = endFrame - startFrame;
|
||||||
|
|
||||||
|
if (durationInFrames <= 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sequence
|
||||||
|
key={index}
|
||||||
|
from={startFrame}
|
||||||
|
durationInFrames={durationInFrames}
|
||||||
|
>
|
||||||
|
<CaptionPage page={page} />
|
||||||
|
</Sequence>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Word highlighting
|
||||||
|
|
||||||
|
A caption page contains `tokens` which you can use to highlight the currently spoken word:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
|
||||||
|
import type {TikTokPage} from '@remotion/captions';
|
||||||
|
|
||||||
|
const HIGHLIGHT_COLOR = '#39E508';
|
||||||
|
|
||||||
|
const CaptionPage: React.FC<{page: TikTokPage}> = ({page}) => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
// Current time relative to the start of the sequence
|
||||||
|
const currentTimeMs = (frame / fps) * 1000;
|
||||||
|
// Convert to absolute time by adding the page start
|
||||||
|
const absoluteTimeMs = page.startMs + currentTimeMs;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
|
||||||
|
<div style={{fontSize: 80, fontWeight: 'bold', whiteSpace: 'pre'}}>
|
||||||
|
{page.tokens.map((token) => {
|
||||||
|
const isActive =
|
||||||
|
token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={token.fromMs}
|
||||||
|
style={{color: isActive ? HIGHLIGHT_COLOR : 'white'}}
|
||||||
|
>
|
||||||
|
{token.text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
229
skills/remotion-best-practices/rules/extract-frames.md
Normal file
229
skills/remotion-best-practices/rules/extract-frames.md
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
---
|
||||||
|
name: extract-frames
|
||||||
|
description: Extract frames from videos at specific timestamps using Mediabunny
|
||||||
|
metadata:
|
||||||
|
tags: frames, extract, video, thumbnail, filmstrip, canvas
|
||||||
|
---
|
||||||
|
|
||||||
|
# Extracting frames from videos
|
||||||
|
|
||||||
|
Use Mediabunny to extract frames from videos at specific timestamps. This is useful for generating thumbnails, filmstrips, or processing individual frames.
|
||||||
|
|
||||||
|
## The `extractFrames()` function
|
||||||
|
|
||||||
|
This function can be copy-pasted into any project.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
ALL_FORMATS,
|
||||||
|
Input,
|
||||||
|
UrlSource,
|
||||||
|
VideoSample,
|
||||||
|
VideoSampleSink,
|
||||||
|
} from "mediabunny";
|
||||||
|
|
||||||
|
type Options = {
|
||||||
|
track: { width: number; height: number };
|
||||||
|
container: string;
|
||||||
|
durationInSeconds: number | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ExtractFramesTimestampsInSecondsFn = (
|
||||||
|
options: Options
|
||||||
|
) => Promise<number[]> | number[];
|
||||||
|
|
||||||
|
export type ExtractFramesProps = {
|
||||||
|
src: string;
|
||||||
|
timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
|
||||||
|
onVideoSample: (sample: VideoSample) => void;
|
||||||
|
signal?: AbortSignal;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function extractFrames({
|
||||||
|
src,
|
||||||
|
timestampsInSeconds,
|
||||||
|
onVideoSample,
|
||||||
|
signal,
|
||||||
|
}: ExtractFramesProps): Promise<void> {
|
||||||
|
using input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new UrlSource(src),
|
||||||
|
});
|
||||||
|
|
||||||
|
const [durationInSeconds, format, videoTrack] = await Promise.all([
|
||||||
|
input.computeDuration(),
|
||||||
|
input.getFormat(),
|
||||||
|
input.getPrimaryVideoTrack(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!videoTrack) {
|
||||||
|
throw new Error("No video track found in the input");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signal?.aborted) {
|
||||||
|
throw new Error("Aborted");
|
||||||
|
}
|
||||||
|
|
||||||
|
const timestamps =
|
||||||
|
typeof timestampsInSeconds === "function"
|
||||||
|
? await timestampsInSeconds({
|
||||||
|
track: {
|
||||||
|
width: videoTrack.displayWidth,
|
||||||
|
height: videoTrack.displayHeight,
|
||||||
|
},
|
||||||
|
container: format.name,
|
||||||
|
durationInSeconds,
|
||||||
|
})
|
||||||
|
: timestampsInSeconds;
|
||||||
|
|
||||||
|
if (timestamps.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signal?.aborted) {
|
||||||
|
throw new Error("Aborted");
|
||||||
|
}
|
||||||
|
|
||||||
|
const sink = new VideoSampleSink(videoTrack);
|
||||||
|
|
||||||
|
for await (using videoSample of sink.samplesAtTimestamps(timestamps)) {
|
||||||
|
if (signal?.aborted) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!videoSample) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
onVideoSample(videoSample);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Extract frames at specific timestamps:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
await extractFrames({
|
||||||
|
src: "https://remotion.media/video.mp4",
|
||||||
|
timestampsInSeconds: [0, 1, 2, 3, 4],
|
||||||
|
onVideoSample: (sample) => {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = sample.displayWidth;
|
||||||
|
canvas.height = sample.displayHeight;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
sample.draw(ctx!, 0, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Creating a filmstrip
|
||||||
|
|
||||||
|
Use a callback function to dynamically calculate timestamps based on video metadata:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const canvasWidth = 500;
|
||||||
|
const canvasHeight = 80;
|
||||||
|
const fromSeconds = 0;
|
||||||
|
const toSeconds = 10;
|
||||||
|
|
||||||
|
await extractFrames({
|
||||||
|
src: "https://remotion.media/video.mp4",
|
||||||
|
timestampsInSeconds: async ({ track, durationInSeconds }) => {
|
||||||
|
const aspectRatio = track.width / track.height;
|
||||||
|
const amountOfFramesFit = Math.ceil(
|
||||||
|
canvasWidth / (canvasHeight * aspectRatio)
|
||||||
|
);
|
||||||
|
const segmentDuration = toSeconds - fromSeconds;
|
||||||
|
const timestamps: number[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < amountOfFramesFit; i++) {
|
||||||
|
timestamps.push(
|
||||||
|
fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return timestamps;
|
||||||
|
},
|
||||||
|
onVideoSample: (sample) => {
|
||||||
|
console.log(`Frame at ${sample.timestamp}s`);
|
||||||
|
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = sample.displayWidth;
|
||||||
|
canvas.height = sample.displayHeight;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
sample.draw(ctx!, 0, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Cancellation with AbortSignal
|
||||||
|
|
||||||
|
Cancel frame extraction after a timeout:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const controller = new AbortController();
|
||||||
|
|
||||||
|
setTimeout(() => controller.abort(), 5000);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await extractFrames({
|
||||||
|
src: "https://remotion.media/video.mp4",
|
||||||
|
timestampsInSeconds: [0, 1, 2, 3, 4],
|
||||||
|
onVideoSample: (sample) => {
|
||||||
|
using frame = sample;
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = frame.displayWidth;
|
||||||
|
canvas.height = frame.displayHeight;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
frame.draw(ctx!, 0, 0);
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Frame extraction complete!");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Frame extraction was aborted or failed:", error);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Timeout with Promise.race
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const controller = new AbortController();
|
||||||
|
|
||||||
|
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
controller.abort();
|
||||||
|
reject(new Error("Frame extraction timed out after 10 seconds"));
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
controller.signal.addEventListener("abort", () => clearTimeout(timeoutId), {
|
||||||
|
once: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await Promise.race([
|
||||||
|
extractFrames({
|
||||||
|
src: "https://remotion.media/video.mp4",
|
||||||
|
timestampsInSeconds: [0, 1, 2, 3, 4],
|
||||||
|
onVideoSample: (sample) => {
|
||||||
|
using frame = sample;
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = frame.displayWidth;
|
||||||
|
canvas.height = frame.displayHeight;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
frame.draw(ctx!, 0, 0);
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
}),
|
||||||
|
timeoutPromise,
|
||||||
|
]);
|
||||||
|
|
||||||
|
console.log("Frame extraction complete!");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Frame extraction was aborted or failed:", error);
|
||||||
|
}
|
||||||
|
```
|
||||||
152
skills/remotion-best-practices/rules/fonts.md
Normal file
152
skills/remotion-best-practices/rules/fonts.md
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
---
|
||||||
|
name: fonts
|
||||||
|
description: Loading Google Fonts and local fonts in Remotion
|
||||||
|
metadata:
|
||||||
|
tags: fonts, google-fonts, typography, text
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using fonts in Remotion
|
||||||
|
|
||||||
|
## Google Fonts with @remotion/google-fonts
|
||||||
|
|
||||||
|
The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/google-fonts package needs to be installed.
|
||||||
|
If it is not installed, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/google-fonts # If project uses npm
|
||||||
|
bunx remotion add @remotion/google-fonts # If project uses bun
|
||||||
|
yarn remotion add @remotion/google-fonts # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Lobster";
|
||||||
|
|
||||||
|
const { fontFamily } = loadFont();
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <div style={{ fontFamily }}>Hello World</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Preferrably, specify only needed weights and subsets to reduce file size:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Roboto";
|
||||||
|
|
||||||
|
const { fontFamily } = loadFont("normal", {
|
||||||
|
weights: ["400", "700"],
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Waiting for font to load
|
||||||
|
|
||||||
|
Use `waitUntilDone()` if you need to know when the font is ready:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Lobster";
|
||||||
|
|
||||||
|
const { fontFamily, waitUntilDone } = loadFont();
|
||||||
|
|
||||||
|
await waitUntilDone();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Local fonts with @remotion/fonts
|
||||||
|
|
||||||
|
For local font files, use the `@remotion/fonts` package.
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
First, install @remotion/fonts:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/fonts # If project uses npm
|
||||||
|
bunx remotion add @remotion/fonts # If project uses bun
|
||||||
|
yarn remotion add @remotion/fonts # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/fonts # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
### Loading a local font
|
||||||
|
|
||||||
|
Place your font file in the `public/` folder and use `loadFont()`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/fonts";
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
await loadFont({
|
||||||
|
family: "MyFont",
|
||||||
|
url: staticFile("MyFont-Regular.woff2"),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Loading multiple weights
|
||||||
|
|
||||||
|
Load each weight separately with the same family name:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/fonts";
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
await Promise.all([
|
||||||
|
loadFont({
|
||||||
|
family: "Inter",
|
||||||
|
url: staticFile("Inter-Regular.woff2"),
|
||||||
|
weight: "400",
|
||||||
|
}),
|
||||||
|
loadFont({
|
||||||
|
family: "Inter",
|
||||||
|
url: staticFile("Inter-Bold.woff2"),
|
||||||
|
weight: "700",
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Available options
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
loadFont({
|
||||||
|
family: "MyFont", // Required: name to use in CSS
|
||||||
|
url: staticFile("font.woff2"), // Required: font file URL
|
||||||
|
format: "woff2", // Optional: auto-detected from extension
|
||||||
|
weight: "400", // Optional: font weight
|
||||||
|
style: "normal", // Optional: normal or italic
|
||||||
|
display: "block", // Optional: font-display behavior
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using in components
|
||||||
|
|
||||||
|
Call `loadFont()` at the top level of your component or in a separate file that's imported early:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Montserrat";
|
||||||
|
|
||||||
|
const { fontFamily } = loadFont("normal", {
|
||||||
|
weights: ["400", "700"],
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Title: React.FC<{ text: string }> = ({ text }) => {
|
||||||
|
return (
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontFamily,
|
||||||
|
fontSize: 80,
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</h1>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
58
skills/remotion-best-practices/rules/get-audio-duration.md
Normal file
58
skills/remotion-best-practices/rules/get-audio-duration.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
name: get-audio-duration
|
||||||
|
description: Getting the duration of an audio file in seconds with Mediabunny
|
||||||
|
metadata:
|
||||||
|
tags: duration, audio, length, time, seconds, mp3, wav
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting audio duration with Mediabunny
|
||||||
|
|
||||||
|
Mediabunny can extract the duration of an audio file. It works in browser, Node.js, and Bun environments.
|
||||||
|
|
||||||
|
## Getting audio duration
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
|
||||||
|
|
||||||
|
export const getAudioDuration = async (src: string) => {
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new UrlSource(src, {
|
||||||
|
getRetryDelay: () => null,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const durationInSeconds = await input.computeDuration();
|
||||||
|
return durationInSeconds;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const duration = await getAudioDuration("https://remotion.media/audio.mp3");
|
||||||
|
console.log(duration); // e.g. 180.5 (seconds)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with local files
|
||||||
|
|
||||||
|
For local files, use `FileSource` instead of `UrlSource`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, FileSource } from "mediabunny";
|
||||||
|
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new FileSource(file), // File object from input or drag-drop
|
||||||
|
});
|
||||||
|
|
||||||
|
const durationInSeconds = await input.computeDuration();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with staticFile in Remotion
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
const duration = await getAudioDuration(staticFile("audio.mp3"));
|
||||||
|
```
|
||||||
68
skills/remotion-best-practices/rules/get-video-dimensions.md
Normal file
68
skills/remotion-best-practices/rules/get-video-dimensions.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
name: get-video-dimensions
|
||||||
|
description: Getting the width and height of a video file with Mediabunny
|
||||||
|
metadata:
|
||||||
|
tags: dimensions, width, height, resolution, size, video
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting video dimensions with Mediabunny
|
||||||
|
|
||||||
|
Mediabunny can extract the width and height of a video file. It works in browser, Node.js, and Bun environments.
|
||||||
|
|
||||||
|
## Getting video dimensions
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
|
||||||
|
|
||||||
|
export const getVideoDimensions = async (src: string) => {
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new UrlSource(src, {
|
||||||
|
getRetryDelay: () => null,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const videoTrack = await input.getPrimaryVideoTrack();
|
||||||
|
if (!videoTrack) {
|
||||||
|
throw new Error("No video track found");
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
width: videoTrack.displayWidth,
|
||||||
|
height: videoTrack.displayHeight,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
|
||||||
|
console.log(dimensions.width); // e.g. 1920
|
||||||
|
console.log(dimensions.height); // e.g. 1080
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with local files
|
||||||
|
|
||||||
|
For local files, use `FileSource` instead of `UrlSource`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, FileSource } from "mediabunny";
|
||||||
|
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new FileSource(file), // File object from input or drag-drop
|
||||||
|
});
|
||||||
|
|
||||||
|
const videoTrack = await input.getPrimaryVideoTrack();
|
||||||
|
const width = videoTrack.displayWidth;
|
||||||
|
const height = videoTrack.displayHeight;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with staticFile in Remotion
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
const dimensions = await getVideoDimensions(staticFile("video.mp4"));
|
||||||
|
```
|
||||||
58
skills/remotion-best-practices/rules/get-video-duration.md
Normal file
58
skills/remotion-best-practices/rules/get-video-duration.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
---
|
||||||
|
name: get-video-duration
|
||||||
|
description: Getting the duration of a video file in seconds with Mediabunny
|
||||||
|
metadata:
|
||||||
|
tags: duration, video, length, time, seconds
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting video duration with Mediabunny
|
||||||
|
|
||||||
|
Mediabunny can extract the duration of a video file. It works in browser, Node.js, and Bun environments.
|
||||||
|
|
||||||
|
## Getting video duration
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
|
||||||
|
|
||||||
|
export const getVideoDuration = async (src: string) => {
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new UrlSource(src, {
|
||||||
|
getRetryDelay: () => null,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const durationInSeconds = await input.computeDuration();
|
||||||
|
return durationInSeconds;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const duration = await getVideoDuration("https://remotion.media/video.mp4");
|
||||||
|
console.log(duration); // e.g. 10.5 (seconds)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with local files
|
||||||
|
|
||||||
|
For local files, use `FileSource` instead of `UrlSource`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input, ALL_FORMATS, FileSource } from "mediabunny";
|
||||||
|
|
||||||
|
const input = new Input({
|
||||||
|
formats: ALL_FORMATS,
|
||||||
|
source: new FileSource(file), // File object from input or drag-drop
|
||||||
|
});
|
||||||
|
|
||||||
|
const durationInSeconds = await input.computeDuration();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using with staticFile in Remotion
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { staticFile } from "remotion";
|
||||||
|
|
||||||
|
const duration = await getVideoDuration(staticFile("video.mp4"));
|
||||||
|
```
|
||||||
138
skills/remotion-best-practices/rules/gifs.md
Normal file
138
skills/remotion-best-practices/rules/gifs.md
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
name: gif
|
||||||
|
description: Displaying GIFs, APNG, AVIF and WebP in Remotion
|
||||||
|
metadata:
|
||||||
|
tags: gif, animation, images, animated, apng, avif, webp
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using Animated images in Remotion
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {AnimatedImage, staticFile} from 'remotion';
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <AnimatedImage src={staticFile('animation.gif')} width={500} height={500} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Remote URLs are also supported (must have CORS enabled):
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<AnimatedImage src="https://example.com/animation.gif" width={500} height={500} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Sizing and fit
|
||||||
|
|
||||||
|
Control how the image fills its container with the `fit` prop:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// Stretch to fill (default)
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
|
||||||
|
|
||||||
|
// Maintain aspect ratio, fit inside container
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
|
||||||
|
|
||||||
|
// Fill container, crop if needed
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Playback speed
|
||||||
|
|
||||||
|
Use `playbackRate` to control the animation speed:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Looping behavior
|
||||||
|
|
||||||
|
Control what happens when the animation finishes:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// Loop indefinitely (default)
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
|
||||||
|
|
||||||
|
// Play once, show final frame
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
|
||||||
|
|
||||||
|
// Play once, then clear canvas
|
||||||
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Styling
|
||||||
|
|
||||||
|
Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<AnimatedImage
|
||||||
|
src={staticFile('animation.gif')}
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
style={{
|
||||||
|
borderRadius: 20,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 100,
|
||||||
|
left: 50,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Getting GIF duration
|
||||||
|
|
||||||
|
Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/gif # If project uses npm
|
||||||
|
bunx remotion add @remotion/gif # If project uses bun
|
||||||
|
yarn remotion add @remotion/gif # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/gif # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {getGifDurationInSeconds} from '@remotion/gif';
|
||||||
|
import {staticFile} from 'remotion';
|
||||||
|
|
||||||
|
const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
|
||||||
|
console.log(duration); // e.g. 2.5
|
||||||
|
```
|
||||||
|
|
||||||
|
This is useful for setting the composition duration to match the GIF:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {getGifDurationInSeconds} from '@remotion/gif';
|
||||||
|
import {staticFile, CalculateMetadataFunction} from 'remotion';
|
||||||
|
|
||||||
|
const calculateMetadata: CalculateMetadataFunction = async () => {
|
||||||
|
const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
|
||||||
|
return {
|
||||||
|
durationInFrames: Math.ceil(duration * 30),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Alternative
|
||||||
|
|
||||||
|
If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/gif # If project uses npm
|
||||||
|
bunx remotion add @remotion/gif # If project uses bun
|
||||||
|
yarn remotion add @remotion/gif # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/gif # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Gif} from '@remotion/gif';
|
||||||
|
import {staticFile} from 'remotion';
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <Gif src={staticFile('animation.gif')} width={500} height={500} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.
|
||||||
130
skills/remotion-best-practices/rules/images.md
Normal file
130
skills/remotion-best-practices/rules/images.md
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
name: images
|
||||||
|
description: Embedding images in Remotion using the <Img> component
|
||||||
|
metadata:
|
||||||
|
tags: images, img, staticFile, png, jpg, svg, webp
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using images in Remotion
|
||||||
|
|
||||||
|
## The `<Img>` component
|
||||||
|
|
||||||
|
Always use the `<Img>` component from `remotion` to display images:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Img, staticFile } from "remotion";
|
||||||
|
|
||||||
|
export const MyComposition = () => {
|
||||||
|
return <Img src={staticFile("photo.png")} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Important restrictions
|
||||||
|
|
||||||
|
**You MUST use the `<Img>` component from `remotion`.** Do not use:
|
||||||
|
|
||||||
|
- Native HTML `<img>` elements
|
||||||
|
- Next.js `<Image>` component
|
||||||
|
- CSS `background-image`
|
||||||
|
|
||||||
|
The `<Img>` component ensures images are fully loaded before rendering, preventing flickering and blank frames during video export.
|
||||||
|
|
||||||
|
## Local images with staticFile()
|
||||||
|
|
||||||
|
Place images in the `public/` folder and use `staticFile()` to reference them:
|
||||||
|
|
||||||
|
```
|
||||||
|
my-video/
|
||||||
|
├─ public/
|
||||||
|
│ ├─ logo.png
|
||||||
|
│ ├─ avatar.jpg
|
||||||
|
│ └─ icon.svg
|
||||||
|
├─ src/
|
||||||
|
├─ package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Img, staticFile } from "remotion";
|
||||||
|
|
||||||
|
<Img src={staticFile("logo.png")} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Remote images
|
||||||
|
|
||||||
|
Remote URLs can be used directly without `staticFile()`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Img src="https://example.com/image.png" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Ensure remote images have CORS enabled.
|
||||||
|
|
||||||
|
For animated GIFs, use the `<Gif>` component from `@remotion/gif` instead.
|
||||||
|
|
||||||
|
## Sizing and positioning
|
||||||
|
|
||||||
|
Use the `style` prop to control size and position:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Img
|
||||||
|
src={staticFile("photo.png")}
|
||||||
|
style={{
|
||||||
|
width: 500,
|
||||||
|
height: 300,
|
||||||
|
position: "absolute",
|
||||||
|
top: 100,
|
||||||
|
left: 50,
|
||||||
|
objectFit: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dynamic image paths
|
||||||
|
|
||||||
|
Use template literals for dynamic file references:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Img, staticFile, useCurrentFrame } from "remotion";
|
||||||
|
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
|
||||||
|
// Image sequence
|
||||||
|
<Img src={staticFile(`frames/frame${frame}.png`)} />
|
||||||
|
|
||||||
|
// Selecting based on props
|
||||||
|
<Img src={staticFile(`avatars/${props.userId}.png`)} />
|
||||||
|
|
||||||
|
// Conditional images
|
||||||
|
<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
|
||||||
|
```
|
||||||
|
|
||||||
|
This pattern is useful for:
|
||||||
|
|
||||||
|
- Image sequences (frame-by-frame animations)
|
||||||
|
- User-specific avatars or profile images
|
||||||
|
- Theme-based icons
|
||||||
|
- State-dependent graphics
|
||||||
|
|
||||||
|
## Getting image dimensions
|
||||||
|
|
||||||
|
Use `getImageDimensions()` to get the dimensions of an image:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { getImageDimensions, staticFile } from "remotion";
|
||||||
|
|
||||||
|
const { width, height } = await getImageDimensions(staticFile("photo.png"));
|
||||||
|
```
|
||||||
|
|
||||||
|
This is useful for calculating aspect ratios or sizing compositions:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { getImageDimensions, staticFile, CalculateMetadataFunction } from "remotion";
|
||||||
|
|
||||||
|
const calculateMetadata: CalculateMetadataFunction = async () => {
|
||||||
|
const { width, height } = await getImageDimensions(staticFile("photo.png"));
|
||||||
|
return {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
```
|
||||||
67
skills/remotion-best-practices/rules/import-srt-captions.md
Normal file
67
skills/remotion-best-practices/rules/import-srt-captions.md
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
name: import-srt-captions
|
||||||
|
description: Importing .srt subtitle files into Remotion using @remotion/captions
|
||||||
|
metadata:
|
||||||
|
tags: captions, subtitles, srt, import, parse
|
||||||
|
---
|
||||||
|
|
||||||
|
# Importing .srt subtitles into Remotion
|
||||||
|
|
||||||
|
If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/captions package needs to be installed.
|
||||||
|
If it is not installed, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/captions # If project uses npm
|
||||||
|
bunx remotion add @remotion/captions # If project uses bun
|
||||||
|
yarn remotion add @remotion/captions # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/captions # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reading an .srt file
|
||||||
|
|
||||||
|
Use `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {useState, useEffect, useCallback} from 'react';
|
||||||
|
import {AbsoluteFill, staticFile, useDelayRender} from 'remotion';
|
||||||
|
import {parseSrt} from '@remotion/captions';
|
||||||
|
import type {Caption} from '@remotion/captions';
|
||||||
|
|
||||||
|
export const MyComponent: React.FC = () => {
|
||||||
|
const [captions, setCaptions] = useState<Caption[] | null>(null);
|
||||||
|
const {delayRender, continueRender, cancelRender} = useDelayRender();
|
||||||
|
const [handle] = useState(() => delayRender());
|
||||||
|
|
||||||
|
const fetchCaptions = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(staticFile('subtitles.srt'));
|
||||||
|
const text = await response.text();
|
||||||
|
const {captions: parsed} = parseSrt({input: text});
|
||||||
|
setCaptions(parsed);
|
||||||
|
continueRender(handle);
|
||||||
|
} catch (e) {
|
||||||
|
cancelRender(e);
|
||||||
|
}
|
||||||
|
}, [continueRender, cancelRender, handle]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchCaptions();
|
||||||
|
}, [fetchCaptions]);
|
||||||
|
|
||||||
|
if (!captions) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
|
||||||
|
|
||||||
|
## Using imported captions
|
||||||
|
|
||||||
|
Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.
|
||||||
68
skills/remotion-best-practices/rules/lottie.md
Normal file
68
skills/remotion-best-practices/rules/lottie.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
name: lottie
|
||||||
|
description: Embedding Lottie animations in Remotion.
|
||||||
|
metadata:
|
||||||
|
category: Animation
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using Lottie Animations in Remotion
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/lottie package needs to be installed.
|
||||||
|
If it is not, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/lottie # If project uses npm
|
||||||
|
bunx remotion add @remotion/lottie # If project uses bun
|
||||||
|
yarn remotion add @remotion/lottie # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/lottie # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Displaying a Lottie file
|
||||||
|
|
||||||
|
To import a Lottie animation:
|
||||||
|
|
||||||
|
- Fetch the Lottie asset
|
||||||
|
- Wrap the loading process in `delayRender()` and `continueRender()`
|
||||||
|
- Save the animation data in a state
|
||||||
|
- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Lottie, LottieAnimationData} from '@remotion/lottie';
|
||||||
|
import {useEffect, useState} from 'react';
|
||||||
|
import {cancelRender, continueRender, delayRender} from 'remotion';
|
||||||
|
|
||||||
|
export const MyAnimation = () => {
|
||||||
|
const [handle] = useState(() => delayRender('Loading Lottie animation'));
|
||||||
|
|
||||||
|
const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json')
|
||||||
|
.then((data) => data.json())
|
||||||
|
.then((json) => {
|
||||||
|
setAnimationData(json);
|
||||||
|
continueRender(handle);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
cancelRender(err);
|
||||||
|
});
|
||||||
|
}, [handle]);
|
||||||
|
|
||||||
|
if (!animationData) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Lottie animationData={animationData} />;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Styling and animating
|
||||||
|
|
||||||
|
Lottie supports the `style` prop to allow styles and animations:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
return <Lottie animationData={animationData} style={{width: 400, height: 400}} />;
|
||||||
|
```
|
||||||
|
|
||||||
35
skills/remotion-best-practices/rules/measuring-dom-nodes.md
Normal file
35
skills/remotion-best-practices/rules/measuring-dom-nodes.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
---
|
||||||
|
name: measuring-dom-nodes
|
||||||
|
description: Measuring DOM element dimensions in Remotion
|
||||||
|
metadata:
|
||||||
|
tags: measure, layout, dimensions, getBoundingClientRect, scale
|
||||||
|
---
|
||||||
|
|
||||||
|
# Measuring DOM nodes in Remotion
|
||||||
|
|
||||||
|
Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
|
||||||
|
|
||||||
|
## Measuring element dimensions
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useCurrentScale } from "remotion";
|
||||||
|
import { useRef, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export const MyComponent = () => {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const scale = useCurrentScale();
|
||||||
|
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ref.current) return;
|
||||||
|
const rect = ref.current.getBoundingClientRect();
|
||||||
|
setDimensions({
|
||||||
|
width: rect.width / scale,
|
||||||
|
height: rect.height / scale,
|
||||||
|
});
|
||||||
|
}, [scale]);
|
||||||
|
|
||||||
|
return <div ref={ref}>Content to measure</div>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
143
skills/remotion-best-practices/rules/measuring-text.md
Normal file
143
skills/remotion-best-practices/rules/measuring-text.md
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
---
|
||||||
|
name: measuring-text
|
||||||
|
description: Measuring text dimensions, fitting text to containers, and checking overflow
|
||||||
|
metadata:
|
||||||
|
tags: measure, text, layout, dimensions, fitText, fillTextBox
|
||||||
|
---
|
||||||
|
|
||||||
|
# Measuring text in Remotion
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
Install @remotion/layout-utils if it is not already installed:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/layout-utils # If project uses npm
|
||||||
|
bunx remotion add @remotion/layout-utils # If project uses bun
|
||||||
|
yarn remotion add @remotion/layout-utils # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/layout-utils # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Measuring text dimensions
|
||||||
|
|
||||||
|
Use `measureText()` to calculate the width and height of text:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { measureText } from "@remotion/layout-utils";
|
||||||
|
|
||||||
|
const { width, height } = measureText({
|
||||||
|
text: "Hello World",
|
||||||
|
fontFamily: "Arial",
|
||||||
|
fontSize: 32,
|
||||||
|
fontWeight: "bold",
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Results are cached - duplicate calls return the cached result.
|
||||||
|
|
||||||
|
## Fitting text to a width
|
||||||
|
|
||||||
|
Use `fitText()` to find the optimal font size for a container:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { fitText } from "@remotion/layout-utils";
|
||||||
|
|
||||||
|
const { fontSize } = fitText({
|
||||||
|
text: "Hello World",
|
||||||
|
withinWidth: 600,
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontWeight: "bold",
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: Math.min(fontSize, 80), // Cap at 80px
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Hello World
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Checking text overflow
|
||||||
|
|
||||||
|
Use `fillTextBox()` to check if text exceeds a box:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { fillTextBox } from "@remotion/layout-utils";
|
||||||
|
|
||||||
|
const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
|
||||||
|
|
||||||
|
const words = ["Hello", "World", "This", "is", "a", "test"];
|
||||||
|
for (const word of words) {
|
||||||
|
const { exceedsBox } = box.add({
|
||||||
|
text: word + " ",
|
||||||
|
fontFamily: "Arial",
|
||||||
|
fontSize: 24,
|
||||||
|
});
|
||||||
|
if (exceedsBox) {
|
||||||
|
// Text would overflow, handle accordingly
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Best practices
|
||||||
|
|
||||||
|
**Load fonts first:** Only call measurement functions after fonts are loaded.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { loadFont } from "@remotion/google-fonts/Inter";
|
||||||
|
|
||||||
|
const { fontFamily, waitUntilDone } = loadFont("normal", {
|
||||||
|
weights: ["400"],
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
waitUntilDone().then(() => {
|
||||||
|
// Now safe to measure
|
||||||
|
const { width } = measureText({
|
||||||
|
text: "Hello",
|
||||||
|
fontFamily,
|
||||||
|
fontSize: 32,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**Use validateFontIsLoaded:** Catch font loading issues early:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
measureText({
|
||||||
|
text: "Hello",
|
||||||
|
fontFamily: "MyCustomFont",
|
||||||
|
fontSize: 32,
|
||||||
|
validateFontIsLoaded: true, // Throws if font not loaded
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Match font properties:** Use the same properties for measurement and rendering:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const fontStyle = {
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontSize: 32,
|
||||||
|
fontWeight: "bold" as const,
|
||||||
|
letterSpacing: "0.5px",
|
||||||
|
};
|
||||||
|
|
||||||
|
const { width } = measureText({
|
||||||
|
text: "Hello",
|
||||||
|
...fontStyle,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <div style={fontStyle}>Hello</div>;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<div style={{ outline: "2px solid red" }}>Text</div>
|
||||||
|
```
|
||||||
106
skills/remotion-best-practices/rules/sequencing.md
Normal file
106
skills/remotion-best-practices/rules/sequencing.md
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
---
|
||||||
|
name: sequencing
|
||||||
|
description: Sequencing patterns for Remotion - delay, trim, limit duration of items
|
||||||
|
metadata:
|
||||||
|
tags: sequence, series, timing, delay, trim
|
||||||
|
---
|
||||||
|
|
||||||
|
Use `<Sequence>` to delay when an element appears in the timeline.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Sequence } from "remotion";
|
||||||
|
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
|
||||||
|
<Title />
|
||||||
|
</Sequence>
|
||||||
|
<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
|
||||||
|
<Subtitle />
|
||||||
|
</Sequence>
|
||||||
|
```
|
||||||
|
|
||||||
|
This will by default wrap the component in an absolute fill element.
|
||||||
|
If the items should not be wrapped, use the `layout` prop:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Sequence layout="none">
|
||||||
|
<Title />
|
||||||
|
</Sequence>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Premounting
|
||||||
|
|
||||||
|
This loads the component in the timeline before it is actually played.
|
||||||
|
Always premount any `<Sequence>`!
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Sequence premountFor={1 * fps}>
|
||||||
|
<Title />
|
||||||
|
</Sequence>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Series
|
||||||
|
|
||||||
|
Use `<Series>` when elements should play one after another without overlap.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {Series} from 'remotion';
|
||||||
|
|
||||||
|
<Series>
|
||||||
|
<Series.Sequence durationInFrames={45}>
|
||||||
|
<Intro />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={60}>
|
||||||
|
<MainContent />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={30}>
|
||||||
|
<Outro />
|
||||||
|
</Series.Sequence>
|
||||||
|
</Series>;
|
||||||
|
```
|
||||||
|
|
||||||
|
Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
|
||||||
|
|
||||||
|
### Series with overlaps
|
||||||
|
|
||||||
|
Use negative offset for overlapping sequences:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Series>
|
||||||
|
<Series.Sequence durationInFrames={60}>
|
||||||
|
<SceneA />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence offset={-15} durationInFrames={60}>
|
||||||
|
{/* Starts 15 frames before SceneA ends */}
|
||||||
|
<SceneB />
|
||||||
|
</Series.Sequence>
|
||||||
|
</Series>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Frame References Inside Sequences
|
||||||
|
|
||||||
|
Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Sequence from={60} durationInFrames={30}>
|
||||||
|
<MyComponent />
|
||||||
|
{/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
|
||||||
|
</Sequence>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Nested Sequences
|
||||||
|
|
||||||
|
Sequences can be nested for complex timing:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Sequence from={0} durationInFrames={120}>
|
||||||
|
<Background />
|
||||||
|
<Sequence from={15} durationInFrames={90} layout="none">
|
||||||
|
<Title />
|
||||||
|
</Sequence>
|
||||||
|
<Sequence from={45} durationInFrames={60} layout="none">
|
||||||
|
<Subtitle />
|
||||||
|
</Sequence>
|
||||||
|
</Sequence>
|
||||||
|
```
|
||||||
11
skills/remotion-best-practices/rules/tailwind.md
Normal file
11
skills/remotion-best-practices/rules/tailwind.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
name: tailwind
|
||||||
|
description: Using TailwindCSS in Remotion.
|
||||||
|
metadata:
|
||||||
|
---
|
||||||
|
|
||||||
|
You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
|
||||||
|
|
||||||
|
Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
|
||||||
|
|
||||||
|
Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.
|
||||||
20
skills/remotion-best-practices/rules/text-animations.md
Normal file
20
skills/remotion-best-practices/rules/text-animations.md
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
name: text-animations
|
||||||
|
description: Typography and text animation patterns for Remotion.
|
||||||
|
metadata:
|
||||||
|
tags: typography, text, typewriter, highlighter ken
|
||||||
|
---
|
||||||
|
|
||||||
|
## Text animations
|
||||||
|
|
||||||
|
Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
|
||||||
|
|
||||||
|
## Typewriter Effect
|
||||||
|
|
||||||
|
See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
|
||||||
|
|
||||||
|
Always use string slicing for typewriter effects. Never use per-character opacity.
|
||||||
|
|
||||||
|
## Word Highlighting
|
||||||
|
|
||||||
|
See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.
|
||||||
179
skills/remotion-best-practices/rules/timing.md
Normal file
179
skills/remotion-best-practices/rules/timing.md
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
---
|
||||||
|
name: timing
|
||||||
|
description: Interpolation curves in Remotion - linear, easing, spring animations
|
||||||
|
metadata:
|
||||||
|
tags: spring, bounce, easing, interpolation
|
||||||
|
---
|
||||||
|
|
||||||
|
A simple linear interpolation is done using the `interpolate` function.
|
||||||
|
|
||||||
|
```ts title="Going from 0 to 1 over 100 frames"
|
||||||
|
import {interpolate} from 'remotion';
|
||||||
|
|
||||||
|
const opacity = interpolate(frame, [0, 100], [0, 1]);
|
||||||
|
```
|
||||||
|
|
||||||
|
By default, the values are not clamped, so the value can go outside the range [0, 1].
|
||||||
|
Here is how they can be clamped:
|
||||||
|
|
||||||
|
```ts title="Going from 0 to 1 over 100 frames with extrapolation"
|
||||||
|
const opacity = interpolate(frame, [0, 100], [0, 1], {
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
extrapolateLeft: 'clamp',
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Spring animations
|
||||||
|
|
||||||
|
Spring animations have a more natural motion.
|
||||||
|
They go from 0 to 1 over time.
|
||||||
|
|
||||||
|
```ts title="Spring animation from 0 to 1 over 100 frames"
|
||||||
|
import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
|
||||||
|
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps} = useVideoConfig();
|
||||||
|
|
||||||
|
const scale = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Physical properties
|
||||||
|
|
||||||
|
The default configuration is: `mass: 1, damping: 10, stiffness: 100`.
|
||||||
|
This leads to the animation having a bit of bounce before it settles.
|
||||||
|
|
||||||
|
The config can be overwritten like this:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const scale = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
config: {damping: 200},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
The recommended configuration for a natural motion without a bounce is: `{ damping: 200 }`.
|
||||||
|
|
||||||
|
Here are some common configurations:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const smooth = {damping: 200}; // Smooth, no bounce (subtle reveals)
|
||||||
|
const snappy = {damping: 20, stiffness: 200}; // Snappy, minimal bounce (UI elements)
|
||||||
|
const bouncy = {damping: 8}; // Bouncy entrance (playful animations)
|
||||||
|
const heavy = {damping: 15, stiffness: 80, mass: 2}; // Heavy, slow, small bounce
|
||||||
|
```
|
||||||
|
|
||||||
|
### Delay
|
||||||
|
|
||||||
|
The animation starts immediately by default.
|
||||||
|
Use the `delay` parameter to delay the animation by a number of frames.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const entrance = spring({
|
||||||
|
frame: frame - ENTRANCE_DELAY,
|
||||||
|
fps,
|
||||||
|
delay: 20,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Duration
|
||||||
|
|
||||||
|
A `spring()` has a natural duration based on the physical properties.
|
||||||
|
To stretch the animation to a specific duration, use the `durationInFrames` parameter.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const spring = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
durationInFrames: 40,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Combining spring() with interpolate()
|
||||||
|
|
||||||
|
Map spring output (0-1) to custom ranges:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const springProgress = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Map to rotation
|
||||||
|
const rotation = interpolate(springProgress, [0, 1], [0, 360]);
|
||||||
|
|
||||||
|
<div style={{rotate: rotation + 'deg'}} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Adding springs
|
||||||
|
|
||||||
|
Springs return just numbers, so math can be performed:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const {fps, durationInFrames} = useVideoConfig();
|
||||||
|
|
||||||
|
const inAnimation = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
});
|
||||||
|
const outAnimation = spring({
|
||||||
|
frame,
|
||||||
|
fps,
|
||||||
|
durationInFrames: 1 * fps,
|
||||||
|
delay: durationInFrames - 1 * fps,
|
||||||
|
});
|
||||||
|
|
||||||
|
const scale = inAnimation - outAnimation;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Easing
|
||||||
|
|
||||||
|
Easing can be added to the `interpolate` function:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import {interpolate, Easing} from 'remotion';
|
||||||
|
|
||||||
|
const value1 = interpolate(frame, [0, 100], [0, 1], {
|
||||||
|
easing: Easing.inOut(Easing.quad),
|
||||||
|
extrapolateLeft: 'clamp',
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
The default easing is `Easing.linear`.
|
||||||
|
There are various other convexities:
|
||||||
|
|
||||||
|
- `Easing.in` for starting slow and accelerating
|
||||||
|
- `Easing.out` for starting fast and slowing down
|
||||||
|
- `Easing.inOut`
|
||||||
|
|
||||||
|
and curves (sorted from most linear to most curved):
|
||||||
|
|
||||||
|
- `Easing.quad`
|
||||||
|
- `Easing.sin`
|
||||||
|
- `Easing.exp`
|
||||||
|
- `Easing.circle`
|
||||||
|
|
||||||
|
Convexities and curves need be combined for an easing function:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const value1 = interpolate(frame, [0, 100], [0, 1], {
|
||||||
|
easing: Easing.inOut(Easing.quad),
|
||||||
|
extrapolateLeft: 'clamp',
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Cubic bezier curves are also supported:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const value1 = interpolate(frame, [0, 100], [0, 1], {
|
||||||
|
easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
|
||||||
|
extrapolateLeft: 'clamp',
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
});
|
||||||
|
```
|
||||||
19
skills/remotion-best-practices/rules/transcribe-captions.md
Normal file
19
skills/remotion-best-practices/rules/transcribe-captions.md
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
name: transcribe-captions
|
||||||
|
description: Transcribing audio to generate captions in Remotion
|
||||||
|
metadata:
|
||||||
|
tags: captions, transcribe, whisper, audio, speech-to-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# Transcribing audio
|
||||||
|
|
||||||
|
Remotion provides several built-in options for transcribing audio to generate captions:
|
||||||
|
|
||||||
|
- `@remotion/install-whisper-cpp` - Transcribe locally on a server using Whisper.cpp. Fast and free, but requires server infrastructure.
|
||||||
|
https://remotion.dev/docs/install-whisper-cpp
|
||||||
|
|
||||||
|
- `@remotion/whisper-web` - Transcribe in the browser using WebAssembly. No server needed and free, but slower due to WASM overhead.
|
||||||
|
https://remotion.dev/docs/whisper-web
|
||||||
|
|
||||||
|
- `@remotion/openai-whisper` - Use OpenAI Whisper API for cloud-based transcription. Fast and no server needed, but requires payment.
|
||||||
|
https://remotion.dev/docs/openai-whisper/openai-whisper-api-to-captions
|
||||||
122
skills/remotion-best-practices/rules/transitions.md
Normal file
122
skills/remotion-best-practices/rules/transitions.md
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
name: transitions
|
||||||
|
description: Fullscreen scene transitions for Remotion.
|
||||||
|
metadata:
|
||||||
|
tags: transitions, fade, slide, wipe, scenes
|
||||||
|
---
|
||||||
|
|
||||||
|
## Fullscreen transitions
|
||||||
|
|
||||||
|
Using `<TransitionSeries>` to animate between multiple scenes or clips.
|
||||||
|
This will absolutely position the children.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
First, the @remotion/transitions package needs to be installed.
|
||||||
|
If it is not, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx remotion add @remotion/transitions # If project uses npm
|
||||||
|
bunx remotion add @remotion/transitions # If project uses bun
|
||||||
|
yarn remotion add @remotion/transitions # If project uses yarn
|
||||||
|
pnpm exec remotion add @remotion/transitions # If project uses pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {TransitionSeries, linearTiming} from '@remotion/transitions';
|
||||||
|
import {fade} from '@remotion/transitions/fade';
|
||||||
|
|
||||||
|
<TransitionSeries>
|
||||||
|
<TransitionSeries.Sequence durationInFrames={60}>
|
||||||
|
<SceneA />
|
||||||
|
</TransitionSeries.Sequence>
|
||||||
|
<TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
|
||||||
|
<TransitionSeries.Sequence durationInFrames={60}>
|
||||||
|
<SceneB />
|
||||||
|
</TransitionSeries.Sequence>
|
||||||
|
</TransitionSeries>;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Available Transition Types
|
||||||
|
|
||||||
|
Import transitions from their respective modules:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {fade} from '@remotion/transitions/fade';
|
||||||
|
import {slide} from '@remotion/transitions/slide';
|
||||||
|
import {wipe} from '@remotion/transitions/wipe';
|
||||||
|
import {flip} from '@remotion/transitions/flip';
|
||||||
|
import {clockWipe} from '@remotion/transitions/clock-wipe';
|
||||||
|
```
|
||||||
|
|
||||||
|
## Slide Transition with Direction
|
||||||
|
|
||||||
|
Specify slide direction for enter/exit animations.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {slide} from '@remotion/transitions/slide';
|
||||||
|
|
||||||
|
<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
|
||||||
|
|
||||||
|
## Timing Options
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {linearTiming, springTiming} from '@remotion/transitions';
|
||||||
|
|
||||||
|
// Linear timing - constant speed
|
||||||
|
linearTiming({durationInFrames: 20});
|
||||||
|
|
||||||
|
// Spring timing - organic motion
|
||||||
|
springTiming({config: {damping: 200}, durationInFrames: 25});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Duration calculation
|
||||||
|
|
||||||
|
Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations.
|
||||||
|
|
||||||
|
For example, with two 60-frame sequences and a 15-frame transition:
|
||||||
|
|
||||||
|
- Without transitions: `60 + 60 = 120` frames
|
||||||
|
- With transition: `60 + 60 - 15 = 105` frames
|
||||||
|
|
||||||
|
The transition duration is subtracted because both scenes play simultaneously during the transition.
|
||||||
|
|
||||||
|
### Getting the duration of a transition
|
||||||
|
|
||||||
|
Use the `getDurationInFrames()` method on the timing object:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {linearTiming, springTiming} from '@remotion/transitions';
|
||||||
|
|
||||||
|
const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
|
||||||
|
// Returns 20
|
||||||
|
|
||||||
|
const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
|
||||||
|
// Returns calculated duration based on spring physics
|
||||||
|
```
|
||||||
|
|
||||||
|
For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
|
||||||
|
|
||||||
|
### Calculating total composition duration
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {linearTiming} from '@remotion/transitions';
|
||||||
|
|
||||||
|
const scene1Duration = 60;
|
||||||
|
const scene2Duration = 60;
|
||||||
|
const scene3Duration = 60;
|
||||||
|
|
||||||
|
const timing1 = linearTiming({durationInFrames: 15});
|
||||||
|
const timing2 = linearTiming({durationInFrames: 20});
|
||||||
|
|
||||||
|
const transition1Duration = timing1.getDurationInFrames({fps: 30});
|
||||||
|
const transition2Duration = timing2.getDurationInFrames({fps: 30});
|
||||||
|
|
||||||
|
const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
|
||||||
|
// 60 + 60 + 60 - 15 - 20 = 145 frames
|
||||||
|
```
|
||||||
53
skills/remotion-best-practices/rules/trimming.md
Normal file
53
skills/remotion-best-practices/rules/trimming.md
Normal file
@@ -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.
|
||||||
|
|
||||||
171
skills/remotion-best-practices/rules/videos.md
Normal file
171
skills/remotion-best-practices/rules/videos.md
Normal file
@@ -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 />`.
|
||||||
@@ -323,6 +323,12 @@
|
|||||||
"name": "backend-dev-guidelines",
|
"name": "backend-dev-guidelines",
|
||||||
"description": "Comprehensive backend development guide for Node.js/Express/TypeScript microservices. Use when creating routes, controllers, services, repositories, middleware, or working with Express APIs, Prisma database access, Sentry error tracking, Zod validation, unifiedConfig, dependency injection, or async patterns. Covers layered architecture (routes \u2192 controllers \u2192 services \u2192 repositories), BaseController pattern, error handling, performance monitoring, testing strategies, and migration from legacy patterns."
|
"description": "Comprehensive backend development guide for Node.js/Express/TypeScript microservices. Use when creating routes, controllers, services, repositories, middleware, or working with Express APIs, Prisma database access, Sentry error tracking, Zod validation, unifiedConfig, dependency injection, or async patterns. Covers layered architecture (routes \u2192 controllers \u2192 services \u2192 repositories), BaseController pattern, error handling, performance monitoring, testing strategies, and migration from legacy patterns."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-backend-patterns",
|
||||||
|
"path": "skills/cc-skill-backend-patterns",
|
||||||
|
"name": "backend-patterns",
|
||||||
|
"description": "Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "bash-linux",
|
"id": "bash-linux",
|
||||||
"path": "skills/bash-linux",
|
"path": "skills/bash-linux",
|
||||||
@@ -389,6 +395,24 @@
|
|||||||
"name": "canvas-design",
|
"name": "canvas-design",
|
||||||
"description": "Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
|
"description": "Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-continuous-learning",
|
||||||
|
"path": "skills/cc-skill-continuous-learning",
|
||||||
|
"name": "cc-skill-continuous-learning",
|
||||||
|
"description": "Development skill skill from everything-claude-code"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-project-guidelines-example",
|
||||||
|
"path": "skills/cc-skill-project-guidelines-example",
|
||||||
|
"name": "cc-skill-project-guidelines-example",
|
||||||
|
"description": "Project Guidelines Skill (Example)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-strategic-compact",
|
||||||
|
"path": "skills/cc-skill-strategic-compact",
|
||||||
|
"name": "cc-skill-strategic-compact",
|
||||||
|
"description": "Development skill skill from everything-claude-code"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "clean-code",
|
"id": "clean-code",
|
||||||
"path": "skills/clean-code",
|
"path": "skills/clean-code",
|
||||||
@@ -401,12 +425,24 @@
|
|||||||
"name": "clerk-auth",
|
"name": "clerk-auth",
|
||||||
"description": "\"Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up.\""
|
"description": "\"Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up.\""
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-clickhouse-io",
|
||||||
|
"path": "skills/cc-skill-clickhouse-io",
|
||||||
|
"name": "clickhouse-io",
|
||||||
|
"description": "ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "code-review-checklist",
|
"id": "code-review-checklist",
|
||||||
"path": "skills/code-review-checklist",
|
"path": "skills/code-review-checklist",
|
||||||
"name": "code-review-checklist",
|
"name": "code-review-checklist",
|
||||||
"description": "Code review guidelines covering code quality, security, and best practices."
|
"description": "Code review guidelines covering code quality, security, and best practices."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-coding-standards",
|
||||||
|
"path": "skills/cc-skill-coding-standards",
|
||||||
|
"name": "coding-standards",
|
||||||
|
"description": "Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "competitor-alternatives",
|
"id": "competitor-alternatives",
|
||||||
"path": "skills/competitor-alternatives",
|
"path": "skills/competitor-alternatives",
|
||||||
@@ -587,6 +623,12 @@
|
|||||||
"name": "frontend-dev-guidelines",
|
"name": "frontend-dev-guidelines",
|
||||||
"description": "Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code."
|
"description": "Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-frontend-patterns",
|
||||||
|
"path": "skills/cc-skill-frontend-patterns",
|
||||||
|
"name": "frontend-patterns",
|
||||||
|
"description": "Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "game-art",
|
"id": "game-art",
|
||||||
"path": "skills/game-development/game-art",
|
"path": "skills/game-development/game-art",
|
||||||
@@ -1007,6 +1049,12 @@
|
|||||||
"name": "referral-program",
|
"name": "referral-program",
|
||||||
"description": "\"When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referral,' 'affiliate,' 'ambassador,' 'word of mouth,' 'viral loop,' 'refer a friend,' or 'partner program.' This skill covers program design, incentive structure, and growth optimization.\""
|
"description": "\"When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referral,' 'affiliate,' 'ambassador,' 'word of mouth,' 'viral loop,' 'refer a friend,' or 'partner program.' This skill covers program design, incentive structure, and growth optimization.\""
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "remotion-best-practices",
|
||||||
|
"path": "skills/remotion-best-practices",
|
||||||
|
"name": "remotion-best-practices",
|
||||||
|
"description": "Best practices for Remotion - Video creation in React"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "requesting-code-review",
|
"id": "requesting-code-review",
|
||||||
"path": "skills/requesting-code-review",
|
"path": "skills/requesting-code-review",
|
||||||
@@ -1037,6 +1085,12 @@
|
|||||||
"name": "scroll-experience",
|
"name": "scroll-experience",
|
||||||
"description": "\"Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.\""
|
"description": "\"Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.\""
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "cc-skill-security-review",
|
||||||
|
"path": "skills/cc-skill-security-review",
|
||||||
|
"name": "security-review",
|
||||||
|
"description": "Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns."
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "segment-cdp",
|
"id": "segment-cdp",
|
||||||
"path": "skills/segment-cdp",
|
"path": "skills/segment-cdp",
|
||||||
|
|||||||
Reference in New Issue
Block a user