An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Svelte Building Blocks
A hands-on, book-style Svelte 5 and SvelteKit course covering runes, state, component architecture, APIs, testing, production, and deployment.
Install
$
git clone https://github.com/erayack/svelte-building-blocksInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Svelte Building Blocks: Svelte 5 Runes Edition
A book-style Svelte and SvelteKit course you can run locally. It targets Svelte 5 runes syntax from the first chapter through production workflows.
Each level is a standalone runnable project with its own package.json, source files, README chapter, guided walkthrough, commands to try, practice prompts, and check-yourself questions.
Syntax target
This course teaches modern Svelte 5 patterns:
$props()for component inputs and$bindablefor deliberate shared control$state,$state.raw, and$state.snapshotfor appropriate state boundaries- rune-enabled
.svelte.jsmodules for reusable reactive models $derivedand$derived.byfor computed values$effectonly for real side effects and$inspectfor reactive debugging- callback props for child-to-parent domain intent
- snippets, render tags, and component error boundaries for composition and recovery
- attachments for reusable DOM behavior with cleanup
- SvelteKit load functions, route errors, form actions, endpoints, and server-only modules
- focused TypeScript, unit, component-browser, end-to-end, and production-build verification
Classic Svelte 3/4 component syntax is not the default path in this course.
Levels
- Foundation: components,
$props,$state,$derived, template syntax - State Management: stores alongside runes, derived stores, context, callback props
- Component Architecture: snippets, render tags, composition, callbacks, effects
- Reactivity Patterns: rune-enabled modules, raw/snapshot state, derived graphs,
$inspect, effect cleanup - Dynamic UI: if/each blocks, dynamic components, transitions, attachments, explicit bindings
- SvelteKit Fundamentals: routing, SSR, load functions, route errors, component boundaries
- Data & APIs: server load functions, form actions, validation, errors, endpoints
- Production: TypeScript, unit/component/e2e testing, builds, CI/CD
- Capstone: combined SvelteKit feature with runes, components, context, actions, validation, and tests
How to study this repo
Suggested path:
Similar plugs
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
Open-source AI job search agent and job finder: scan job boards, score each job 1-5 against your CV before you apply, tailor an ATS-friendly resume and cover letter, get…
OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.