CLAUDE.md — toolkit

Project

SvelteKit 2 + Svelte 5 developer toolkit. All tools run client-side — no server-side logic.

Language

JavaScript only (lang="js" in Svelte files). No TypeScript. Use JSDoc for type annotations.

<script lang="js">
  /** @type {string} */
  let value = $state('');

Svelte 5 runes

Use $state, $derived, $derived.by, $effect, $props. No Svelte 4 syntax ($:, export let, <slot>).

Style conventions

Arrow functions for single-expression bodies
Regular functions for multi-line logic
Imports at top of <script>
No function declarations after state/derived blocks

Shared libraries

$lib/clipboard.js — copy(text) — wraps navigator.clipboard.writeText
$lib/md5.js — md5(input: string | Uint8Array): string — no-dep MD5

Routing

File-based under src/routes/. Each tool is a directory with +page.svelte.

Route	Tool
`/`	About — project description + tools index
`/object-id`	MongoDB ObjectId generator & parser
`/uuid`	UUID v1/v3/v4/v5/v6/v7 generator & parser
`/hash`	MD5, SHA-1, SHA-256, SHA-512
`/cron`	Crontab expression builder
`/api-key`	High-entropy API key generator
`/json`	JSON prettify / compact / validate
`/base`	Base64 / Base64url / Base32 / Base58 / Base16 encode & decode
`/string`	String transforms: lower, UPPER, snake_case, camelCase, PascalCase, kebab, reverse, trim

Adding a new tool requires updating three files:

src/routes/+layout.svelte — add entry to links array
src/routes/+page.svelte — add entry to tools array
CLAUDE.md — add route to the routing table

Theming

Colors are defined as CSS custom properties in src/routes/layout.css.

Default theme: Gruvbox Light Hard
Dark theme: Gruvbox Dark Hard — activated via [data-theme="dark"] on <html>
Theme toggle button lives in src/routes/Header.svelte; persists to localStorage
Theme is applied before first render via an inline <script> in src/app.html (no FOUC)

Key CSS variables: --bg, --bg-panel, --bg-raised, --bg-raised-hover, --fg, --fg-dim, --fg-faint, --border, --border-faint, --active-bg, --active-fg, --link, --link-vis, --link-hover, --err, --err-bg, --err-border, --green, --blue, --red, --bar-bg, --bar-fg, --bar-dim.

Never hardcode colors. Always use CSS variables.

Panel UI pattern

Panels (textarea/output areas) use a consistent structure and class names:

<div class="panel">
  <div class="panel-header">
    <span>Label</span>
    <div class="panel-actions">
      <button>clear</button>
      <button>copy</button>
    </div>
  </div>
  <textarea ...></textarea>
</div>

CSS for .panel-header: background: var(--bg-raised), border: 1px solid var(--border), border-bottom: none, padding: 2px 6px, font-size: 0.85em, font-weight: bold.

Active/selected state

Buttons and nav tiles use: background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg).

CSS

Global styles: src/routes/layout.css — variables, body, a, button, input, select, textarea, table, h1, h2, hr, code
Component styles: scoped <style> blocks inside each .svelte file
Aesthetic: suckless/early-2000s — Arial, 1px solid borders, no gradients/shadows/border-radius

Crypto

All randomness via crypto.getRandomValues(). Hash via crypto.subtle.digest(). No external crypto libs except the custom MD5 (needed for UUID v3 and hash page).

No external runtime dependencies

package.json has only build-time devDependencies. Keep it that way.

4.3 KiB Raw Permalink Blame History