AgentSkillsCN

flowbite-svelte

查找 Flowbite Svelte 组件的文档。每当您创建或编辑使用 Flowbite Svelte 的 UI 组件时，务必使用此技能。在编写任何 Flowbite 组件代码之前，先获取组件文档。

SKILL.md
--- frontmatter
name: flowbite-svelte
description: Flowbite Svelte component documentation lookup. MUST be used whenever creating or editing UI components that use Flowbite Svelte. Fetch component docs before writing any Flowbite component code.

Flowbite Svelte Documentation

How to Use

Flowbite Svelte provides LLM-optimized documentation at predictable URLs. Before writing or editing any component that uses Flowbite Svelte, fetch the relevant docs.

URL Pattern

All docs follow: https://flowbite-svelte.com/llm/{category}/{component}.md

Available Components

Components (components/): accordion, alert, avatar, badge, banner, bottom-navigation, breadcrumb, button-group, buttons, card, carousel, clipboard, darkmode, datepicker, device-mockups, drawer, dropdown, footer, forms, gallery, indicators, kbd, list-group, mega-menu, modal, navbar, pagination, popover, progress, rating, sidebar, skeleton, speed-dial, spinner, stepper, table, tabs, timeline, toast, tooltip, typography, video

Forms (forms/): checkbox, file-input, floating-label, input-field, number-input, phone-input, radio, range, search-input, select, textarea, timepicker, toggle

Extended (extended/): button-toggle, clipboard-manager, command-palette, kanban-board, progress-radial, scroll-spy, split-pane, step-indicator, tags, tour, virtual-list, virtual-masonry

Plugins (plugins/): charts, datatables, wysiwyg

Pages (pages/): colors, customization, quickstart, theme-provider, typescript

Typography (typography/): blockquote, heading, hr, image, link, list, paragraph, text

Utilities (utilities/): close-button, label, toolbar

Workflow

  1. •Before writing a Flowbite component: Fetch the relevant doc page using WebFetch
    • •Example: WebFetch("https://flowbite-svelte.com/llm/components/modal.md", "Return the full component API, props, and usage examples")
  2. •Multiple components: Fetch docs for each component you plan to use
  3. •Theming: Fetch pages/theme-provider.md and pages/colors.md for customization
  4. •Setup questions: Fetch pages/quickstart.md

Key Facts (no lookup needed)

  • •Import from flowbite-svelte: import { Button, Card, Modal } from 'flowbite-svelte'
  • •Import icons from flowbite-svelte-icons: import { ArrowRightOutline } from 'flowbite-svelte-icons'
  • •Uses Svelte 5 runes ($props(), $state, $derived)
  • •Requires Tailwind CSS 4
  • •Props use color, size, class conventions
  • •Dark mode via class strategy: @custom-variant dark (&:where(.dark, .dark *))
  • •Snippets use {#snippet name()}...{/snippet} pattern for slots (Svelte 5)