Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add HK-hub/AgentSkills --skill frontend-sveltegit clone --depth 1 https://github.com/HK-hub/AgentSkillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hk-hub/agentskills/frontend-svelte)<a href="https://agentmods.dev/skills/hk-hub/agentskills/frontend-svelte"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/frontend-svelte/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hk-hub/agentskills/frontend-svelte"><img src="https://agentmods.dev/badge/skills/hk-hub/agentskills/frontend-svelte.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00072 | $0.03460 |
| Opus 5 | $0.00036 | $0.01730 |
| Sonnet 5 | $0.00014 | $0.00692 |
| Haiku 4.5 | $0.00007 | $0.00346 |
Grade A, and why
frontend-svelte scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
Copies of this mod
1 near-identical copy found in the catalogue:
- frontend-svelte — 100% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 480 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Development Skill
Comprehensive skill for modern frontend development with Svelte, SvelteKit, shadcn-svelte, and the Bun ecosystem.
Technology Stack
Core Framework: Svelte + SvelteKit
Svelte Fundamentals
- Reactive Framework: Compile-time framework that converts components into highly efficient imperative code
- True Reactivity: Automatic dependency tracking without virtual DOM
- Small Bundle Size: Minimal runtime overhead
- Built-in Animations: Transition and animation directives
- Scoped Styles: Component styles are scoped by default
SvelteKit Features
- Full-Stack Framework: Server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR)
- File-Based Routing: Routes defined by file system structure
- API Routes: Build API endpoints alongside frontend code
- Form Actions: Server-side form handling with progressive enhancement
- Hooks: Intercept and modify requests/responses
- Adapters: Deploy to any platform (Node, Vercel, Netlify, Cloudflare, etc.)
UI Component Library: shadcn-svelte
Overview
- Port of shadcn/ui for Svelte
- Accessible, customizable components built on Radix Svelte (Melt UI)
- Copy-paste component approach (not an npm package)
- Built with Tailwind CSS
- TypeScript support
Key Components
- Forms: Input, Textarea, Select, Checkbox, Radio, Switch
- Feedback: Alert, Toast (Sonner), Dialog, Alert Dialog
- Navigation: Button, Dropdown Menu, Tabs, Command Menu
- Layout: Card, Separator, Accordion, Collapsible
- Data Display: Table, Badge, Avatar, Skeleton
- Overlays: Popover, Tooltip, Sheet, Drawer
Installation & Usage
# Initialize shadcn-svelte
bunx shadcn-svelte@latest init
# Add components as needed
bunx shadcn-svelte@latest add button
bunx shadcn-svelte@latest add card
bunx shadcn-svelte@latest add form
Package Manager: Bun
Why Bun?
- Performance: 25x faster than npm, 4x faster than pnpm
- All-in-One: Runtime, bundler, test runner, package manager
- Drop-in Replacement: Compatible with npm/Node.js ecosystem
- Built-in Testing: Vitest-compatible test runner
- TypeScript Native: Native TypeScript support, no compilation needed
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 480 lines · 72 tokens per session scan A bdedc723d469
frontend-svelte is a skill published in the GitHub repository HK-hub/AgentSkills (6 stars, last pushed 23d ago), licensed MIT. It adds 72 tokens to every session and 3,460 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
sveltekit-remote-functions
Implement SvelteKit remote functions. Use for query(), query.live(), form(), command(), and prerender() patterns in .remote.ts files.
svelte-template-directives
Svelte template directive guidance. Use when working with snippets, attachments, dynamic HTML, declaration tags, debugging tags, or global DOM events.
svelte-core-bestpractices
Svelte 5 core best practices. Use when creating, editing, or reviewing .svelte, .svelte.ts, or .svelte.js files. Routes to deeper Svelte skills.
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
svelte-runes
Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable.
sveltekit-data-flow
SvelteKit data flow guidance. Use when working with load functions, form actions, server/client boundaries, serialization, or invalidation.