skills.rest
skamansam
skamansamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte-components

Enforce semantic HTML and accessibility in Svelte 5 components.

Updated Jan 5, 2023
Search Tags:#typescript#accessibility#tailwind css#semantic html#svelte#svelte 5#component development
One-click install
npx skills add https://github.com/skamansam/twintrinsic --skill svelte-components-skamansam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-components
Source: https://github.com/skamansam/twintrinsic/tree/main/.devin/skills/svelte-components
Command: npx skills add https://github.com/skamansam/twintrinsic --skill svelte-components-skamansam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building Svelte 5 components that are accessible, performant, and follow industry best practices often requires piecing together fragmented guidance, leading to inconsistent implementations, poor accessibility compliance, and unnecessary JavaScript bloat from custom solutions that replicate native browser functionality.

Core Features & Use Cases

  • Semantic HTML Enforcement: Guides developers to use native HTML elements instead of custom divs to leverage built-in accessibility, reduce bundle size, and improve cross-browser performance.
  • Svelte 5 & Tailwind 4.2 Best Practices: Provides patterns for Svelte 5 runes, callback props, modern CSS features, and Tailwind integration to build maintainable, type-safe components.
  • Accessibility & Testing Guidance: Includes WCAG 2.1 compliance checklists, ARIA usage rules, and examples for unit (Vitest) and E2E (Playwright) testing to ensure components work for all users.
  • Use Case: A frontend developer building a design system for a Svelte 5 app can use this skill to create a reusable Button component that is fully keyboard accessible, supports screen readers, and uses native browser functionality instead of custom JavaScript.

Quick Start

Use the svelte-components skill to build an accessible, type-safe Progress component for your Svelte 5 app using the native HTML progress element and Tailwind 4.2 styling.

Frequently Asked Questions about svelte-components

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

FAQPage Schema
How do I build accessible Svelte 5 components with Tailwind CSS?▼

Build accessible Svelte 5 components by enforcing semantic HTML elements over custom divs, integrating Tailwind 4.2 styling, applying Svelte 5 runes, and following WCAG 2.1 compliance checklists to ensure native keyboard accessibility.

What is the best way to ensure WCAG 2.1 compliance in a Svelte UI library?▼

Ensure WCAG 2.1 compliance by using native HTML elements for built-in accessibility, following ARIA usage rules, and implementing unit tests with Vitest and E2E tests with Playwright to verify components work for all users.

Does this Svelte component approach support TypeScript type safety?▼

Yes, this Svelte 5 component development workflow supports TypeScript type safety alongside modern web API integration, ensuring maintainable and type-safe UI libraries and design systems without unnecessary JavaScript bloat.

Why should I use native HTML elements instead of custom divs in Svelte 5?▼

Use native HTML elements instead of custom divs in Svelte 5 to leverage built-in browser accessibility, reduce bundle size, improve cross-browser performance, and eliminate inconsistent inaccessible component implementations.

How do I apply Svelte 5 runes and callback prop event patterns correctly?▼

Apply Svelte 5 runes and callback prop event patterns by following established component development workflows that provide specific patterns for modern CSS features and Tailwind integration to build maintainable type-safe components.

Can I use Tailwind 4.2 styling with semantic HTML in Svelte component development?▼

Yes, you can use Tailwind 4.2 styling with semantic HTML in Svelte component development to build accessible performant UI components that adhere to modern web API integration and Svelte 5 best practices.

Related Skills

Explore More Software Engineering Skills→
aguirrerjgaguirrerjg
1

svelte5-best-practices

Review Svelte 5 components for correct rune syntax and SvelteKit patterns.

Community
Intermediate
eventua11yeventua11y
1

writing-tests

Automate E2E and unit test setup and execution with Playwright and Vitest.

Official
Intermediate
hai-serieshai-series
3

hai-ui

Build cross-platform UIs with Svelte 5 Runes, DaisyUI, and Tailwind CSS.

Official
Advanced
starrank-softstarrank-soft

frontend-a11y

Implements WCAG-compliant React and Next.js UI patterns with ARIA, keyboard navigation, and focus management.

Official
Intermediate