Wayne Sutton

Patterns for scaling read-heavy Convex apps to millions of users. Use when optimizing bandwidth, reducing query costs, fixing slow queries, creating digest tables, replacing reactive subscriptions with one-shot fetches, adding compound indexes, debouncing writes, rate-controlling backfills, or running npx convex insights. Trigger when users mention "scale", "bandwidth", "performance", "optimize", "slow queries", "expensive queries", "digest table", "denormalize", or "thundering herd" in the context of Convex.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when the user says /localstop, localstop, stop localhost for this app, /localstopall, localstopall, or asks to stop local development servers for this Teleprompt app.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Full-stack Convex development guidelines covering React, Vite, TypeScript, mutations, auth, design system, and documentation practices. Use when building features, writing Convex functions, or making code changes in this project.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Security review checklist for Convex functions, auth logic, public queries, admin routes, webhooks, uploads, and AI-generated code. Use when reviewing code that touches user data, PII, or access control.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Plans Convex schema and data migrations with widen-migrate-narrow and @convex-dev/migrations. Use for breaking schema changes, backfills, table reshaping, or zero-downtime rollouts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when the user says /deployprod, deploy prod, deploy production, upload production static hosting, or asks to deploy the current app to its production Convex static-hosting target.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Combine React's official "You Might Not Need an Effect" guidance with this project's stricter no direct useEffect stance. Use when writing, reviewing, or refactoring React components that might reach for useEffect, derived state, event relays, reset logic, subscriptions, or client fetching.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build reactive, type-safe, production-grade backends. ALWAYS use this skill when the user asks to build, plan, design, or implement backend features, APIs, data models, server logic, database schemas, web apps, full stack apps, or mobile apps. This includes planning and architecture discussions.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Project workflow for PRDs, task tracking, changelog sync, and documentation updates. Use for any non-trivial task that spans multiple steps, touches several files, changes architecture, or needs project tracking updates. Also activates with @update to sync task.md, changelog.md, and files.md after completing work.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create Convex queries, mutations, and actions with proper validation, authentication, and error handling. Use when implementing new API endpoints.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Expert Convex Auth setup, production, OAuth, security, and debugging guidance. Use when adding or auditing Convex Auth, configuring GitHub/Google/Apple OAuth, setting auth env vars, protecting Convex functions with getAuthUserId, debugging callback URLs, preparing production auth, rotating keys, or reviewing auth security.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Builds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component boundary work.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Convex UI component patterns from the live Storybook preview. Use when building React components, forms, modals, navigation, feedback states, or app layouts that should match the current Convex design system. Applies to both shared primitives and dashboard style product UI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Run convex-doctor static analysis, interpret findings, and fix issues across security, performance, correctness, schema, and architecture categories. Use when running convex-doctor, fixing convex-doctor warnings or errors, improving the convex-doctor score, or when asked about Convex code quality, static analysis, or linting Convex functions.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Integrate Convex static self hosting into existing apps using the latest upstream instructions from get-convex/self-hosting every time. Use when setting up upload APIs, HTTP routes, deployment scripts, migration from external hosting, or troubleshooting static deploy issues across React, Vite, Next.js, and other frontends.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.