thisuxhq/sveltefix

thisuxhq 资料

最近记录的来源活动: 2026年3月9日 07:42

SkillsMP 收录数据更新: 2026年10月17日 00:09

已收集 skills: 1

GitHub 星标: 0
GitHub Forks: 0

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

# sveltefix Visual annotation toolbar for Svelte/SvelteKit — connects your browser to AI coding agents via MCP. Click any element in your running app, describe the issue, and Claude Code picks it up automatically. No copy-paste. No "the blue button in the sidebar." Built for SvelteKit + Svelte 5 (runes). Inspired by [agentation.dev](https://agentation.dev) which is React-only. --- ## packages | Package | Description | |---|---| | [`@thisux/sveltefix`](./packages/toolbar) | Svelte 5 toolbar component | | [`@thisux/sveltefix-mcp`](./packages/mcp) | Local MCP + HTTP server | --- ## quick start ### 1. install ```bash bun add -d @thisux/sveltefix bun add -d @thisux/sveltefix-mcp ``` ### 2. add the toolbar to your SvelteKit layout ```svelte  <script> import { Sveltefix } from '@thisux/sveltefix' import { dev } from '$app/environment' </script> <slot /> {#if dev} <Sveltefix /> {/if} ``` ### 3. start the MCP server ```bash npx @thisux/sveltefix-mcp server ``` ### 4. connect to Claude Code ```bash npx @thisux/sveltefix-mcp init ``` This prints the config snippet to add to `~/.claude/claude_code_config.json`. Restart Claude Code after. --- ## usage - **Shift+A** — toggle annotation mode - **Click any element** — open annotation panel - **Add comment + intent + severity** — hit "Send to Agent" - Claude Code picks it up automatically via `sveltefix_watch_annotations` ### hands-free mode Add this to your `CLAUDE.md`: ```md When I say "watch mode", call sveltefix_watch_annotations in a loop. For each annotation: acknowledge it, make the fix, then resolve it with a summary. Continue watching until I say stop. ``` Then just annotate in the browser and watch Claude Code work. --- ## component props ```svelte <Sveltefix mcpPort={4747}  sessionId="my-session"  showCopyFallback={true}  position="bottom-right"  /> ``` --- ## MCP tools Nine tools exposed to Claude Code: | Tool | Description | |---|---| | `sveltefix_list_sessions` | List all annotation sessions | | `sveltefix_get_session` | Get session + all annotations | | `sveltefix_get_pending` | Get pending annotations for session | | `sveltefix_get_all_pending` | Get all pending across all sessions | | `sveltefix_acknowledge` | Mark as seen | | `sveltefix_resolve` | Mark as fixed (with summary) | | `sveltefix_dismiss` | Dismiss with reason | | `sveltefix_reply` | Add reply to annotation thread | | `sveltefix_watch_annotations` | Block until new annotations appear | --- ## svelte-specific advantage In SvelteKit dev mode, Vite attaches component metadata to DOM nodes. `sveltefix` reads this and includes the actual `.svelte` file path in every annotation: ``` svelteComponents: "src/routes/+page.svelte > src/lib/HeroSection.svelte > src/lib/ui/Button.svelte" ``` Claude Code opens the file directly — no grep needed. --- ## license MIT

正在加载仓库 README…

这个仓库中的 skills

软件开发工程师

1 个职业分类 · 已分类 100%

skill

职业分类

描述

更新

publish

软件开发工程师

Build, bump versions, publish both packages to npm, commit and push

原文语言：英语

2026-03-09

已展示 1 / 1 个已收集 Skill。

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/thisuxhq/sveltefix.