Markdown Converter
Agent skill for markdown-converter
> SvelteKit starter template with full fuz stack integration
Sign in to like and favorite skills
SvelteKit starter template with full fuz stack integration
fuz_template (
@fuzdev/fuz_template) is a production-ready starter template for
building static web applications with the fuz stack. Clone it to start new
projects with TypeScript, Svelte 5, SvelteKit, and the complete fuz ecosystem
pre-configured.
For coding conventions, see
.fuz-stack
gro check # typecheck, test, lint, format check (run before committing) gro typecheck # typecheck only (faster iteration) gro test # run tests with vitest gro gen # regenerate .gen files (library.json, fuz.css) gro build # build for production (static adapter) gro deploy # build, commit, and push to deploy branch gro sync # regenerate files and run svelte-kit sync
IMPORTANT for AI agents: Do NOT run
gro dev - the developer will manage the
dev server.
fuz_template is a SvelteKit starter template:
Clone with degit or use GitHub's "Use this template" button:
npx degit fuzdev/fuz_template myproject cd myproject npm i
Files to customize:
package.json - name, version, description, homepage, repositorysvelte.config.js - update origin URLsrc/routes/+layout.svelte - update <title>src/routes/+page.svelte - replace demo contentstatic/CNAME - update or delete for your domain.github/FUNDING.yml - update or deletesrc/ ├── app.html # HTML entry with theme detection ├── lib/ # your library code │ ├── Mreows.svelte # example component (replace me) │ └── Positioned.svelte # example component (replace me) └── routes/ ├── +layout.svelte # root layout with fuz_css imports ├── +layout.ts # prerender: true, ssr: true ├── +page.svelte # home page ├── style.css # custom global styles ├── fuz.css # generated fuz_css styles ├── library.gen.ts # generates library.json ├── library.ts # exports library metadata ├── library.json # generated component metadata ├── example.test.ts # test file example ├── about/+page.svelte └── docs/ # documentation pages ├── +layout.svelte # wraps docs in Docs component ├── +page.svelte # docs index ├── tomes.ts # documentation structure ├── library/ # library details page └── api/ # auto-generated API docs
The template includes demo components to show Svelte 5 patterns:
Mreows.svelte - interactive emoji grid demo showing
$props(),
$bindable(), $state(), $derived(). Marked with "don't use this component".
Positioned.svelte - CSS transform utility with Snippet children.
Replace these with your actual components.
+layout.ts exports prerender = true and ssr = true for full static
generationsvelte.config.js enables runes mode and configures CSP via
create_csp_directives() from fuz_ui@sveltejs/adapter-static for static outputapp.html includes theme detection that runs before render:
localStorage.getItem('fuz:color-scheme')matchMedia('(prefers-color-scheme:dark)')<html> element ('dark' or 'light')This prevents flash of wrong theme on page load.
library.gen.ts - generates component library metadata:
library.json (component metadata, props, dependencies) and
library.ts (typed wrapper)/docs/api/fuz.gen.css.ts - generates fuz_css utility classes:
fuz.css with CSS custom properties and utility classesUses fuz_ui's tome system:
docs/tomes.ts - defines documentation pagesdocs/library/ - shows LibraryDetail componentdocs/api/ - auto-generated API docs from library.jsondocs/api/[...module_path]/ - dynamic module documentationUses contexts from fuz_ui:
library_context - provides Library class for docstomes_context - provides documentation structureThemed component wrapperPre-configured for static hosting (GitHub Pages, Netlify, etc.):
@sveltejs/adapter-staticstatic/CNAME for custom domainstatic/.nojekyll for GitHub PagesDeploy with
gro deploy (builds and pushes to deploy branch).
example.test.ts) rather than
src/test/ directory