skills.rest
the-non-expert
the-non-expertCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sikhaid-components

Enforce consistent Svelte component naming, file organization, and import patterns.

Updated Aug 27, 2026
Search Tags:#components#patterns#design-system#Svelte#import
One-click install
npx skills add https://github.com/the-non-expert/SikhAidSPA --skill sikhaid-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sikhaid-components
Source: https://github.com/the-non-expert/SikhAidSPA/tree/main/.claude/skills/sikhaid-components
Command: npx skills add https://github.com/the-non-expert/SikhAidSPA --skill sikhaid-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It defines patterns for building reusable Svelte components, organizes them, and documents import patterns to accelerate development.

Core Features & Use Cases

  • Component Patterns: Layout, page, feature, UI components.
  • Import Patterns: How to import components and stores.
  • Use Case: Create a new page by composing Header, Hero, and CampaignCarousel.

Quick Start

Import components from $lib and compose on a route like src/routes/+page.svelte

Frequently Asked Questions about sikhaid-components

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

FAQPage Schema
How do I organize Svelte components consistently across a project?▼

Organize Svelte components by type—Layout, Page, Feature, UI—in src/lib/components and related directories. Use PascalCase filenames, follow a standard component template, and enforce import conventions from $lib to ensure cohesive structure and reusability across your codebase.

What's the best way to structure imports and compose components in Svelte?▼

Import components and stores from $lib using consistent patterns. Compose them on routes like src/routes/+page.svelte by combining Layout, Feature, and UI components—for example, pairing Header and Hero with CampaignCarousel—to accelerate page creation.

How do I ensure component naming and file organization stays consistent in a Svelte design system?▼

Enforce PascalCase naming, standardize file organization under designated directories, document domain-specific UI patterns like Header and PaymentForm, and define reusable component templates. This ensures cohesive structure and correct integration across Layout, Page, Feature, and UI tiers.

Can I apply design system patterns to existing Svelte codebases?▼

Yes. Identify and refactor existing components to comply with PascalCase naming, standard templates, and import conventions. Apply patterns across src/lib/components and related admin and home directories to retrofit a cohesive design system into your project.

What's the difference between Layout, Page, Feature, and UI components in Svelte?▼

Layout components provide structure; Page components define routes; Feature components bundle domain logic; UI components are reusable primitives. This hierarchy organizes code by responsibility and enables rapid composition of new pages and workflows.

Related Skills

Explore More Design & Creative Skills→
whddltjdwhdwhddltjdwhd
2

bellog-structure

Standardize Bellog project structure with defined directory layouts and naming conventions.

Community
Intermediate
okgoogle13okgoogle13
1

react-page-scaffolder

Scaffold React page directories with MUI layout and export barrels.

Community
Basic
calcosmiccalcosmic
9

svelte

Teach Svelte component design, state management, routing, and styling best practices.

Community
Advanced
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic