bloomstudio

Adds a new table to Convex schema with indexes. Input: Table name, fields, and query patterns. Output: Updated schema.ts with new table definition.

Creates a new page/route in Next.js App Router with all boilerplate. Input: Route path (e.g., "/dashboard") and page purpose. Output: page.tsx, layout.tsx (if needed), loading.tsx, error.tsx.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Creates interactive React Client Components with hooks and event handlers. Input: Component name, purpose, required interactivity. Output: Client component file with proper structure and tests.

Creates pages, layouts, and server/client components in Next.js 16 App Router. Use for: new routes, RSC/RCC decisions, Server Actions, loading/error states. DO NOT use for: Convex mutations (use managing-convex), styling (use styling-ui).

Generates images using Pollinations API. Validates model constraints and dimensions. Use for: image generation logic, model selection, constraint validation. DO NOT use for: video generation (use generating-videos), UI styling (use styling-ui).

Generates videos using Pollinations API. Validates duration, audio, and interpolation capabilities. Use for: video generation logic, model selection, duration constraints. DO NOT use for: image generation (use generating-images), thumbnailing (handled automatically).

Manages Convex backend: schema, queries, mutations, and actions. Use for: database operations, server logic, real-time subscriptions. DO NOT use for: frontend components (use developing-nextjs), API routes (use Next.js actions).

Preloads Convex data in Server Components for SSR with client-side reactivity. Input: Query to preload and component that consumes it. Output: Server Component with preloadQuery + Client Component with usePreloadedQuery.

Enforces design system using Tailwind CSS v4 and shadcn/ui. Use for: all styling, theming, responsive design, animations. DO NOT use for: component logic (use developing-nextjs), data fetching (use managing-convex).

Tests code using Vitest and React Testing Library. Use for: unit tests, component tests, regression tests, bug fix verification. DO NOT use for: E2E tests (not set up), visual testing.

Tests React components with Vitest and React Testing Library. Input: Component to test. Output: Test file with render, interaction, and assertion tests.

Tests pure functions, utilities, and logic with Vitest. Input: Function/module to test. Output: Test file with unit tests for all cases.

Creates Convex queries, mutations, or actions for database operations. Input: Function type (query/mutation/action), table, and operation. Output: Typed Convex function with args validation.

Creates Next.js Server Actions for form mutations and server-side operations. Input: Action purpose and input schema. Output: Server action file with validation and error handling.