Toolverse
All skills
Frontend

page-builder

by svelte-society

Patterns for building list and detail pages with forms, filters, and data fetching

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
svelte-society
Category
Frontend
Views
1
GitHub repo

About this skill

Patterns for building list and detail pages with forms, filters, and data fetching

How to use

  1. Zainstaluj skill w swoim projekcie Svelte, umieszczając pliki wzorców w katalogu .claude/skills/page-builder.

  2. Przeanalizuj strukturę tras: utwórz folder [section] w src/routes z plikami +page.svelte dla strony listy, data.remote.ts dla funkcji zdalnych oraz podfolder [slug] z +page.svelte dla strony szczegółów.

  3. Zaimplementuj logikę pobierania danych w pliku data.remote.ts — umieść tam zapytania do bazy danych, funkcje filtrowania i obsługę formularzy, aby oddzielić logikę od renderowania.

  4. Stwórz mapę komponentów w pliku +page.svelte strony listy, przypisując typy danych do odpowiednich komponentów (np. 'article' → ArticleCard, 'video' → VideoCard), a następnie renderuj elementy za pomocą pętli #each z dynamicznym wyborem komponentu.

  5. Dodaj formularze filtrów, które automatycznie wysyłają dane po zmianach — użyj debounce'a (opóźnienia) na zdarzeniach input, aby uniknąć zbyt częstych żądań do serwera.

  6. Dla stron szczegółów zastosuj ten sam wzorzec: pobieraj dane w data.remote.ts, renderuj formularz edycji w +page.svelte i obsługuj wysyłanie zmian poprzez zdalne funkcje.

Related skills

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139