New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Code Reuse

by spinspire in spinspire/pocketbase-sveltekit-starter

A skill your agent uses when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos.

MITAuto-check: notesFrontend & Design

Install Code Reuse

skills CLI
$ npx skills add spinspire/pocketbase-sveltekit-starter --skill code-reuse -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spinspire/pocketbase-sveltekit-starter code-reuse --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spinspire/pocketbase-sveltekit-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/code-reuse .claude/skills/code-reuse && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
code-reuse
GitHub stars
511
Token cost
~2.5k tokens
SKILL.md length
951 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos.

  • Works in 3 steps: pocketbase-sveltekit-starter — frontend… → pocketbase-sveltekit-starter — PB JS… → spinspire/recipes — frontend + templates
  • Building a UI component
  • SKILL.md covers Sources, 1.…, 2.… and 3. spinspire/recipes —…, plus 2 more sections
  • Calls bun

What it does

Code Reuse is an agent skill from spinspire/pocketbase-sveltekit-starter. Use when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos. Check here BEFORE writing UI components, PB hooks/routes, form controls, dialogs, auth flows, pagination, or realtime stores from scratch. Catalogs reusable code from pocketbase-sveltekit-starter (sk/src/lib + pb/pbhooks) and spinspire/recipes. Components are proven but may need adaptation to the current project (runes, oat-css, $app/state).

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Authentication. It works with SvelteKit and Svelte. The repository describes itself as: a starter project to build a SvelteKit frontend with PocketBase backend. The licence is MIT.

When your agent uses it

  • Building a UI component
  • PocketBase hook
  • App feature and there is proven code to copy from the reference repos

Example prompts

  • “/code-reuse”

Requirements

  • Docker
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, Bash

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. pocketbase-sveltekit-starter — frontend lib (sk/src/lib)
  2. pocketbase-sveltekit-starter — PB JS hooks (pb/pb_hooks)
  3. spinspire/recipes — frontend + templates

What it can do on your machine

Read from SKILL.md and the folder at commit 66f6dee. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Code Reuse loads about 2.5k tokens when it runs. Until then it costs about 122 tokens; SKILL.md has 951 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~122
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Glob, Grep, Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spinspire/pocketbase-sveltekit-starter at commit 66f6dee, republished under its MIT licence (© spinspire). 951 words, ~2,544 tokens.

