agent-skills-studio

Use when a project needs software-supply-chain or third-party dependency risk assessed from manifests, lockfiles, advisories, provenance, maintenance signals, and realistic runtime exposure before upgrades or release.

Use when reviewing an implemented frontend against Figma, screenshots, a live reference, or explicit visual acceptance criteria and concrete visual regressions must be identified and prioritized.

Use when the user explicitly opts into this opinionated web-app baseline, asks to use the personal starter, or wants this repository's preferred Next.js project conventions.

Use when an approved brand identity needs durable rules, assets, examples, accessibility constraints, and governance so multiple people can reproduce it consistently across channels.

Use when designing or improving a landing page, product page, digital-product storefront, pricing page, or marketing flow where visitor comprehension and conversion are primary goals.

Use when a game needs a practical pipeline combining generated, hand-authored, 2D, 3D, procedural, or purchased assets while keeping visual consistency, runtime constraints, and iteration speed under control.

Use when creating or redesigning a polished Next.js or React interface where visual distinction, strong hierarchy, responsive behavior, accessibility, and production readiness matter.

Use when a bug, outage, production defect, or failed higher-level test must become a durable automated guard before the implementation is changed.

Use when implementing or reviewing Node.js API or service endpoints that cross trust or data boundaries and require explicit validation, authorization, failure semantics, observability, or retry behavior.

Use when starting or reshaping an application where deployment topology, scaling, reliability, ownership, coupling, or delivery constraints make the architectural shape unclear.

Use when designing, implementing, refining, or auditing premium web motion systems, including microinteractions, transitions, scroll choreography, reveals, kinetic typography, smooth scrolling, SVG, canvas, WebGL, 3D, loaders, ambient effects, and animation performance. Applies to React, Next.js, Vue, Svelte, and vanilla projects needing coherent motion, reference-inspired movement, motion tokens, or fixes for janky, excessive, or inaccessible animation.

Use when defining, generating, reviewing, or expanding a 2D character sprite set that must remain anatomically consistent across idle, movement, combat, directional, and transition animations.

Use when a new, repositioned, or inconsistent brand needs explicit audience, positioning, differentiation, personality, and decision criteria before naming, identity, or messaging work begins.

Use when creating or tuning real-time game combat involving attacks, hit reactions, dodge or guard behavior, enemy telegraphs, combos, animation timing, or moment-to-moment combat readability.

Use when defining or reviewing a relational data model where entities, ownership, cardinality, lifecycle, constraints, or access patterns need explicit decisions before implementation.

Use when modules, services, packages, or teams have unclear ownership, cyclic dependencies, shared state, change coupling, or responsibilities that are difficult to evolve independently.

Use when a feature, service, or release needs a deliberate verification plan and the team is unsure which risks belong in unit, integration, end-to-end, or non-functional tests.

Use when a project needs reusable UI tokens, component conventions, variants, responsive rules, or a coherent design system across multiple screens or features.

Use when an approved brand strategy needs a coherent visual identity system across multiple touchpoints, including marks, typography, color, imagery, graphic language, and responsive applications.

Use when a software decision materially affects structure, quality attributes, dependencies, interfaces, technology choices, or team direction and its rationale must remain reviewable over time.

Use when revising existing prose for clarity, concision, structure, readability, or an explicitly requested tone while preserving the original meaning and factual content.

Use when GSAP has been selected for React or Next.js animation, especially timelines, ScrollTrigger, pinning, scrub, SplitText, Flip, SVG, responsive animation, plugin lifecycle, cleanup, or animation-related integration bugs.

Use when changing a PostgreSQL schema that already contains production data or serves live traffic, especially for columns, constraints, indexes, types, backfills, renames, or destructive cleanup.

Use when supplied prose sounds generic, formulaic, over-polished, or recognizably AI-shaped and needs a more natural human rhythm while preserving facts, meaning, citations, protected text, and any supplied writer voice.

Use when implementing a UI from Figma, screenshots, mockups, or an existing visual reference and fidelity to layout, spacing, typography, crops, and states is a primary acceptance criterion.

Use when an implementation is growing across multiple concerns, branches, or pull requests and needs to be decomposed into small changes that can be verified and integrated safely.

Use when a brand, product, service, feature, or program needs a name that must fit strategic positioning, language constraints, category context, and preliminary availability checks.

Use when a frontend has janky scrolling, excessive CPU or GPU use, long-session slowdown, offscreen animation work, WebGL or RAF loops, animation-related memory leaks, or costly GSAP effects.

Use when a React or Next.js interface needs a coherent premium motion language involving scroll choreography, reveals, parallax, pinned scenes, hover motion, or cinematic transitions.

Use when an engineering objective is broad, ambiguous, risky, or spans multiple changes and needs a concrete implementation sequence before coding begins.

Use when a structural refactor crosses multiple modules, dependencies, data flows, or deployments and cannot be completed safely as one atomic change without a large blast radius.

Use when a writing task is high-stakes, multi-stakeholder, source-grounded, or ambiguous enough that audience, objective, channel, evidence, and constraints must be resolved before drafting.

Use when a PostgreSQL query is slow, resource-heavy, regressed, or has uncertain index behavior and the cause needs to be measured before changing SQL, schema, or indexes.

Use when a supplied image should become a code-only procedural Three.js object or stylized character, especially when fidelity, hidden geometry, animation readiness, runtime hierarchy, review gates, or single-view limitations must be evaluated.

Use when an authorized API or backend boundary needs security review for authentication, object/function/property authorization, resource abuse, business-flow abuse, SSRF, configuration, inventory, and third-party consumption.

Use when a pull request, patch, or proposed code change needs technical review before merge, especially when behavior, architecture, regressions, tests, or risk must be evaluated from evidence.

Use when an authorized web application needs a structured security review across access control, sessions, browser-facing controls, input handling, configuration, cryptography, errors, and observability.

Use when a task could match multiple Agent Skills, the owning method is unclear, or a minimal ordered set of working methods must be chosen before execution.

Use when completing repository work that should be committed, pushed, reviewed through a pull request, or promoted through development and production branches with Vercel deployment in mind.

Use when code crosses a database, filesystem, queue, network API, process, or module boundary and isolated tests cannot prove serialization, persistence, protocol, or failure behavior.

Use when verifying a browser or desktop game build for gameplay correctness, controls, combat feel, camera behavior, animation, performance, progression, and regression risk before calling a feature complete.

Use when a web application's assembled browser experience, critical user journeys, routing, forms, authentication, client state, or network behavior must be verified beyond component and integration tests.

Use when a feature, service, or application needs security risks identified from its architecture, assets, trust boundaries, and abuse cases before implementation or release.

Use when converting Figma designs or design-system components into production Next.js and React code while preserving fidelity, reuse, responsiveness, and maintainable component boundaries.

Use when a useful workflow, implementation pattern, debugging method, design technique, or repeated prompt should become a reusable Agent Skill for future projects.

Use when a brand needs a durable verbal identity, messaging hierarchy, terminology, and tone guidance that stays recognizable across channels without becoming conversion-page copywriting.

Use when writing or revising landing pages, sales pages, promotional emails, ads, product offers, calls to action, or other marketing copy whose job is to help a reader make a specific decision.

Use when engineering work is being paused, delegated, moved to another session or agent, or transferred to another person and the next worker needs enough verified context to continue without rediscovery.

Use when writing interface labels, buttons, onboarding, forms, permissions, empty states, loading states, errors, confirmations, notifications, or other product text that helps a user understand state and take an action.