svelte-ui-standards

Define Svelte UI standards for dashboards with formatting, file structure, and component exports.

18|3|Updated Jan 2, 2026

Search Tags:#theming #frontend #css #svelte #design-system #component-library #ui-standards

Ready to run

npx skills add https://github.com/Niller2005/PolyFlup --skill svelte-ui-standards

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte-ui-standards
Source: https://github.com/Niller2005/PolyFlup/tree/main/.opencode/skill/svelte-ui-standards
Command: npx skills add https://github.com/Niller2005/PolyFlup --skill svelte-ui-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes and communicates consistent Svelte UI coding standards to ensure a coherent design, maintainability, and faster onboarding for the PolyFlup dashboard project.

Core Features & Use Cases

Standardizes formatting, file structure, and naming conventions across frontend codebases.
Defines component library patterns, theming, and pattern usage to enable a cohesive user interface.
Use Case: When a new screen is added, follow these standards to ensure a consistent look and predictable development flow across the team.

Quick Start

Begin by aligning your Svelte components to the 2-space indentation and the component library patterns described in this guide.

Frequently Asked Questions about svelte-ui-standards

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

FAQPage Schema

How do I standardize Svelte UI components for a dashboard project?▼

Standardize Svelte UI components by enforcing 2-space indentation, organizing files under ui/src/lib/components, and exporting them from index.ts to ensure consistent design and maintainability across the dashboard.

What is the best way to structure a Svelte component library for consistent frontend design?▼

Structure a Svelte component library by centralizing files in ui/src/lib/components and using index.ts exports, which establishes a predictable development flow and ensures a cohesive user interface across desktop and mobile contexts.

Does this Svelte UI standards guide work with shadcn-svelte and Lucide Icons?▼

Yes, the Svelte UI standards guide explicitly supports using a shared component library that includes shadcn-svelte, Lucide Icons, LayerChart, and d3-scale for consistent theming and data visualization patterns.

How do I apply theming and data visualization patterns in Svelte?▼

Apply theming and data visualization patterns in Svelte by integrating LayerChart and d3-scale within your shared component library, ensuring formatting and component exports follow the defined UI standards.

Can I use these frontend UI standards for both desktop and mobile Svelte dashboards?▼

Yes, these frontend UI standards are designed for both desktop and mobile Svelte dashboards, covering file organization, accessibility, and theming to ensure a coherent design across different contexts.

Why enforce index.ts exports and 2-space indentation in a Svelte design system?▼

Enforcing index.ts exports and 2-space indentation in a Svelte design system accelerates onboarding and maintains codebase consistency, ensuring that formatting and component library patterns remain predictable across the team.