ui-route

Generates SvelteKit route files and Svelte 5 components for Traceway UI.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/andrewn6/traceway --skill ui-route
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-route
Source: https://github.com/andrewn6/traceway/tree/main/.claude/skills/ui-route
Command: npx skills add https://github.com/andrewn6/traceway --skill ui-route

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of new pages, routes, and reusable components within the Traceway SvelteKit frontend, ensuring consistency and adherence to best practices.

Core Features & Use Cases

  • Route Creation: Generates standard SvelteKit route files (+page.svelte, +page.ts, +layout.svelte) in the correct directory structure.
  • Component Development: Assists in building new Svelte components with modern Svelte 5 syntax and conventions.
  • API Integration: Provides guidance on adding API fetch helpers and integrating with the backend.
  • Use Case: When you need to add a new "User Settings" page to the Traceway application, this skill will help you set up the necessary route files and any associated UI components.

Quick Start

Use the ui-route skill to create a new page component for the '/dashboard' route.

Frequently Asked Questions about ui-route

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

FAQPage Schema
How do I generate SvelteKit routes and components for a new page?

To generate SvelteKit routes, this Skill creates standard files like `+page.svelte` and `+layout.svelte` in the correct directory structure. It builds Svelte 5 components using runes and Tailwind CSS v4 for consistent UI development.

Can I use Svelte 5 runes when building UI components?

Yes, you can use Svelte 5 runes when building UI components. The Skill specifically generates components utilizing modern Svelte 5 syntax and conventions, ensuring adherence to current design system primitives and best practices.

What is the best way to structure SvelteKit frontend features in a large application?

The best way to structure SvelteKit frontend features is by following established conventions. This Skill streamlines creating routes, pages, and reusable components, ensuring consistency and adherence to design system primitives across the application.

Does this tool support adding API fetch helpers for backend integration?

Yes, this tool supports adding API fetch helpers for backend integration. Alongside generating SvelteKit routes and Svelte 5 components, it provides guidance on integrating API fetch helpers to connect the UI with the backend.

How do I set up a dashboard route using SvelteKit and Tailwind CSS v4?

To set up a dashboard route, the Skill generates the necessary SvelteKit page files and associated UI components. It utilizes Tailwind CSS v4 and Svelte 5 runes to build the frontend feature following established design conventions.