skills.rest
fpindej
fpindejCOMMUNITY
Explore all skills by this author →
Website𝕏@fdpindejGitHub

Frontend Conventions (SvelteKit / Svelte 5)

Document SvelteKit and Svelte 5 frontend development standards.

230|29|Updated Dec 25, 2025
Search Tags:#best practices#web development#frontend#conventions#sveltekit#svelte 5
One-click install
npx skills add https://github.com/fpindej/netrock --skill frontend-conventions-sveltekit-svelte-5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Conventions (SvelteKit / Svelte 5)
Source: https://github.com/fpindej/netrock/tree/main/.claude/skills/frontend-conventions
Command: npx skills add https://github.com/fpindej/netrock --skill frontend-conventions-sveltekit-svelte-5

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the established conventions and best practices for developing the frontend of the NETrock application using SvelteKit and Svelte 5.

Core Features & Use Cases

  • Project Structure: Outlines the expected organization of directories and files within the src/ directory.
  • API Client & Auth: Details the patterns for interacting with the backend API, including authentication and error handling.
  • Component Design: Specifies rules for props, organization, and integration with UI libraries like shadcn.
  • Styling & Theming: Enforces the use of logical CSS properties and mobile-first responsive design principles.
  • Routing & Permissions: Explains how routing, authentication guards, and permission checks are implemented.
  • i18n & State Management: Guides on internationalization and managing reactive state.

Quick Start

Consult the Frontend Conventions skill for guidance on structuring SvelteKit components and handling API interactions.

Frequently Asked Questions about Frontend Conventions (SvelteKit / Svelte 5)

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

FAQPage Schema
What are the best practices for structuring a SvelteKit project directory?▼

SvelteKit project structure conventions recommend organizing directories and files within the `src` folder to separate routing, components, and API client logic for maintainable code.

How do I implement authentication guards and permission checks in SvelteKit?▼

Authentication guards and permission checks in SvelteKit are implemented during routing to protect endpoints, ensuring API client interactions validate user auth state before rendering protected pages.

Does this SvelteKit frontend conventions guide support mobile-first responsive design?▼

Yes, SvelteKit styling conventions enforce mobile-first responsive design principles alongside logical CSS properties to ensure UI components adapt correctly across different screen sizes.

How should I manage reactive state and internationalization in Svelte 5?▼

Reactive state and internationalization in Svelte 5 are managed using established frontend conventions that guide data flow and UI translation integration within SvelteKit applications.

Can I use shadcn UI components with these SvelteKit frontend conventions?▼

Yes, component design conventions specify rules for integrating UI libraries like shadcn, detailing how to handle props and component organization within Svelte 5 applications.

Related Skills

Explore More Software Engineering Skills→
shredbxshredbx

frontend-svelte

Guide SvelteKit 5 development with runes, routes, and data loading.

Community
Basic
timurgaleevtimurgaleev
5

canary

Monitor post-deploy web apps for defects and performance regressions.

Community
Advanced
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
gfcampos1gfcampos1

frontend-implementation

Implement frontend features using detected framework conventions and TypeScript preferences.

Community
Advanced