the-collective-hub/.github/prompts/generate-svelte-component.prompt.md

description, agent

description	agent
Scaffold a new Svelte 5 component for The Collective Hub. Follows runes convention, snippets over slots, Tailwind CSS, and Lucide icons.	agent

Scaffold a Svelte 5 component for The Collective Hub: ${input}

Follow all conventions in:

• components.instructions.md
• svelte5.instructions.md
• icons.instructions.md
• tailwindcss.instructions.md

Conventions

1. PascalCase filename — TheComponent.svelte
2. Place in appropriate folder:
   • src/lib/components/ui/ — generic reusable UI primitives
   • src/lib/components/layout/ — structural shell components
   • Route directory — page-specific components
3. Use Svelte 5 runes:
   • $props() for component props with inline type
   • $state() for local state
   • $derived() for computed values
   • $effect() for side effects (sparingly)
   • $bindable() for two-way bindings
4. Snippets over slots for composition patterns
5. Tailwind CSS for styling
6. Lucide icons from @lucide/svelte — import individual icons by name
7. No svelte-ignore comments — fix accessibility and type issues properly

Example Component

<script lang="ts">
    import { Heart } from '@lucide/svelte';

    let {
        title,
        description = '',
        liked = $bindable(false),
    }: {
        title: string;
        description?: string;
        liked?: boolean;
    } = $props();

    let count = $state(0);
    let doubled = $derived(count * 2);
</script>

<div class="rounded-lg border p-4">
    <div class="flex items-center gap-2">
        <h2 class="text-lg font-semibold">{title}</h2>
        <button
            onclick={() => (liked = !liked)}
            class="ml-auto"
            aria-label={liked ? 'Unlike' : 'Like'}
        >
            <Heart class={liked ? 'fill-red-500 text-red-500' : ''} />
        </button>
    </div>
    {#if description}
        <p class="mt-2 text-gray-600">{description}</p>
    {/if}
    <p class="mt-2">Count: {count} (doubled: {doubled})</p>
    <button onclick={() => count++} class="mt-2 rounded bg-blue-600 px-3 py-1 text-white">
        Increment
    </button>
</div>