AI Prompt Guide

Use these example prompts to tell your Creator Cubi what to build. Each prompt includes context about the packages and how they work together.

💡 Tip: Click the copy button to copy any prompt, then paste it into CreatorCubi.link to build that feature.

UI & Components

Building beautiful interfaces

lucide-svelte + mode-watcher

"Add a dark mode toggle button to the header using mode-watcher. Use the Moon and Sun icons from lucide-svelte."

Context for AI

The mode-watcher package is already installed. Import { toggleMode } from "mode-watcher" and { Moon, Sun } from "lucide-svelte".

svelte-sonner

"Show a success toast notification when the user saves their profile. Use svelte-sonner for the toast."

Context for AI

Import { toast } from "svelte-sonner" and call toast.success("Profile saved!"). Make sure <Toaster /> is in your layout.

clsx + tailwind-merge

"Create a Button component that accepts a variant prop (primary, secondary, danger) and merges Tailwind classes properly."

Context for AI

Use the cn() utility: const cn = (...inputs) => twMerge(clsx(inputs)). This prevents Tailwind class conflicts.

Forms & Validation

Type-safe forms with validation

sveltekit-superforms + zod

"Create a contact form with name, email, and message fields. Validate that email is valid and message is at least 10 characters."

Context for AI

Use zod to define the schema, then use superForm() in the component. The form will have automatic validation and error handling.

sveltekit-superforms

"Add a multi-step form for user onboarding with 3 steps: personal info, preferences, and confirmation."

Context for AI

Superforms supports multi-step forms. Use $form state to track current step and conditionally render form sections.

State & Utilities

Managing state and data

runed

"Add a search input that only triggers the search after the user stops typing for 500ms."

Context for AI

Use the useDebounce utility from runed. Import { useDebounce } from "runed" and wrap your search function.

svelte-persisted-store

"Save the user's theme preference (dark/light) to localStorage so it persists across sessions."

Context for AI

Use persisted() from svelte-persisted-store. Example: const theme = persisted("theme", "dark").

nanoid

"Generate unique IDs for each item in a todo list."

Context for AI

Import { nanoid } from "nanoid" and call nanoid() to generate a unique ID. Example: const id = nanoid().

Data Fetching & API

Fetching and caching data

@tanstack/svelte-query

"Fetch a list of users from /api/users and show a loading state while fetching. Cache the results for 5 minutes."

Context for AI

Use createQuery() from @tanstack/svelte-query. Set staleTime: 5 * 60 * 1000 for 5-minute caching.

ky

"Make a POST request to /api/users with retry logic (3 attempts) and a 5-second timeout."

Context for AI

Import ky from "ky" and use ky.post("/api/users", { json: data, retry: 3, timeout: 5000 }).

3D & Graphics

Creating immersive experiences

@threlte/core + three

"Create a 3D scene with a rotating cube that changes color when clicked."

Context for AI

Use <Canvas> from @threlte/core, <T.Mesh> for the cube, and onclick handler. The scene will render in the browser.

@threlte/rapier

"Add physics to the 3D scene so objects fall and bounce realistically."

Context for AI

Wrap objects in <RigidBody> from @threlte/rapier. Use <AutoColliders> for automatic collision detection.

konva

"Create an interactive canvas where users can draw shapes and drag them around."

Context for AI

Use Konva.Stage and Konva.Layer. Add draggable: true to shapes. Mount in onMount() to ensure browser-only execution.

Animation

Smooth, professional animations

gsap

"Animate a card sliding in from the left when the page loads, with a bounce effect."

Context for AI

Import gsap from "gsap" and use gsap.from(".card", { x: -100, opacity: 0, duration: 1, ease: "bounce.out" }).

svelte-motion

"Add a fade-in animation to each item in a list as they appear."

Context for AI

Wrap items in <Motion> component with initial={{ opacity: 0 }} and animate={{ opacity: 1 }}.

Audio & Video

Rich media experiences

howler

"Play a sound effect when the user clicks a button."

Context for AI

Import { Howl } from "howler". Create: const sound = new Howl({ src: ["sound.mp3"] }); then sound.play().

simple-peer

"Create a video chat feature where two users can see and hear each other."

Context for AI

Use SimplePeer for WebRTC. You'll need a signaling server to exchange connection info between peers.

Real-Time Communication

Live updates and chat

socket.io-client

"Add a real-time chat feature where messages appear instantly for all users."

Context for AI

Import { io } from "socket.io-client". Connect to your Socket.IO server and listen for "message" events.

socket.io-client

"Show a live counter of how many users are currently viewing the page."

Context for AI

Emit a "user-joined" event when component mounts, listen for "user-count" updates from the server.

Utilities

Essential tools for common tasks

date-fns

"Display all dates in the format "January 15, 2025" and show relative times like "2 hours ago"."

Context for AI

Import { format, formatDistanceToNow } from "date-fns". Use format(date, "MMMM d, yyyy") and formatDistanceToNow(date).

qrcode

"Generate a QR code for the current page URL that users can scan to share."

Context for AI

Import QRCode from "qrcode". Use QRCode.toDataURL(url) to get an image data URL, then display in an <img> tag.

html5-qrcode

"Add a QR code scanner that uses the device camera to scan codes."

Context for AI

Import { Html5Qrcode } from "html5-qrcode". Create a scanner instance and call start() with camera config.

jspdf

"Add a "Download as PDF" button that generates a PDF of the current page content."

Context for AI

Import { jsPDF } from "jspdf". Create a new jsPDF instance, add text/images, then call doc.save("file.pdf").

leaflet

"Add an interactive map showing the user's location with a marker."

Context for AI

Import L from "leaflet". Create a map with L.map(), add tile layer, and use L.marker() for markers. Load in onMount().

Advanced Examples

Combining multiple packages

Multiple packages

"Create a dashboard with a 3D globe showing real-time user locations, with toast notifications when new users join."

Context for AI

Combine @threlte/core for 3D, socket.io-client for real-time updates, and svelte-sonner for notifications.

Multiple packages

"Build a form that validates input, saves to localStorage, shows success toast, and generates a PDF receipt."

Context for AI

Use superforms + zod for validation, svelte-persisted-store for storage, svelte-sonner for toast, jspdf for PDF.

Multiple packages

"Create an interactive canvas drawing app with undo/redo, save to PDF, and share via QR code."

Context for AI

Use konva for canvas, nanoid for IDs, jspdf to export, qrcode to generate share link. Store state with runed utilities.

More Resources

📚 Package Documentation

View detailed technical documentation for all 28 packages.

View Capabilities →

📖 README Files

Check the repository for comprehensive package guides and examples.

PACKAGES_README.md

RECOMMENDED_PACKAGE_LIST.md

SVELTEKIT_PACKAGES_RESEARCH.md

💡 Tips for Better AI Prompts

•
Be specific: Instead of "add a form", say "add a contact form with name, email, and message fields with validation"
•
Mention packages: If you know which package to use, mention it: "use svelte-sonner for toast notifications"
•
Describe behavior: Explain what should happen: "when the user clicks save, show a success message and redirect to /dashboard"
•
Reference existing code: "Add this to the /cubes page" or "Update the header component"