productplate

Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.

Build, review, debug, and refactor accessible SvelteKit form UI using Formsnap with sveltekit-superforms, including Field, Fieldset, Control, Label, Description, FieldErrors, ElementField, Svelte 5 snippets, shadcn-svelte form wrappers, dynamic arrays, checkbox/radio groups, and custom controls.

Build, review, debug, and refactor SvelteKit forms using sveltekit-superforms, schema adapters, server actions, progressive enhancement, client validation, nested data, multiple forms, files, messages, and tainted-state handling.

Build, debug, and review SvelteKit node editors and graph UIs using Svelte Flow / @xyflow/svelte. Use this for workflow builders, visual programming, automation editors, graph diagrams, custom nodes/edges, handles, minimaps, graph persistence, validation, layouting, migration to Svelte Flow v1/Svelte 5, or troubleshooting pan/zoom/connection behavior.

Build, debug, and review SvelteKit 3D experiences using Threlte, Three.js, @threlte/extras, @threlte/gltf, @threlte/rapier, @threlte/theatre, and related packages. Use this when the user asks for Svelte/SvelteKit 3D scenes, model viewers, configurators, physics, game-like scenes, scroll-driven 3D, performance fixes, Threlte code review, or migration from imperative Three.js.

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".

Prevent feature creep when building software, apps, and AI-powered products. Use this skill when planning features, reviewing scope, building MVPs, managing backlogs, or when a user says "just one more feature." Helps developers and AI agents stay focused, ship faster, and avoid bloated products.

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

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

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.

Audits Convex performance for reads, subscriptions, write contention, and function limits. Use for slow features, insights findings, OCC conflicts, or read amplification.

Creates or adds Convex to an app. Use for new Convex projects, npm create convex@latest, frontend setup, env vars, or the first npx convex dev run.

Sets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.

Routes general Convex requests to the right project skill. Use when the user asks which Convex skill to use or gives an underspecified Convex app task.

Common good packages to use when facing a problem in this SvelteKit boilerplate. Check this skill when you want a package for a task: these are the official or project-recommended choices and are mostly maintained. If the package you need is not listed here, find a good, maintained package with active releases, clear docs, TypeScript support, and SvelteKit compatibility.