implement-page-or-components
Implement a new page in the project
When & Why to Use This Skill
This Claude skill streamlines frontend development by automating the implementation of SvelteKit pages and components. It leverages the latest Rune API, TanStack ecosystem (Query, Form, Table), and Shadcn UI components to generate production-ready, accessible, and well-designed user interfaces following Refactoring UI guidelines. By understanding project-specific structures and design systems, it significantly reduces the time required to move from a feature plan to a functional UI.
Use Cases
- Rapid Page Prototyping: Quickly scaffold and build complete SvelteKit pages from technical plans, including state management and layout.
- Data-Driven UI Development: Efficiently implement complex data tables and forms using TanStack Table and Svelte Form with standardized API integrations.
- Design System Implementation: Seamlessly incorporate pre-installed Shadcn UI components and Lucide icons into new project views while maintaining visual consistency.
- Modern Svelte Refactoring: Create or update components using the latest Svelte Rune API ($state, $props) to ensure high-performance and modern code standards.
| name | implement-page-or-components |
|---|---|
| description | Implement a new page in the project |
| license | MIT |
| compatibility | opencode |
What I do
- read and understand the plan in provided file carefully.
- ask unclear questions.
- implement svelte kit page with lastest rune api. For example:
import type { PageProps } from "./$types";const { params, data }: PageProps = $props();let isInviteDialogOpen = $state(false); - import necessary shad cn components from
@repo/ui. For exampleimport * as Card from "@repo/ui/card". Components are already installed so no need to reinstall and check exist or not. - use the
@tanstack/svelte-querylatest api to make api calls if necessary. - use full import of lucide icons import. For example
import UserPlusIcon from "@lucide/svelte/icons/user-plus"; - use data table with
@tanstack/table-coreif need to implement table. Also check out tables fromapps/website/src/lib/components/tablesfor reference. - use
@tanstack/svelte-formif need to implement form. - follow Refactoring UI book design guidelines to implement the UI.
When to use me
Use this when you are going to design and write code to implement page or components. Ask clarifying questions if the you are unclear about features or necessary actions.