A practical collection of 116 skills we use and recommend for research, coding, design, video, writing, and the work around it.
116 skills
Generate/iterate static, motion, faceless, chat-style ad concepts and copy variants.
Use it when: Existing offer, audience, channel; does not replace campaign targeting/budget decision.
npx skills add coreyhaines31/marketingskills --skill ad-creativeAI agent browser CLI: navigate, click, form, screenshot, extract, web/Electron QA.
Use it when: Real browser interaction/verification; send, purchase, and publish still need approval.
npx skills add vercel-labs/agent-browser --skill agent-browserImprove AI answer/citation visibility: AEO, GEO, LLMO, agent-readable content.
Use it when: Use it to improve visibility in AI answers and citations; keep traditional technical SEO in the workflow.
npx skills add coreyhaines31/marketingskills --skill ai-seoBuild reproducible generative art with p5.js, seeded randomness, flow fields, and particles.
Use it when: Want a code-driven/tunable visual; not a photo-real image generator.
npx skills add anthropics/skills --skill algorithmic-artConvert fuzzy motion descriptions into formal terms to facilitate precise prompt/brief.
Use it when: Use it when you need the correct name for a motion effect; it names patterns but does not implement them.
npx skills add emilkowalski/skills --skill animation-vocabularyTranslate Apple-style physical motion, gesture, spring, material, typography to the web.
Use it when: Sheet, drag, swipe, interruptible interaction; it does not mean copying Apple UI.
npx skills add emilkowalski/skills --skill apple-designBetter Auth server/client, adapter, session, OAuth, plugins, env setup.
Use it when: Use it in TypeScript projects using Better Auth; pair it with security-specific guidance for hardening.
npx skills add better-auth/skills --skill better-auth-best-practicesExplore intent, requirement, constraint and design alternative before implementation.
Use it when: Feature, component, behavior change; not suitable for pure factual edit.
npx skills add obra/superpowers --skill brainstormingIntegrate the branded colors, typography, and format rules into the artifact.
Use it when: Existing brand spec; Anthropic preset should not be misused as your own brand.
npx skills add anthropics/skills --skill brand-guidelinesGenerate brand board, logo system, identity deck, mockup and visual world.
Use it when: To establish a complete identity direction; do not treat the first logo output as the finished product.
npx skills add leonxlnx/taste-skill --skill brandkitEncapsulate browser actions into reusable automation workflows.
Use it when: Repeat public web task; first limit domain, step and side effects.
npx skills add browser-act/skills --skill browser-actControl the browser through CDP and do automation, scraping, testing and screenshots.
Use it when: Requires browser state/visual interaction; login/anti-bot should not be bypassed.
npx skills add browser-use/browser-use --skill browser-useCreate original PNG/PDF posters, artwork, and static compositions based on design principles.
Use it when: Static visual; direct imitation of living artists is prohibited.
npx skills add anthropics/skills --skill canvas-designCheck Standards compliance simultaneously with Spec compliance, side-by-side findings.
Use it when: Review branch/PR/WIP diff; there must be a fixed comparison point.
npx skills add mattpocock/skills --skill code-reviewDefine content pillars, topic clusters, an editorial roadmap, and the right mix of searchable and shareable work.
Use it when: Use it to decide what to publish; use a writing skill afterward to create each piece.
npx skills add coreyhaines31/marketingskills --skill content-strategyImprove the clarity, flow, tone, and consistency of existing copy while retaining the original author's intent.
Use it when: Use it when a draft already exists; it improves execution without redefining the underlying strategy.
npx skills add coreyhaines31/marketingskills --skill copy-editingWrite/revise landing page, headline, CTA, value proposition, product copy.
Use it when: Use it with real product context and an honest offer; never invent proof, outcomes, or customer evidence.
npx skills add coreyhaines31/marketingskills --skill copywritingCreate seek-safe, deterministic motion with CSS keyframes.
Use it when: Lightweight/predictable results; use other runtimes for complex interactive timelines.
npx skills add heygen-com/hyperframes --skill css-animationsDerive a distinctive, anti-generic design direction from the brief, with redesign analysis and a preflight review.
Use it when: Use it for landing pages, portfolios, and campaigns; choose one strong taste system rather than stacking several.
npx skills add leonxlnx/taste-skill --skill design-taste-frontendTurn bug symptoms into a reproducible diagnosis, supporting evidence, and a focused next step.
Use it when: Complex regression/unknown cause; do not jump directly to patch.
npx skills add mattpocock/skills --skill diagnosing-bugsDetermine whether 2+ tasks can be safely parallelized, and clearly define the output contract.
Use it when: Independent research/review/tests; do not use if there is sequential dependency.
npx skills add obra/superpowers --skill dispatching-parallel-agentsStructured coauthoring: context transfer, outline, iteration, reader verification.
Use it when: Proposal, spec, decision doc; not one-click ghostwriting.
npx skills add anthropics/skills --skill doc-coauthoringRead/create/edit Word files, format, tracked changes, comments, images.
Use it when: `.docx` is mainly for input/output; it is not for general plain text writing.
npx skills add anthropics/skills --skill docxReorganize article sections, tighten prose, and improve argument and readability.
Use it when: Use it on a substantial second draft; retain the publication’s voice and run a separate fact check.
npx skills add mattpocock/skills --skill edit-articleFocus on design engineering craft, micro-interaction, physical motion and refined UI details.
Use it when: Product interaction polishing; not backend architecture skill.
npx skills add emilkowalski/skills --skill emil-design-engExecute according to the existing written plan, keeping checkpoint and review gate.
Use it when: Already have an approved plan; not responsible for redefining requirements.
npx skills add obra/superpowers --skill executing-plansSearch the open Agent Skills ecosystem and find candidates by task, source, and signal.
Use it when: Use it when an agent lacks a focused capability; review every candidate before installing it.
npx skills add vercel-labs/skills --skill find-skillsAfter tests pass, present clear options for merging, opening a PR, retaining the branch, or cleaning it up.
Use it when: Use it when a feature branch is ready to close; it should not push or merge without approval.
npx skills add obra/superpowers --skill finishing-a-development-branchFirebase project setup, core product selection, SDK integration basics.
Use it when: Firebase stack onboarding; product-specific auth/hosting/data to load the corresponding skill.
npx skills add firebase/agent-skills --skill firebase-basicsSearch, scrape, crawl, extract public web, and output agent-friendly data.
Use it when: Use it for broad discovery, then read only the pages that can change the decision; respect robots rules and usage credits.
npx skills add firecrawl/cli --skill firecrawlEstablish distinctive UI direction, typography, layout, and reduce templated defaults.
Use it when: Use it for a new interface or major redesign; run accessibility and implementation QA separately.
npx skills add anthropics/skills --skill frontend-designTurn a general brief/script into a full video composition.
Use it when: Use it when no narrower video workflow fits; prefer a dedicated skill for product promos, PR videos, or faceless explainers.
npx skills add heygen-com/hyperframes --skill general-videoInstall PreToolUse hook to block dangerous git commands.
Use it when: If you want to change security rules into mechanical enforcement; you need to approve the scope before modifying hooks.
npx skills add mattpocock/skills --skill git-guardrails-claude-codeAIDA page structure, editorial type, gapless bento, GSAP ScrollTrigger cinematic motion.
Use it when: Campaign/storytelling site; simple app shell may be overkill.
npx skills add leonxlnx/taste-skill --skill gpt-tasteUse intensive interviews to stress-test plans/designs, and proactively look for assumptions and ambiguities.
Use it when: High risk or poorly defined decisions; user participation required.
npx skills add mattpocock/skills --skill grill-meThe stress testing plan also creates durable docs such as ADR and glossary.
Use it when: Complex domain/long-term project; not quick answer.
npx skills add mattpocock/skills --skill grill-with-docsMake premium agency fonts, spacing, shadows, cards and motion explicit rules.
Use it when: High-value marketing surface; data-heavy internal tool should be used with caution.
npx skills add leonxlnx/taste-skill --skill high-end-visual-designHyperFrames motion rules, scene blueprints, GSAP/Lottie/Three.js/WAAPI adapters.
Use it when: HyperFrames composition; not an introduction to general web animation.
npx skills add heygen-com/hyperframes --skill hyperframes-animationDefine deterministic composition contract, timing attributes, tracks, sub-compositions, validation.
Use it when: Before writing HyperFrames HTML; not applicable to other video frameworks.
npx skills add heygen-com/hyperframes --skill hyperframes-coreDefine palette, typography, narration, beat planning, audio-reactive visuals, and the overall creative specification.
Use it when: Video creative direction; actual motion API handed over to animation skill.
npx skills add heygen-com/hyperframes --skill hyperframes-creativeHTML-first agent video router coordinates core, creative, animation, media, and render workflows.
Use it when: Want to use HTML/CSS/GSAP to create videos; wide capabilities mean a larger attack surface.
npx skills add heygen-com/hyperframes --skill hyperframesMake/analyze large-size section visuals first, then implement high-fidelity websites.
Use it when: Visual fidelity is the main acceptance criterion; it is not required for ordinary CRUD.
npx skills add leonxlnx/taste-skill --skill image-to-codePlan/generate/edit marketing images: hero, social graphic, mockup, banner, OG image.
Use it when: First determine the purpose, proportion, brand and channel; it does not replace paid-ad strategy.
npx skills add coreyhaines31/marketingskills --skill imageEstablish app-native multi-screen concepts, emphasizing hierarchy, readability and consistent palette.
Use it when: Mobile flow/screen exploration; only generate visual, do not write production code.
npx skills add leonxlnx/taste-skill --skill imagegen-frontend-mobileGenerate independent, actionable, high-quality reference images for each website section.
Use it when: Use it for visually critical websites; control generation cost and keep the sections within one coherent system.
npx skills add leonxlnx/taste-skill --skill imagegen-frontend-webFind module seams, dependency problems, and concrete opportunities to improve a codebase’s architecture.
Use it when: Use it when accumulated structural friction is slowing work; avoid purposeless rewrites.
npx skills add mattpocock/skills --skill improve-codebase-architectureSwiss print × military terminal: rigid grid, extreme type scale, utilitarian color, analog degradation.
Use it when: Portfolio/dashboard/editorial concept; for general consumption apps, brand fit must be confirmed first.
npx skills add leonxlnx/taste-skill --skill industrial-brutalist-uiWrite status, leadership updates, FAQs, incident/project updates in a consistent format.
Use it when: Internal communication within the company; change to the company's real format instead of copying the template.
npx skills add anthropics/skills --skill internal-commsExtract public pages into clean structured content to reduce handwriting scrapers.
Use it when: Targeted extraction; stop when encountering 401/403/429/challenge.
npx skills add scrapegraphai/just-scrape --skill just-scrapeApply behavioral science such as anchoring, loss aversion, social proof, and framing to marketing decisions.
Use it when: Explanation/design persuasion; not for manipulation or false scarcity.
npx skills add coreyhaines31/marketingskills --skill marketing-psychologyDesign high-quality MCP server, tool schema, error handling and Python/TypeScript implementation.
Use it when: Agent needs to connect to external service; do not wrap all ordinary local functions with MCP.
npx skills add anthropics/skills --skill mcp-builderWarm monochrome, editorial typography, flat bento, muted palette, prohibit heavy shadow/gradient.
Use it when: Editorial/calm product; if you need strong spectacle, it doesn’t match.
npx skills add leonxlnx/taste-skill --skill minimalist-uiCreate kinetic typography, graphic scenes, transition choreography.
Use it when: Motion-design deliverable; requires render/media pipeline.
npx skills add heygen-com/hyperframes --skill motion-graphicsLyric video, slideshow or kinetic promo powered by audio beat grid.
Use it when: Music leads pacing; narrated explainer is used in other workflows.
npx skills add heygen-com/hyperframes --skill music-to-videoPDF read, OCR, forms, merge, split, create, extract images/tables.
Use it when: PDF artifact; check layout/render first, don’t just extract text.
npx skills add anthropics/skills --skill pdfMicrosoft Playwright CLI operates browser, debug selector, capture evidence.
Use it when: Web QA/repro/browser inspection; not equal to product acceptance criteria.
npx skills add microsoft/playwright-cli --skill playwright-cliCreate/edit/inspect PowerPoint, layouts, notes, comments, templates.
Use it when: `.pptx`/deck deliverable; someone still needs to be responsible for argument and visual QA on each page.
npx skills add anthropics/skills --skill pptxMake SaaS promo, feature reveal, launch video from product URL, script or brief.
Use it when: Commercial product release; generally use website-to-video for site tour.
npx skills add heygen-com/hyperframes --skill product-launch-videoVerify whether review feedback is technically valid and avoid blind pandering.
Use it when: Receive vague/questionable suggestions; respond with repo evidence.
npx skills add obra/superpowers --skill receiving-code-reviewImprove an existing interface without discarding working product behavior or established constraints.
Use it when: Use it for a real redesign of an existing product, not as permission to rebuild everything from scratch.
npx skills add leonxlnx/taste-skill --skill redesign-existing-projectsRemotion official composition, animation, audio, caption, render, media and SaaS guidance.
Use it when: Use it for React and TypeScript programmatic video; review any dependency or security warning in context.
npx skills add remotion-dev/skills --skill remotion-best-practicesKeep Remotion animation agent-readable and Studio Visual Mode editable.
Use it when: New Remotion interactive workflow; very new, only project-local experiment.
npx skills add remotion-dev/skills --skill remotion-interactivityOne-way porting of existing Remotion React composition to HyperFrames HTML.
Use it when: Clear migration request; not triggered by "reference Remotion style".
npx skills add heygen-com/hyperframes --skill remotion-to-hyperframesEstablish a formal review checkpoint before Major feature/merge.
Use it when: After Implementation is completed and tests pass; it does not replace tests.
npx skills add obra/superpowers --skill requesting-code-reviewInvestigate an engineering/product issue and save source-backed findings.
Use it when: Issues that require changes to the implementation decision; do not use hot discussions to replace primary artifacts.
npx skills add mattpocock/skills --skill researchReview motion code using hard criteria such as purpose, frequency, easing, duration, origin, GPU, a11y, etc.
Use it when: Animation PR review; only review, no general features.
npx skills add emilkowalski/skills --skill review-animationsSentry CLI releases, sourcemaps, artifacts, projects, issues related operations.
Use it when: Sentry-integrated repo; any upload/release mutation must retain approval.
npx skills add sentry/dev --skill sentry-cliDiagnose technical/on-page SEO, crawl, indexing, metadata, Core Web Vitals.
Use it when: Audit first and then change; no ranking guaranteed.
npx skills add coreyhaines31/marketingskills --skill seo-auditDiscover, install, and compose shadcn/ui components through its registry workflow.
Use it when: Use it in a shadcn-based stack; it does not replace product-specific visual direction.
npx skills add shadcn/ui --skill shadcnCreate, revise, test, and benchmark skills, including their trigger descriptions.
Use it when: Use it when a workflow recurs often enough to deserve an instruction package; keep one-off tasks as prompts.
npx skills add anthropics/skills --skill skill-creatorGenerate animated GIFs for Slack size, loop, frame, palette constraints.
Use it when: Small reaction/demo GIF; not feature film workflow.
npx skills add anthropics/skills --skill slack-gif-creatorSocial content, repurposing, calendar, short-form script, listening and engagement triage.
Use it when: LinkedIn/X/IG/TikTok; any publish/schedule/reply workflow requires explicit approval.
npx skills add coreyhaines31/marketingskills --skill socialGenerate agent-readable `DESIGN.md` for Google Stitch with semantic design system.
Use it when: Stitch workflow; non-Stitch projects can only borrow rules and cannot assume integration.
npx skills add leonxlnx/taste-skill --skill stitch-design-tasteHandle independent implementation tasks to an isolated context and review them one by one.
Use it when: Use it when the harness supports subagents and the tasks are genuinely independent; avoid it for tightly shared state.
npx skills add obra/superpowers --skill subagent-driven-developmentSupabase official Postgres query, schema, index, performance best practices.
Use it when: Supabase/Postgres code; it must be verified with the real execution plan/RLS.
npx skills add supabase/agent-skills --skill supabase-postgres-best-practicesUse observe → hypothesize → test → verify to find the root cause.
Use it when: Bug, test failure, unexpected behavior; do not mention fix before locating it.
npx skills add obra/superpowers --skill systematic-debuggingKeep the original film and add graphic overlay, lower-third, quote, PIP, and data callout according to transcript.
Use it when: Interview/podcast/talking head packaging; plain subtitle uses captions.
npx skills add heygen-com/hyperframes --skill talking-head-recutFeature/bugfix uses red-green-refactor and writes the test that will fail first.
Use it when: Code change with measurable behavior; pure content/prototype can be judged separately.
npx skills add obra/superpowers --skill test-driven-developmentSet presets or create new color/font themes for slides, docs, reports, and HTML.
Use it when: Maintain consistency across assets; not responsible for brand strategy itself.
npx skills add anthropics/skills --skill theme-factoryExtensive UI/UX patterns, styles, platform guidance and design intelligence.
Use it when: Use it for pattern exploration, then constrain the result with the product’s real tokens and conventions.
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-maxCreate an isolated Git worktree that protects the current dirty tree and branch.
Use it when: Use it for larger features or concurrent sessions; a tiny text edit may not justify the overhead.
npx skills add obra/superpowers --skill using-git-worktreesUse compound components, state lifting, and composition to avoid boolean-prop explosions.
Use it when: Reusable component API/design system; simple leaf component may not be needed.
npx skills add vercel-labs/agent-skills --skill vercel-composition-patternsVercel Engineering's React/Next.js performance rules.
Use it when: React code, data fetching, bundle, render optimization; do not use if it is not React.
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practicesReact/Next.js View Transition API: route, shared element, enter/exit, list reorder.
Use it when: React related API; reduce-motion fallback should be retained.
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitionsForce fresh verification command to be run before all fixed/done/passing claims.
Use it when: All completion gates; don't accept "should have".
npx skills add obra/superpowers --skill verification-before-completionUse React, Tailwind, and shadcn to build multi-component HTML artifacts with state/routing.
Use it when: Complex interactive artifacts; not required for simple HTML alone.
npx skills add anthropics/skills --skill web-artifacts-builderReview UI code with 100+ accessibility, UX, performance rules.
Use it when: QA after Build; not responsible for selecting art direction from scratch.
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesUse Playwright to test local web apps, take screenshots, and view console/browser logs.
Use it when: Local UI verification; remote production mutation is not a default.
npx skills add anthropics/skills --skill webapp-testingCapture website screenshots/brand assets, make site tours, showcases, and social clips.
Use it when: Portfolio/docs/site showcase; not equivalent to launch commercial.
npx skills add heygen-com/hyperframes --skill website-to-videoProduces black and white lo-fi SVG, annotation and multi-screen flow, deliberately delaying branding decisions.
Use it when: Before Layout/flow is determined; production UI, hi-fi, and publish are not within the default scope.
Split the spec into a file-level, step-by-step, and verifiable implementation plan.
Use it when: Multi-step feature/migration; when the intent is not clear, brainstorming should be done first.
npx skills add obra/superpowers --skill writing-plansShape raw material into paragraph-by-paragraph article shape.
Use it when: Use it when you have substantial raw material but no coherent structure; it is an intermediate editorial step.
npx skills add mattpocock/skills --skill writing-shapeSpreadsheet read/write, formula, format, chart, clean, restructure.
Use it when: Spreadsheet is mainly deliverable; database pipeline should not be hard converted to Excel.
npx skills add anthropics/skills --skill xlsxChoose a modern visual system, layout, hero, typography, and motion direction for landing pages, SaaS sites, and portfolios without generic AI styling.
Use it when: Use it when a web project needs a coherent design direction and explicit visual QA.
Turn a vague request into a bounded, testable task contract so an AI agent stays in scope and finishes the work.
Use it when: Use it before a consequential or ambiguous agent task that needs explicit acceptance criteria.
Build documentary-style image prompts with intentional lens, blocking, light, and imperfection so results feel observed rather than synthetic.
Use it when: Use it for authentic editorial or documentary image direction; verify that people and claims are represented responsibly.
Collect and organize public web and social research with controlled pacing, rate limits, and an evidence-first workflow.
Use it when: Use it to assemble a lawful research corpus from public material; respect access controls, privacy, and platform terms.
Use scrolling as a continuous camera move through connected scenes, including practical mobile and iOS video-decoding fixes.
Use it when: Use it for a cinematic, scene-based web experience where scroll drives the journey.
An anti-slop frontend design system for landing pages, portfolios, and redesigns that avoids template-like defaults.
Use it when: Use it when a project needs one strong visual taste layer; do not combine it with several competing style systems.
Official GSAP guidance for timelines, ScrollTrigger, plugins, and framework integrations such as React and Vue.
Use it when: Use it when GSAP is the chosen animation runtime and current API guidance matters.
An open-source React, TypeScript, Tailwind, and Motion component library with installable animated controls and transitions.
Use it when: Use it when a React project needs source-owned animation components instead of custom-building every interaction.
Design-engineering principles for typography, micro-interactions, motion, and the small details that make an interface feel considered.
Use it when: Use it for the polish pass after the core product flow and accessibility are working.
Apply the twelve classic animation principles to web interactions so motion feels clear, responsive, and alive.
Use it when: Use it when interface motion feels mechanical and needs stronger timing, anticipation, and follow-through.
Audit and fix labels, keyboard operation, focus management, contrast, form errors, and WCAG-related interaction issues.
Use it when: Use it before shipping interactive controls, forms, menus, and dialogs.
Detect React regressions in security, performance, correctness, and architecture through a scored quality check.
Use it when: Use it as a focused React health check, then inspect each finding before changing code.
Practical Vitest patterns for unit tests, mocks, coverage, fixtures, and test filtering.
Use it when: Use it when Vitest is the project’s test runner and you need reliable, maintainable test structure.
Guidance for strict dependency resolution, workspaces, catalogs, patches, and overrides in pnpm projects.
Use it when: Use it for pnpm workspaces and monorepos where dependency policy and repeatability matter.
The most starred Claude Code skills: brainstorming, TDD, debug, git worktree... A set of development methodologies that can be combined and automatically triggered.
Use it when: Use the individual workflow that matches the task—planning, TDD, debugging, worktrees, or review—rather than loading everything at once.
Turn a codebase into an interactive knowledge graph where files, functions, and classes can be explored and searched.
Use it when: Use it to onboard to a large unfamiliar codebase or map relationships before making structural changes.
Anthropic’s official collection for PDF, DOCX, PPTX, XLSX, browser, and other artifact workflows.
Use it when: Use the focused skill that matches the artifact instead of treating the whole repository as one workflow.
An adaptive web-scraping framework with an MCP server for extracting structured content before agent processing.
Use it when: Use it for permitted public-web extraction where robustness and token efficiency matter.
Bring current library documentation into an agent’s context instead of relying on potentially outdated training data.
Use it when: Use it whenever implementation depends on current framework, SDK, API, or CLI documentation.
Garry Tan’s solo-developer agent stack: a coordinated set of workflows and tools for producing team-scale output with AI agents.
Use it when: Use it as an operating model for a substantial build, then keep only the pieces your project needs.
Detect and revise common English AI-writing patterns such as inflated symbolism, promotional tone, excessive dashes, and formulaic structure.
Use it when: Use it as an editorial review pass after the facts, argument, and voice are already correct.
A Chinese-language editorial pass that removes formulaic AI phrasing while preserving meaning and natural regional usage.
Use it when: Use it to review Chinese drafts, then have a fluent human check tone, facts, and local nuance.
Many practical workflows are already bundled with Cursor or Claude Code, including skill creation, CI fixes, deployment helpers, Sentry, and Git publishing.
Use it when: Check the agent’s built-in capabilities before installing a duplicate third-party skill.
Try a broader phrase or clear one of the filters.
Distinctive workflows
Selected because the workflow is difficult to replace with one generic prompt, not because it is the most installed.
Convert fuzzy motion descriptions into formal terms to facilitate precise prompt/brief.
Use it when you need the correct name for a motion effect; it names patterns but does not implement them.Review source ↗Generate brand board, logo system, identity deck, mockup and visual world.
To establish a complete identity direction; do not treat the first logo output as the finished product.Review source ↗Derive a distinctive, anti-generic design direction from the brief, with redesign analysis and a preflight review.
Use it for landing pages, portfolios, and campaigns; choose one strong taste system rather than stacking several.Review source ↗Install PreToolUse hook to block dangerous git commands.
If you want to change security rules into mechanical enforcement; you need to approve the scope before modifying hooks.Review source ↗Use intensive interviews to stress-test plans/designs, and proactively look for assumptions and ambiguities.
High risk or poorly defined decisions; user participation required.Review source ↗The stress testing plan also creates durable docs such as ADR and glossary.
Complex domain/long-term project; not quick answer.Review source ↗Make premium agency fonts, spacing, shadows, cards and motion explicit rules.
High-value marketing surface; data-heavy internal tool should be used with caution.Review source ↗Make/analyze large-size section visuals first, then implement high-fidelity websites.
Visual fidelity is the main acceptance criterion; it is not required for ordinary CRUD.Review source ↗Generate independent, actionable, high-quality reference images for each website section.
Use it for visually critical websites; control generation cost and keep the sections within one coherent system.Review source ↗Keep Remotion animation agent-readable and Studio Visual Mode editable.
New Remotion interactive workflow; very new, only project-local experiment.Review source ↗Review motion code using hard criteria such as purpose, frequency, easing, duration, origin, GPU, a11y, etc.
Animation PR review; only review, no general features.Review source ↗Keep the original film and add graphic overlay, lower-third, quote, PIP, and data callout according to transcript.
Interview/podcast/talking head packaging; plain subtitle uses captions.Review source ↗Produces black and white lo-fi SVG, annotation and multi-screen flow, deliberately delaying branding decisions.
Before Layout/flow is determined; production UI, hi-fi, and publish are not within the default scope.Review source ↗Use scrolling as a continuous camera move through connected scenes, including practical mobile and iOS video-decoding fixes.
Use it for a cinematic, scene-based web experience where scroll drives the journey.Review source ↗Start deliberately
Use these as starting points, then remove anything that does not serve the actual job.
Move from a clear brief to tested, reviewed work.
brainstormingwriting-planssystematic-debuggingtest-driven-developmentverification-before-completionrequesting-code-reviewPair visual direction with implementation and verification.
frontend-designvercel-react-best-practicesone focused taste skillweb-design-guidelineswebapp-testingResolve structure and visual truth before writing production UI.
wireframeimagegen-frontend-webimage-to-codereview-animationsGround ideas in sources, then shape and review the final copy.
firecrawl or researchcontent-strategydoc-coauthoringcopy-editingseo-audit or ai-seoChoose one production system instead of mixing incompatible approaches.
remotion-best-practicesremotion-interactivity when neededor Hyperframes with one focused workflowUse mechanical guardrails and keep consequential actions human-approved.
using-git-worktreesgit-guardrails-claude-codeverification-before-completionhuman approval for deploy, send, publish, and paymentUse skills in real work
Choose the smallest useful stack, then practice it in a lesson and verify the final output yourself.