skills.rest
Niller2005
Niller2005COMMUNITY
Explore all skills by this author →
Website𝕏@niller2005GitHub

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
One-click install
npx skills add https://github.com/Niller2005/PolyFlup --skill svelte-ui-standards
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
salemazielsalemaziel

project-conventions

Define project directory structures, file naming conventions, and working standards.

Community
Basic
spences10spences10
15

svelte-layerchart

Generate interactive LayerChart components with tooltips, gradients, and highlights for Svelte.

Community
Intermediate
MesferAliMesferAli

atlas-ui

Provide guidance on Atlas UI components, theming, forms, and data display.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

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

Community
Advanced