skills.rest
dopiotrek
dopiotrekCOMMUNITY
Explore all skills by this author →
𝕏@dopiotrekGitHub

svelte-architect

Decompose SvelteKit applications into Page, Feature, and UI component hierarchies.

1|Updated Feb 1, 2026
Search Tags:#refactoring#svelte#code organization#frontend development#component architecture#sveltekit
One-click install
npx skills add https://github.com/dopiotrek/dotclaude --skill svelte-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-architect
Source: https://github.com/dopiotrek/dotclaude/tree/main/skills/svelte-component-architecture
Command: npx skills add https://github.com/dopiotrek/dotclaude --skill svelte-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers organize and structure Svelte and SvelteKit components to improve maintainability, scalability, and developer experience.

Core Features & Use Cases

  • Component Decomposition: Provides clear guidelines on when and how to split code into reusable components.
  • Architecture Patterns: Recommends a three-tier hierarchy (Page, Feature, UI) for better separation of concerns.
  • Use Case: When building a new complex feature in your SvelteKit app, use this Skill to guide the creation of feature and UI components, ensuring a clean and scalable architecture from the start.

Quick Start

Use the svelte-architect skill to review the component structure for a complex page.

Frequently Asked Questions about svelte-architect

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

FAQPage Schema
How do I structure SvelteKit components to avoid prop drilling and complexity?▼

To structure SvelteKit components effectively, decompose your application into a maintainable three-tier hierarchy of Page, Feature, and UI components, which isolates state and eliminates prop drilling.

What is the best way to organize a large Svelte codebase for refactoring?▼

Organizing a large Svelte codebase requires a three-tier component hierarchy and an audit workflow, providing clear refactoring strategies to address component reuse and enforce proper naming conventions.

When should I split code into reusable Svelte components?▼

You should split code into reusable Svelte components by applying a three-tier architecture pattern, using the provided audit workflow to assess complexity and ensure clean separation of concerns.

Can I use this Svelte architecture pattern for existing applications?▼

Yes, you can apply this Svelte architecture pattern to existing applications by following the provided audit workflow and refactoring strategies to transition towards a maintainable Page, Feature, and UI component structure.

What is the three-tier Svelte component hierarchy?▼

The three-tier Svelte component hierarchy consists of Page, Feature, and UI components, designed to improve separation of concerns, isolate state, and ensure scalability across SvelteKit applications.

Related Skills

Explore More Software Engineering Skills→
kvnapontekvnaponte

sveltekit-structure

Guide SvelteKit project directory and routing structure with layout examples.

Community
Intermediate
ngquaanghuyngquaanghuy

ponytail-audit

Analyze entire codebases to identify and rank over-engineering issues.

Community
Intermediate
PMKhaiPMKhai

compound-pattern

Coordinate React subcomponents through shared parent state via Context API.

Community
Intermediate
lucas-martinolucas-martino

component-driven-ui-design

Implement Atomic Design methodology to create scalable UI component hierarchies.

Community
Advanced