メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
Svelte 5 runes guidance. Use for reactive state, props, effects, or Svelte 4→5 migration. Covers $state, $derived, $effect, $props, $bindable. Prevents mixing syntaxes and reactivity mistakes.
SvelteKit data flow guidance. Use for load functions, form actions, and server/client data. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error().
SvelteKit remote functions guidance. Use for command(), query(), form() patterns in .remote.ts files.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
TypeScript functional programming. Use for pure functions, immutability, composition. Favors ternaries, switch, map/filter/reduce over imperative code. Concise, declarative patterns.
| 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 provides LLM-optimized documentation at predictable URLs. Before writing or editing any component that uses Flowbite Svelte, fetch the relevant docs.
All docs follow: https://flowbite-svelte.com/llm/{category}/{component}.md
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
WebFetch("https://flowbite-svelte.com/llm/components/modal.md", "Return the full component API, props, and usage examples")pages/theme-provider.md and pages/colors.md for customizationpages/quickstart.mdflowbite-svelte: import { Button, Card, Modal } from 'flowbite-svelte'flowbite-svelte-icons: import { ArrowRightOutline } from 'flowbite-svelte-icons'$props(), $state, $derived)color, size, class conventions@custom-variant dark (&:where(.dark, .dark *)){#snippet name()}...{/snippet} pattern for slots (Svelte 5)