KungRaseri
b192cd53ba
- Add comprehensive project overview and core philosophy - Document file structure reference for the codebase - Create key files reference table for task-specific guidance - Include multi-tenant guidelines and site resolution flow
72 lines
2.3 KiB
Markdown
72 lines
2.3 KiB
Markdown
---
|
|
description: 'Scaffold a new Svelte 5 component for The Collective Hub. Follows runes convention, snippets over slots, Tailwind CSS, and Lucide icons.'
|
|
agent: 'agent'
|
|
---
|
|
|
|
Scaffold a Svelte 5 component for The Collective Hub: ${input}
|
|
|
|
Follow all conventions in:
|
|
- [components.instructions.md](.github/instructions/components.instructions.md)
|
|
- [svelte5.instructions.md](.github/instructions/svelte5.instructions.md)
|
|
- [icons.instructions.md](.github/instructions/icons.instructions.md)
|
|
- [tailwindcss.instructions.md](.github/instructions/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
|
|
|
|
```svelte
|
|
<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>
|
|
```
|