# Sveltefromllmstxt

> Imperative component API

- Skill: `hk-vk/sveltefromllmstxt` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hk-vk/sveltefromllmstxt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/sveltefromllmstxt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hk-vk (https://skillmd.com/u/hk-vk)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/hk-vk/sveltefromllmstxt

---


# Imperative component API

> [!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).

[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).

## Available Resources

### Alternatives to SvelteKit

### Editor tooling

### Getting help

### `<script>`

### `<script module>`

### `<style>`

### `$state.raw`

### `$state.snapshot`

### `$state.eager`

### Passing state into functions

### Passing state across modules

### `$derived.by`

### Understanding dependencies

### Overriding derived values

### Deriveds and reactivity

### Destructuring

### Update propagation

### `$effect.pre`

### `$effect.tracking`

### `$effect.pending`

### `$effect.root`

### When not to use `$effect`

### Fallback values

### Renaming props

### Rest props

### Updating props

### Type safety

### `$props.id()`

### $inspect(...).with

### $inspect.trace(...)

### Tags

### Element attributes

### Component props

### Spread attributes

### Events

### Text expressions

### Comments

### Keyed each blocks

### Each blocks without an item

### Else blocks

### Snippet scope

### Passing snippets to components

### Typing snippets

### Exporting snippets

### Programmatic snippets

### Snippets and slots

### Styling

### Attachment factories

### Inline attachments

### Conditional attachments

### Passing attachments to components

### Controlling when attachments re-run

### Creating attachments programmatically

### Converting actions to attachments

### Function bindings

### `<input bind:value>`

### `<input bind:checked>`

### `<input bind:indeterminate>`

### `<input bind:group>`

### `<input bind:files>`

### `<select bind:value>`

### `<audio>`

- **`currentTime`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

- **`playbackRate`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

- **`paused`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused

- **`volume`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

- **`muted`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

- **`duration`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration

- **`buffered`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered

- **`seekable`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable

- **`seeking`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event

- **`ended`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended

- **`readyState`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

- **`played`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played

### `<video>`

### `<img>`

- **`naturalWidth`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth

- **`naturalHeight`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

### `<details bind:open>`

### `window` and `document`

### Contenteditable bindings

- **`innerHTML`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

- **`innerText`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

- **`textContent`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

### Dimensions

- **`clientWidth`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

- **`clientHeight`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

- **`offsetWidth`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

- **`offsetHeight`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

- **`contentRect`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect

- **`contentBoxSize`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize

- **`borderBoxSize`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize

- **`devicePixelContentBoxSize`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

### bind:this

### bind:_property_ for components

### Typing

### Local vs global

### Built-in transitions

### Transition parameters

### Accessibility

### Custom transition functions

### Transition events

### Animation Parameters

### Custom animation functions

### Attributes

### The `class:` directive

### Synchronized updates

### Concurrency

### Indicating loading states

### Error handling

### Server-side rendering

### Forking

### Caveats

### Breaking changes

### Specificity

### Scoped keyframes

### :global(...)

### :global

- **`await`**
  - URL: await-expressions

### Properties

### Using `transformError`

- **Legacy APIs**
  - URL: legacy-overview

- **options**
  - URL: custom-elements#Component-options

### When to use stores

### svelte/store

### Store contract

### `setContext` and `getContext`

### Using context with state

### Mounting components with context

### Replacing global state

### `onMount`

### `onDestroy`

### `tick`

### Deprecated: `beforeUpdate` / `afterUpdate`

### `mount`

### `unmount`

### `render`

### `hydrate`

### Serialization

### CSP

### `$state`

### `$derived`

### `$effect`

- **`{@attach ...}`**
  - URL: @attach

- **function binding**
  - URL: bind#Function-bindings

- **`$inspect`**
  - URL: $inspect

- **`createSubscriber`**
  - URL: svelte-reactivity#createSubscriber

### `$props`

### `$inspect.trace`

### Events

### Snippets

### Each blocks

### Using JavaScript variables in CSS

### Styling child components

### Context

### Async Svelte

### Avoid legacy features

### Unit and component tests with Vitest

### Component tests with Storybook

### End-to-end tests with Playwright

### `<script lang="ts">`

### Preprocessor setup

### tsconfig.json settings

- **`target`**
  - URL: https://www.typescriptlang.org/tsconfig/#target

- **`verbatimModuleSyntax`**
  - URL: https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax

- **`isolatedModules`**
  - URL: https://www.typescriptlang.org/tsconfig/#isolatedModules

### Typing `$props`

### Generic `$props`

### Typing wrapper components

### Typing `$state`

### The `Component` type

### Enhancing built-in DOM types

### Component lifecycle

### Component options

- **`ShadowRootInit`**: You can pass a settings object that will be passed to `attachShadow()` when shadow root is created.
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options

- **ElementInternals**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples

### Caveats and limitations

### Exceptions

### Minimum version requirements

- **#8566**
  - URL: https://github.com/sveltejs/svelte/issues/8566

- **sveltejs/kit#10172**
  - URL: https://github.com/sveltejs/kit/pull/10172

- **#8516**
  - URL: https://github.com/sveltejs/svelte/issues/8516

- **#8515**
  - URL: https://github.com/sveltejs/svelte/issues/8515

- **198dbcf**
  - URL: https://github.com/sveltejs/svelte/commit/198dbcf

- **#8488**
  - URL: https://github.com/sveltejs/svelte/issues/8488

### Browser conditions for bundlers

- **`rollup-plugin-svelte`**
  - URL: https://github.com/sveltejs/rollup-plugin-svelte/#usage

- **`svelte-loader`**
  - URL: https://github.com/sveltejs/svelte-loader#usage

### Removal of CJS related output

### Stricter types for Svelte functions

- **#7224**
  - URL: https://github.com/sveltejs/svelte/issues/7224

- **#7442**
  - URL: https://github.com/sveltejs/svelte/pull/7442

- **#8136**
  - URL: https://github.com/sveltejs/svelte/issues/8136

### Custom Elements with Svelte

### SvelteComponentTyped is deprecated

### Transitions are local by default

### Default slot bindings

### Preprocessors

### New eslint package

### Other breaking changes

- **#8628**
  - URL: https://github.com/sveltejs/svelte/pull/8628

- **polyfill**
  - URL: https://github.com/eligrey/classList.js

- **polyfill**
  - URL: https://github.com/theftprevention/event-constructor-polyfill/tree/master

- **#6750**
  - URL: https://github.com/sveltejs/svelte/issues/6750

- **#7947**
  - URL: https://github.com/sveltejs/svelte/issues/7947

- **#8763**
  - URL: https://github.com/sveltejs/svelte/pull/8763

- **here**
  - URL: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings

### Reactivity syntax changes

### Event changes

### Snippets instead of slots

### Migration script

### Components are no longer classes

### `<svelte:component>` is no longer necessary

### Whitespace handling changed

### Modern browser required

- **`Proxies`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

- **`ResizeObserver`**
  - URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

### Changes to compiler options

### The `children` prop is reserved

### Breaking changes in runes mode

### Other breaking changes

### I'm new to Svelte. Where should I start?

### Where can I get support?

### Are there any third-party resources?

### How can I get VS Code to syntax-highlight my .svelte files?

### Is there a tool to automatically format my .svelte files?

### How do I document my components?

### Does Svelte scale?

### Is there a UI component library?

### How do I test Svelte apps?

- **Svelte docs on testing**
  - URL: /docs/svelte/testing

- **Setup Vitest using the Svelte CLI**
  - URL: /docs/cli/vitest

- **Svelte Testing Library**
  - URL: https://testing-library.com/docs/svelte-testing-library/example/

- **Svelte Component Testing in Cypress**
  - URL: https://docs.cypress.io/guides/component-testing/svelte/overview

- **Example using uvu test runner with JSDOM**
  - URL: https://github.com/lukeed/uvu/tree/master/examples/svelte

- **Test Svelte components using Vitest & Playwright**
  - URL: https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright

- **Component testing with WebdriverIO**
  - URL: https://webdriver.io/docs/component-testing/svelte

### Is there a router?

### How do I write a mobile app with Svelte?

### Can I tell Svelte not to remove my unused styles?

### Is Svelte v2 still available?

### How do I do hot module reloading?

### SvelteComponent

- **migration guide**
  - URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

- **migration guide**
  - URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

- **migration guide**
  - URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

- **migration guide**
  - URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

### SvelteComponentTyped

### afterUpdate

### beforeUpdate

### createContext

### createEventDispatcher

### createRawSnippet

### flushSync

### fork

### getAbortSignal

### getAllContexts

### getContext

### hasContext

### hydratable

### hydrate

### mount

### onDestroy

### onMount

### setContext

### settled

### tick

### unmount

### untrack

### Component

### ComponentConstructorOptions

### ComponentEvents

### ComponentInternals

### ComponentProps

### ComponentType

### EventDispatcher

### Fork

### MountOptions

### Snippet

### Action

### ActionReturn

### flip

### AnimationConfig

### FlipParams

### createAttachmentKey

### fromAction

### Attachment

### VERSION

### compile

### compileModule

### migrate

### parse

### parseCss

### preprocess

### print

### walk

### AST

### CompileError

### CompileOptions

- **Content Security Policy**
  - URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP

### CompileResult

### MarkupPreprocessor

### ModuleCompileOptions

### Preprocessor

### PreprocessorGroup

### Processed

### Warning

### backIn

### backInOut

### backOut

### bounceIn

### bounceInOut

### bounceOut

### circIn

### circInOut

### circOut

### cubicIn

### cubicInOut

### cubicOut

### elasticIn

### elasticInOut

### elasticOut

### expoIn

### expoInOut

### expoOut

### linear

### quadIn

### quadInOut

### quadOut

### quartIn

### quartInOut

### quartOut

### quintIn

### quintInOut

### quintOut

### sineIn

### sineInOut

### sineOut

### on

### asClassComponent

### createBubbler

### createClassComponent

### handlers

### nonpassive

### once

### passive

### preventDefault

### run

### self

### stopImmediatePropagation

### stopPropagation

### trusted

### LegacyComponentType

### Spring

### Tween

### prefersReducedMotion

### spring

### tweened

### Spring

### SpringOptions

### SpringUpdateOptions

### TweenOptions

### Tweened

### Updater

### devicePixelRatio

### innerHeight

### innerWidth

### online

### outerHeight

### outerWidth

### screenLeft

### screenTop

### scrollX

### scrollY

### MediaQuery

### SvelteDate

### SvelteMap

### SvelteSet

### SvelteURL

### SvelteURLSearchParams

### createSubscriber

### render

### Csp

### RenderOutput

### Sha256Source

### SyncRenderOutput

### derived

### fromStore

### get

### readable

### readonly

### toStore

### writable

### Readable

### StartStopNotifier

### Subscriber

### Unsubscriber

### Updater

### Writable

### blur

### crossfade

### draw

### fade

### fly

### scale

### slide

### BlurParams

### CrossfadeParams

### DrawParams

### EasingFunction

### FadeParams

### FlyParams

### ScaleParams

### SlideParams

### TransitionConfig

- **fragment-defining tag**
  - URL: https://github.com/sveltejs/svelte/issues/4697

### Client errors

### Server errors

### Shared errors

### Client warnings

### Shared warnings

### Understanding dependencies

### Browser-only code

### Component exports

### Renaming props

### Component events

### Named slots

### Fallback content

### Passing data to slotted content

### Creating a component

### `$set`

### `$on`

### `$destroy`

### Component props

### Server-side component API

## Additional Resources (Optional)

### Optional snippets

## How to Use This Skill

Reference these resources when working with Imperative component API.