Download SKILL.mdSave it as .claude/skills/code-reuse/SKILL.md (or your agent's skills folder).
name
code-reuse
description
Use when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos. Check here BEFORE writing UI components, PB hooks/routes, form controls, dialogs, auth flows, pagination, or realtime stores from scratch. Catalogs reusable code from pocketbase-sveltekit-starter (sk/src/lib + pb/pb_hooks) and spinspire/recipes. Components are proven but may need adaptation to the current project (runes, oat-css, $app/state).
allowed-tools
Read, Glob, Grep, Bash
authors
Jitesh Doshi

Code Reuse

Proven, copy-ready code catalog from reference repos. Reuse before building from scratch.

Sources

RepoWhat to copyWhere it lives
pocketbase-sveltekit-starterFrontend lib + components + PB JS hookssk/src/lib, pb/pb_hooks
spinspire/recipesFrontend lib + components playground + multi-stack templatessk/, pb/, py/, rs/

⚠️ Adapt, don't paste. These use SCSS + box-icons + $app/stores + some legacy export let. Convert: $app/stores → $app/state, SCSS → oat-css/app.css tokens, export let → runes ($props/$state/$derived). They are proven patterns, not drop-in code.

1. pocketbase-sveltekit-starter — frontend lib (sk/src/lib)

Core PB client (pocketbase/index.ts)
  • client — typed PocketBase instance (same-origin by default).
  • authModel — readable store on client.authStore.onChange; calls invalidateAll() on auth flips.
  • login(email, password, register?, rest?) — create-if-register then authWithPassword.
  • logout() — authStore.clear().
  • save<T>(collection, record, create?) — generic create/update; auto-converts to FormData when a value is File/FileList (via object2formdata). Use for file uploads.
  • watch<T>(idOrName, queryParams?, page?, perPage?, realtime?) → PageStore<T> — realtime paginated list store: subscribes to subscribe("*"), maintains result.items (update=replace, create=append, delete=filter). PageStore adds setPage()/next()/prev(); unsubscribe tears down realtime. Good upgrade candidate for our host pool/queue lists.
  • providerLogin(provider, authCollection) — OAuth2 login that backfills name/avatar from meta.
  • webauthnRegister/Login — passkey flow via @simplewebauthn/browser + /api/webauthn/* routes.
pocketbase/ui.ts
  • alertOnFailure(request) — wraps a PB request; surfaces top-level message + per-field data errors via alerts.error().
pocketbase/ components
ComponentPurpose
FileField.svelteFile-field rows with bindable toBeRemoved toggle-delete; links via client.files.getURL.
Image.sveltePB file image with { thumb } param + fallback (internal SVG or via.placeholder.com).
ImgModal.svelteThumb → full-size image lightbox in a Dialog.
Paginator.svelte« page X of Y » pager bound to a PageStore.
components/ — UI building blocks
ComponentPurpose
Alerts.svelteGlobal toasts. Exports alerts object (info/success/warning/error, timeout, html); auto-catches unhandled promise rejections. Place once in layout.
Dialog.svelteNative <dialog> modal; trigger snippet gets show; closes on backdrop click.
Link2Modal.svelteInternal link → modal via preloadData+pushState+<dialog>; invalidateAll+history.back() on close.
LoginGuard.svelteConditional render on auth (and admin via isSuperuser); otherwise snippet + optional redirect.
LoginForm.svelteSign-in/up tabs, admin checkbox, passkey, OAuth buttons from listAuthMethods().
LoginBadge.svelteAuth pill (avatar+name) → Dialog with passkey register / sign out, or sign-in.
Nav.svelteTop nav with active highlighting.
Delete.svelteConfirm-and-delete form; navigates after collection.delete(id).
FileInput.svelteStyled file input with paste capture + filename list snippet.
DateShow.svelteCircular date badge (DOW / mon+day / year).
LocalStorageStore.svelteModule ls store mirroring localStorage (JSON-parsed) + debug table.
RadioText.sveltePill radio selector; object or string-array choices; hides inputs, :has() styling.
Spinner.svelteCSS spinner; also exports activityStore(f) (store with .run()).
Stepper.svelteStep indicator; children snippet gets {data, index, total, step, next, previous}.
TabGroup/Tab/TabContent.svelteTabs via context active store.
ToggleText.sveltePure-CSS two-label toggle.
metadata.ts
  • writable({ title, headline, description }) global metadata store.

2. pocketbase-sveltekit-starter — PB JS hooks (pb/pb_hooks)

main.pb.js patterns
  • routerAdd(method, path, handler, $apis.requireAuth()) — custom routes. /api/hello (auth greeting), /api/sendmail ($app.newMailClient() + record.ignoreEmailVisibility(true)), /api/config (public, merges config.json via require(${__hooks}/util) + live settings), /api/generate (external HTTP + $filesystem.fileFromURL + RecordUpsertForm).
  • onModelCreate/onModelUpdate(e, "collection") — model hooks scoped to a collection.
util.js helpers (load via require(${__hooks}/util))
  • parseJSON(bytes) / parseJSONFile(path) — decode PB byte-array JSON from $os.readFile.
  • slugDefault(obj) — set slug to id when empty.
  • doAudit(event, request) — writes an auditlog record for collections in AUDITLOG env var; records collection/record/event/user/admin + data and original (changed keys only, via record.original().publicExport() diff).
auditlog.pb.js
  • onRecordCreateRequest/UpdateRequest/DeleteRequest → e.next() then doAudit(...). Pattern: let the operation run first, then audit.
config.json
  • Static site config merged into /api/config.

3. spinspire/recipes — frontend + templates

sk/src/lib
  • pocketbase/index.ts (151 lines) — trimmed variant of the starter's: client, authModel, save+object2formdata, watch, logout. No webauthn. Uses $app/paths base.
  • pocketbase/*.svelte — Paginator, LoginGuard, LoginForm, LoginBadge, ImgModal (simpler variants of the starter's).
  • components/*.svelte — Alerts, DateShow, Dialog, FileInput, Nav, Spinner (subset of the starter's; same patterns).
Show full SKILL.md (400 more words)Show less
Component playground (sk/src/routes/components/)

A dev-only route that renders any src/lib/components/*.svelte in isolation with a live exports editor:

  • +layout.svelte — lists all components via import.meta.glob("/src/lib/components/**/*.svelte"), links each to /components/{path}.
  • [...path]/+page.svelte — dynamically import()s the component and renders it inside ExportEditor.
  • ExportEditor.svelte — reads component.$$.props, renders an Inputs control per prop, binds values into a bindings object.
  • Inputs.svelte — input control (text/number/date via INPUT_TYPES in config.ts) with processor hooks.
  • config.ts — remotePath writable (VSCode remote link), HTMLInputTypes type, INPUT_TYPES map.
  • Remote.svelte — form to configure the "Open in VSCode" path.

Use case: to quickly develop/test a component in isolation with interactive props. Pull the components/ route folder into any SvelteKit project.

pb/ — PocketBase/Go template
  • main.go — custom PB binary: --publicDir flag, SPA static serving, jsvm.MustRegisterMigrations, migratecmd (JS templates), hooks.Register(app).
  • hooks/hooks.go — Go audit-log + event-driven actions: reads a hooks collection (collection/event/disabled) and executes command/post actions against the record (JSON piped to stdin). Useful pattern for generic record-triggered automation.
  • entrypoint.sh — build-if-needed (go build, tygo, modd) then exec "$@".
  • tygo.yaml — Go→TypeScript type generation config.
  • pb_migrations/*.js — JS collection-snapshot migrations.
py/ (FastAPI) & rs/ (Axum)
  • py/web.py — minimal FastAPI with configurable prefix (FASTAPI_PREFIX, default /apy).
  • rs/ — Axum REST with SQLite (db.rs), file upload (upload.rs), experimental live-view (live.rs, livecrud.rs), static SPA serving.
  • Only borrow these if we add a non-PB backend; otherwise skip.
docker-compose.yml + entrypoint.sh
  • Multi-service template (pb, py, rs, sk, mb) — non-root ${UID}:${GID}, expose not ports, entrypoint initializes (builds) then runs the container command. Pattern matches our own docker setup.
.opencode/tools/sql.ts
  • A bun-based SQL tool for opencode (uses bun:sqlite/@opencode-ai/plugin); READONLY for safety. Only relevant if we adopt opencode tooling.

When to use which source

  • UI components, dialogs, forms, toasts, tabs, pagination, realtime list stores, auth UI → starter's sk/src/lib (richer; the recipes versions are trimmed copies).
  • Component playground / dev preview tool → recipes components/ route.
  • PB custom routes, model hooks, audit logging, config merging → starter's pb/pb_hooks.
  • Record-triggered automation (command/post actions), custom PB Go build, FastAPI/Axum backends, multi-service compose → recipes pb/, py/, rs/, docker-compose.yml.
  • Generic file upload create/update → save()/object2formdata (both repos).

Adaptation checklist (apply to every copy)

  1. $app/stores → $app/state (page object, not store).
  2. SCSS <style> → oat-css classes + tokens in src/app.css (--brand, --glow, --muted-text; NOT --accent/--muted which oat reserves).
  3. box-icons <i class="bx bx-*"> → inline SVG or text.
  4. Legacy export let/$: → runes ($props, $state, $derived, snippets {@render}).
  5. Rename $derived var state → live (svelte2tsx crash).
  6. client/pb import path → $lib/pb (our app).
  7. Collection names/fields → ours (events, entries, users).
  8. Typecheck (bun run check) + tests (bun test) after adapting.

© spinspire, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/code-reuse of spinspire/pocketbase-sveltekit-starter.

Open the folder on GitHubat commit 66f6dee

Compare with similar skills

Code Reuse next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Code Reuse compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Code Reuse this skillspinspire/pocketbase-sveltekit-starter511—~2.5kAutomated safety check: NotesMIT
Worklog Designregisx001/Worklog258—~3.3kAutomated safety check: PassMIT
Weft FrontendWeaveMindAI/weft2k—~8kAutomated safety check: NotesCustom licence
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k4 repos~2.6kAutomated safety check: PassMIT
Svelte Core Best Practicesrilldata/rill2.9k4 repos~1.8kAutomated safety check: PassApache-2.0
Svelte Code Writerkampsy/ui2872 repos~490Automated safety check: PassMIT

Similar skills

  • Worklog Design

    regisx001/Worklog

    Design and UI skill for the Worklog desktop project manager.

    258 GitHub stars~3.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Weft Frontend

    WeaveMindAI/weft

    Read when the user wants a page, app or site for the program, and before dispatching the frontend-builder: the verified scaffold commands, the default stack (pnpm, SvelteKit, PostgreSQL, BetterAuth…

    2k GitHub stars~8k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 4 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Svelte Core Best Practices

    rilldata/rill

    Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.

    2.9k GitHub starsUsed in 4 repos~1.8k tokens
    Frontend & DesignAuto-check passed

  • Svelte Code Writer

    kampsy/ui

    CLI tools for Svelte 5 documentation lookup and code analysis.

    287 GitHub starsUsed in 2 repos~490 tokens
    Frontend & DesignAuto-check passed

  • Kampsy UI

    kampsy/ui

    Consumer guide to build UIs with kampsy-ui (Svelte 5 + Tailwind v4, Geist-inspired).

    287 GitHub stars~3.6k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

More from spinspire/pocketbase-sveltekit-starter

All 8 skills in this repo

  • Bun Runtime

    spinspire/pocketbase-sveltekit-starter

    Bun as runtime, package manager, bundler, and test runner. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub starsUsed in 5 repos~653 tokens
    Auto-check: notes

  • Pb API

    spinspire/pocketbase-sveltekit-starter

    Operate PocketBase via its REST API. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub stars~562 tokensUpdated 1 mo ago
    Auto-check: notes

  • Pb Extend

    spinspire/pocketbase-sveltekit-starter

    Extend PocketBase with custom hooks and routes in JS or Go. An agent skill from spinspire/pocketbase-sveltekit-starter.

    511 GitHub stars~689 tokensUpdated 1 mo ago
    Auto-check: notes

  • Pwa

    spinspire/pocketbase-sveltekit-starter

    A skill your agent uses when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline.

    511 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Frontend Design

    spinspire/pocketbase-sveltekit-starter

    Create distinctive, production-grade frontend interfaces with high design quality and accessible markup.

    511 GitHub starsUsed in 1 repo~2.6k tokens
    Auto-check passed

  • Docker

    spinspire/pocketbase-sveltekit-starter

    Docker Compose conventions — short service names, no root, no host ports in base compose, override files for local customisations.

    511 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check: notes

Works with

Categories

Questions about Code Reuse

What does Code Reuse do?

A skill your agent uses when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos. Code Reuse is an agent skill from spinspire/pocketbase-sveltekit-starter. Use when building a UI component, PocketBase hook, page, or app feature and there is proven code to copy from the reference repos.

When should I use Code Reuse?

Code Reuse fits situations like: building a UI component; pocketBase hook; app feature and there is proven code to copy from the reference repos.

How do I install Code Reuse in Claude Code?

Run `npx skills add spinspire/pocketbase-sveltekit-starter --skill code-reuse -a claude-code`. Or copy the skill folder (.agents/skills/code-reuse in spinspire/pocketbase-sveltekit-starter) into .claude/skills/code-reuse in your project. Claude Code loads it when a task matches its description.

How do I install Code Reuse in Codex?

Run `npx skills add spinspire/pocketbase-sveltekit-starter --skill code-reuse -a codex`. Or copy the skill folder (.agents/skills/code-reuse in spinspire/pocketbase-sveltekit-starter) into .agents/skills/code-reuse in your project. Codex loads it when a task matches its description.

Can I use Code Reuse in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spinspire/pocketbase-sveltekit-starter --skill code-reuse -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-reuse, .gemini/skills/code-reuse, .github/skills/code-reuse and .opencode/skills/code-reuse in your project.

What does Code Reuse need to run?

Going by SKILL.md and its folder, Code Reuse needs the command-line tools its instructions call (bun). Our summary lists: Docker. Its frontmatter pre-approves these tools: Read, Glob, Grep, Bash.

Does Code Reuse access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Code Reuse safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Code Reuse use?

Code Reuse is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Code Reuse use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Code Reuse?

Skills that share tags, products or a category with Code Reuse: Worklog Design (regisx001/Worklog, 258 stars), Weft Frontend (WeaveMindAI/weft, 2k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Svelte Core Best Practices (rilldata/rill, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Code Reuse?

spinspire (a GitHub organization) maintains it in spinspire/pocketbase-sveltekit-starter, which has 511 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on August 22, 2026.

Source: spinspire/pocketbase-sveltekit-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.