skills.rest
acastillo9
acastillo9COMMUNITY
Explore all skills by this author →
Website𝕏@acastillodevGitHub

budget-ui

Provide SvelteKit frontend patterns for pages, components, loaders, and forms.

Updated Feb 19, 2026
Search Tags:#typescript#state management#frontend#patterns#ui development#sveltekit
One-click install
npx skills add https://github.com/acastillo9/budget --skill budget-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: budget-ui
Source: https://github.com/acastillo9/budget/tree/main/.agents/skills/budget-ui
Command: npx skills add https://github.com/acastillo9/budget --skill budget-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of patterns and best practices for developing the SvelteKit frontend of the budget application, ensuring consistency, maintainability, and efficient development.

Core Features & Use Cases

  • SvelteKit Best Practices: Demonstrates idiomatic usage of Svelte 5 runes, server load functions, form actions, and API proxy routes.
  • State Management: Outlines strategies for global state, context API, and layout state synchronization.
  • UI Component Patterns: Illustrates patterns for file uploads, drag-and-drop interfaces, and layout-embedded features.
  • Use Case: When building a new feature like transaction categorization, developers can refer to these patterns to implement data loading, form handling, and UI updates in a standardized way.

Quick Start

Use the budget-ui skill to implement a new form action for handling user input.

Frequently Asked Questions about budget-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement SvelteKit form actions for handling user input?▼

SvelteKit form actions handle user input by processing progressive enhancement submissions in server routes. The provided patterns guide creating standardized form features like transaction categorization, ensuring consistent data loading and UI updates.

What is the best way to manage global state in a SvelteKit frontend?▼

Global state in a SvelteKit frontend is managed using Svelte 5 runes and context API strategies. These patterns outline layout state synchronization to ensure maintainable data flow across pages and embedded components.

How do I create API proxy routes in SvelteKit?▼

API proxy routes in SvelteKit are created by defining server endpoints that forward client requests. This Skill demonstrates idiomatic usage of these routes alongside server load functions to fetch and mutate budget application data securely.

Does this SvelteKit pattern cover drag-and-drop interfaces and file uploads?▼

Yes, the SvelteKit pattern covers drag-and-drop interfaces and file uploads. It illustrates specific UI component patterns for layout-embedded features, ensuring consistent handling of complex user interactions within the budget frontend.

How do I write E2E tests for SvelteKit pages and components?▼

E2E tests for SvelteKit pages and components are written by validating UI flows and form actions end-to-end. The provided patterns include testing schemas and types to ensure features like transaction categorization function correctly across the budget application.

Related Skills

Explore More Software Engineering Skills→
nirukk52nirukk52

Encore + SvelteKit Full-Stack Setup

Automate Encore.ts backend and SvelteKit frontend project initialization with Taskfile commands.

Community
Intermediate
j4xiej4xie

integration-testing

Run end-to-end integration tests for API and UI interactions in the Cretas food traceability system.

Community
Advanced
jia-wei-00jia-wei-00

supabase

Integrate Supabase database, auth, storage, and functions into frontend stacks.

Community
Advanced
dwalleckdwalleck
11

Svelte Development Skill

Implement reactive Svelte 5 components using runes-based state and template syntax.

Community
Basic