本文へ移動
cccskills
無料GitHub で公開

svelte-code-writer

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Svelte 5 Code Writer

CLI Tools

You have access to @sveltejs/mcp CLI for Svelte-specific assistance. Use these commands via npx:

List Documentation Sections

npx @sveltejs/mcp list-sections

Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.

Get Documentation

npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.

Example:

npx @sveltejs/mcp get-documentation "$state,$derived,$effect"

Svelte Autofixer

npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]

Analyzes Svelte code and suggests fixes for common issues.

Options:

  • --async - Enable async Svelte mode (default: false)
  • --svelte-version - Target version: 4 or 5 (default: 5)

Examples:

# Analyze inline code (escape $ as \$)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'

# Analyze a file
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte

# Target Svelte 4
npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4

Important: When passing code with runes ($state, $derived, etc.) via the terminal, escape the $ character as \$ to prevent shell variable substitution.

Workflow

  1. Uncertain about syntax? Run list-sections then get-documentation for relevant topics
  2. Reviewing/debugging? Run svelte-autofixer on the code to detect issues
  3. Always validate - Run svelte-autofixer before finalizing any Svelte component

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Bun

無料

Use when building, running, testing, or bundling JavaScript/TypeScript applications. Reach for Bun when you need to execute scripts, manage packages, run tests, or bundle code for production. Bun is a drop-in replacement for Node.js with integrated package manager, test runner, and bundler.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

human-kit のスキルをすべて見る

このスキルの問題を報告する