skills.rest
podman-desktop
podman-desktopOFFICIAL
Explore all skills by this author →
GitHub

svelte-ui-design

Build Svelte 5 UI components with Podman Desktop's design system.

477|33|Updated Dec 19, 2023
Search Tags:#routing#design system#tailwind css#ui components#svelte 5#podman desktop#rpc stores
One-click install
npx skills add https://github.com/podman-desktop/extension-bootc --skill svelte-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-ui-design
Source: https://github.com/podman-desktop/extension-bootc/tree/main/.agents/skills/svelte-ui-design
Command: npx skills add https://github.com/podman-desktop/extension-bootc --skill svelte-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams need a reliable way to design and implement Svelte 5 UI components that match Podman Desktop’s design system and work correctly with the project’s runtime conventions, while avoiding regressions from outdated Svelte patterns or mismatched component APIs.

Core Features & Use Cases

  • Design-system first component selection: Use @podman-desktop/ui-svelte as the default source for standard UI elements, with guidance on when to create custom components.
  • Svelte 5 correctness: Apply Svelte 5 runes ($state, $derived, $effect, $props) instead of legacy Svelte 4 reactive syntax, including common prop patterns.
  • Integration with app conventions: Follow routing (tinro hash routes), RPC reactive stores patterns, Tailwind styling conventions using Podman Desktop CSS variables, and upstream-component reuse.
  • Practical checklist for new pages: Create UI pages using the right page/layout components (NavPage, FormPage, details patterns) and connect them to backend clients.

Quick Start

Update or create your Svelte component and ensure it uses @podman-desktop/ui-svelte first, follows Svelte 5 runes and props patterns, then registers the page route and navigation entry in App.svelte and Navigation.svelte.

Frequently Asked Questions about svelte-ui-design

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

FAQPage Schema
How do I build Svelte 5 UI components that match Podman Desktop's design system?▼

Build Svelte 5 UI components for Podman Desktop by using the @podman-desktop/ui-svelte library as your primary source for UI elements, applying Svelte 5 runes like $props and $state, and styling with Tailwind CSS using PD CSS variables.

What is the correct way to set up routing for a new Svelte page in Podman Desktop?▼

Routing for a Svelte page in Podman Desktop uses tinro hash routes, requiring you to register the new page route and navigation entry in App.svelte and Navigation.svelte to ensure correct integration.

How do I migrate Svelte 4 reactive syntax to Svelte 5 runes for UI components?▼

Migrate to Svelte 5 runes by replacing legacy Svelte 4 reactive syntax with $state, $derived, $effect, and $props patterns to ensure component correctness and avoid regressions in your Svelte UI.

Can I use custom Svelte components instead of the @podman-desktop/ui-svelte library?▼

While @podman-desktop/ui-svelte is the default source for standard UI elements to ensure design system consistency, you can create custom Svelte components when the standard library patterns do not fit your specific front-end needs.

How do I connect Svelte UI components to backend clients using RPC stores?▼

Connect Svelte UI components to backend clients by integrating RPC reactive stores patterns, verifying component APIs via .d.ts sources, and following the upstream component reuse conventions.

Which layout components should I use for creating forms and navigation pages in Podman Desktop?▼

Use NavPage and FormPage layout components to create new UI pages and forms, following the design system's details patterns to connect them correctly to backend clients.

Related Skills

Explore More Design & Creative Skills→
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate
ehtbantonehtbanton

svelte-component-generator

Generate Svelte components with TypeScript and scoped CSS.

Community
Basic