Svelte 5 + Flowbite Component Builder

Expert skill for building modern Svelte 5 applications with Flowbite-Svelte components using MCP server documentation access and automated validation.

What This Skill Does

This skill enables you to build production-ready Svelte 5 components using the latest runes API and Flowbite-Svelte UI components. It provides structured workflows for accessing comprehensive documentation, validating code quality, and generating playground links for testing.

Prerequisites

This skill requires two MCP servers to be configured:

Instructions

Phase 1: Understand Requirements

1. Analyze the user's request to identify:

- Required Svelte concepts (reactivity, components, lifecycle, etc.)

- Needed Flowbite-Svelte UI components (buttons, forms, cards, etc.)

- Application architecture (routing, state management, etc.)

Phase 2: Gather Svelte Documentation

1. Call `list-sections` tool to discover all available Svelte documentation sections

2. Analyze the returned sections, focusing on the `use_cases` field to identify relevance

3. Call `get-documentation` with ALL relevant section paths (pass multiple sections in one call)

4. Review the documentation to understand modern Svelte 5 patterns and runes

Phase 3: Locate Flowbite Components

1. Call `findComponent` tool with the component name or category you need

- Examples: 'Button', 'CardPlaceholder', 'form checkbox'

2. If exploring available options, use `getComponentList` to see all components

3. For specific feature searches, use `searchDocs` to find information across documentation

Phase 4: Fetch Component Documentation

1. Use `getComponentDoc` with the component path from `findComponent`

2. Review the documentation including:

- Usage examples

- Available props and their types

- Event handlers

- Best practices and patterns

Phase 5: Write Component Code

1. Combine Svelte 5 patterns with Flowbite-Svelte components

2. Prioritize modern Svelte 5 features:

- Use `$state()` for reactive variables

- Use `$derived()` for computed values

- Use `$effect()` for side effects

- Use snippet syntax for component composition

3. Follow Flowbite-Svelte component APIs exactly as documented

Phase 6: Validate Code Quality

1. Call `svelte-autofixer` tool with your written code

2. Review returned issues and suggestions

3. Fix all reported problems

4. Call `svelte-autofixer` again until it returns no issues or suggestions

5. Only deliver code to the user after passing validation

Phase 7: Offer Playground Link

1. After completing the code, ask the user: "Would you like a Svelte Playground link to test this code?"

2. If yes AND the code was NOT written to files in their project, call `playground-link` tool

3. Provide the generated playground URL to the user

Important Rules

Example Workflow

For a request to "Create a login form with email and password fields":

1. `list-sections` → Find form handling, reactivity, and event sections

2. `get-documentation` → Fetch all relevant Svelte sections at once

3. `findComponent` → Search for "form input" and "button"

4. `getComponentDoc` → Get docs for Input and Button components

5. Write the component using `$state()` for form data

6. `svelte-autofixer` → Validate code, fix issues

7. `svelte-autofixer` → Re-validate until clean

8. Ask about playground link (if not written to files)

Best Practices