skills.rest
HopeArtOrg
HopeArtOrgOFFICIAL
Explore all skills by this author →
GitHub

svelte-component

Construct Svelte components following Hope:RE standards with Tailwind CSS.

8|1|Updated Dec 24, 2025
Search Tags:#Tailwind CSS#code standards#Svelte#component development#Hope:RE
One-click install
npx skills add https://github.com/HopeArtOrg/hope-re --skill svelte-component-hopeartorg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-component
Source: https://github.com/HopeArtOrg/hope-re/tree/main/.gemini/skills/svelte-component
Command: npx skills add https://github.com/HopeArtOrg/hope-re --skill svelte-component-hopeartorg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill unit helps developers create Svelte components in a consistent and efficient manner by following Hope:RE conventions, ensuring a standardized codebase across your project.

Core Features & Use Cases

  • Conventions Adherence: Provides guidelines for structuring Svelte components to ensure consistency in development.
  • Tailwind CSS Integration: Promotes the use of Tailwind CSS for styling, enhancing the efficiency of UI development.
  • Exporting Components: Utilizes barrel exports to cleanly and modularly expose component code.
  • Use Case: When you're looking to introduce Svelte components in your project that follow best practices and integrate well with existing frameworks.

Quick Start

Run 'h5 new-component --feature MyComponent' to generate a new Svelte component following Hope:RE conventions.

Frequently Asked Questions about svelte-component

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

FAQPage Schema
How do I structure Svelte components to maintain consistent code standards?▼

To structure Svelte components with consistent code standards, follow Hope:RE conventions for naming, file structure, and modular styling. This approach ensures a standardized codebase and promotes highly reusable component code across your project.

What's the best way to integrate Tailwind CSS into Svelte component development?▼

The best way to integrate Tailwind CSS into Svelte component development is by applying Hope:RE styling guidelines. This ensures efficient UI styling and modular component architecture without requiring additional dependencies.

How do I generate a new Svelte component following best practices?▼

To generate a new Svelte component following best practices, run the command 'h5 new-component --feature MyComponent'. This automatically scaffolds the component file using Hope:RE conventions for naming and exporting.

Do I need to install extra dependencies to use Hope:RE conventions for Svelte?▼

You do not need to install extra dependencies to use Hope:RE conventions for Svelte. The Skill requires no additional packages, relying solely on standard Svelte and Tailwind CSS setups to create modular code.

How does barrel exporting work for Svelte component code?▼

Barrel exporting for Svelte component code works by utilizing a centralized index file to cleanly and modularly expose multiple components. This Hope:RE convention streamlines imports and maintains a standardized codebase structure.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate
s0lci700s0lci700
1

svelte-native

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

Community
Advanced
darkroomengineeringdarkroomengineering
41

component

Generate Darkroom-compliant React components with TypeScript and CSS Modules.

Official
Intermediate