SvelteKit starter

My default setup when starting new SvelteKit projects. Added several complementary packages for ease of use or performance.

Available commands

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build locally
npm run prepare	Sync SvelteKit configuration
npm run check	Type check with Svelte
npm run check:watch	Type check in watch mode
npm run format	Format code with Prettier
npm run lint	Check formatting and lint code

---

Additional packages installed

Package	Description
@poppanator/sveltekit-svg	SVG component loader for SvelteKit
@sveltejs/adapter-node	Node.js adapter for SvelteKit deployment
@types/bootstrap	TypeScript definitions for Bootstrap
bootstrap	CSS framework for responsive design
@fullhuman/postcss-purgecss	Remove unused CSS for smaller bundles
cssnano	CSS minification and optimization
postcss-sort-media-queries	Sort and optimize media queries
sass	SCSS/Sass preprocessor support
stylelint	CSS/SCSS linting and style checking
stylelint-config-recess-order	Property order rules for Stylelint
stylelint-config-standard	Standard Stylelint configuration
stylelint-config-standard-scss	SCSS-specific Stylelint rules
stylelint-order	Property ordering for Stylelint
stylelint-scss	SCSS syntax support for Stylelint
svelte-meta-tags	SEO meta tags component for Svelte
vite-plugin-devtools-json	JSON devtools plugin for Vite

Poppanator

@poppanator/sveltekit-svg svg's are loaded from the /src/lib/assets/svgs folder, if you want them loaded from another directory or want to include more directories do not forget to update the vite config.

---

SCSS guidelines

• All styles are placed within the src/lib/assets/styles directory.
• Components and pages should use scoped styles by default. This keeps the css small, only loaded when we actually use the component and is easier to manage on long term.
• Global unscoped css is only used for stuff that will be loaded on most poges, like our base layout, typography etc.