j13z-svelte-essentials

A collection of code snippets, patterns, agent instructions, and workflows I use to bootstrap Svelte / SvelteKit projects (work in progress).

Highlights

🧠 Agent Skills

Three pre-built agent skills are available in agent-skills/dist/:

• svelte-authoring: Implementation-focused Svelte skill

  • A strong frontend engineer who gets the job done cleanly, follows the rules, and aims for maintainable code without constantly re-litigating the architecture.

• svelte-review: Architecture- and diagnosis-focused Svelte skill

  • A skeptical, experienced engineer who challenges the status quo, takes positions, and pushes for structural changes or rewrites when the current solution is no longer a good foundation.
  • Can also be used to author code, best combined with stronger prompting such as: “make sure this contributes to long-term code quality goals.”

• shadcn-svelte: Understands concepts of shadcn-svelte

  • Knows the docs (progressive disclosure)
  • Complements svelte-authoring (both desirable for one task)

The outcome still depends heavily on the prompt, especially for svelte-review or svelte-authoring when deeper refactoring or rewrite pressure is needed.

The agents-tools directory contains a build script to build these agent skills based on the documents maintained in this repository.

🛠️ Component Blueprints / Templates

Inspired by Bits UI and shadcn-svelte, templates/ui-components/:

• Primitive.svelte: low-level composable primitive
• Composite.svelte: composed higher-level component
• HeadlessPrimitive.svelte: unstyled / headless primitive for advanced use cases

📚 Catalog

A catalog of patterns, implementation rules, and review criteria for writing clean, maintainable Svelte 5 / SvelteKit code.

Purpose: Primarily used as source material for agent skills and instructions, with the goal of steering code generation toward code that is not only functional, but also more maintainable in the long run, introduces less tech debt, and requires less human cleanup.

Written to remain directly useful for humans as well.

The catalog is neither written entirely by hand nor generated by AI alone:

• Process: Human input and judgment → AI-assisted drafting and iteration → human review and refinement → test in agent workflows → update policy / steering to improve the observed behavior / “mistakes” → repeat.

Contents – ./docs/catalog:

• svelte-review-rubric.md: review criteria for checking AI-generated or human-written code
  • A rubric is a compact checklist for judging whether code meets the intended quality bar.
• patterns-and-anti-patterns.md: main patterns and anti-patterns reference
• svelte-implementation-rules.md: concise rules for writing code

🤖 Agent Instructions

Goal: Teach agents how to write well-structured, maintainable Svelte 5 code

• shadcn-svelte component index for LLMs: Can be offered in an agent skill (progressive disclosure) like a llms.txt

• UI Components.md: guidance for writing composable and well-structured Svelte 5 UI components

Resources and Links

• vscode-class-name-helper: VS Code extension for efficient cn() refactoring