skills.rest
dasch-swiss
dasch-swissOFFICIAL
Explore all skills by this author →
Website𝕏@DaSCHSwissGitHub

create-mosaic-component

Generate Leptos components with Rust and CSS files in the Mosaic Tiles crate.

2|Updated Apr 6, 2025
Search Tags:#web development#css#component#rust#leptos#mosaic
One-click install
npx skills add https://github.com/dasch-swiss/dsp-repository --skill create-mosaic-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-mosaic-component
Source: https://github.com/dasch-swiss/dsp-repository/tree/main/.claude/skills/create-new-component
Command: npx skills add https://github.com/dasch-swiss/dsp-repository --skill create-mosaic-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating new, reusable Leptos components within the Mosaic Tiles library, ensuring consistency and adherence to established patterns.

Core Features & Use Cases

  • Component Scaffolding: Generates the necessary directory structure, Rust files, and CSS files for a new component.
  • Build System Integration: Updates Cargo.toml and build.rs to include the new component and its styling.
  • Use Case: A developer needs to add a new Card component to the Mosaic library. This Skill will automate the creation of src/components/card/mod.rs, src/components/card/card.css, and update the necessary build configurations.

Quick Start

Use the create-mosaic-component skill to generate a new Leptos component named 'UserProfile'.

Frequently Asked Questions about create-mosaic-component

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

FAQPage Schema
How do I scaffold a new Leptos component with Rust and CSS files?▼

To scaffold a Leptos component, this Skill generates the component directory structure, creates the necessary Rust and CSS files, and updates build configurations like Cargo.toml and build.rs automatically.

What is the best way to add reusable UI components to a Leptos Mosaic library?▼

The best way to add reusable components is by using this Skill to generate consistent component structures with optional props, variants, children, event handlers, and reactive state management integrated into the Mosaic Tiles library.

Does this Leptos component generator support Tailwind CSS for styling?▼

Yes, this component generator integrates with Tailwind CSS for styling, creating the required CSS files and updating build configurations to include the new component and its styling rules.

Can I create Leptos components with reactive state and event handlers?▼

Yes, you can create Leptos components with reactive state management and event handlers. The Skill supports scaffolding components with optional props, variants, and children for dynamic UI interactions.

What build configurations are updated when creating a new Leptos component?▼

When creating a new Leptos component, the Skill updates Cargo.toml and build.rs to include the new component module and its associated CSS files, ensuring proper build system integration.

How do I test a newly generated Leptos component in a demo application?▼

This Skill includes testing guidance within the demo application, allowing you to verify newly generated Leptos components and their reactive state management behavior in a development environment.

Related Skills

Explore More Software Engineering Skills→
adelabdelgawadadelabdelgawad

rust-codebase-scanning

Inspect Rust project structure and generate a style profile from Cargo.toml and source trees.

Community
Advanced
hasnahasna

shadcn-svelte

Provide 36 Tailwind CSS-styled shadcn-svelte components for json-render catalogs.

Official
Intermediate
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
drhazemibclcdrhazemibclc

react

Generate React components with props, hooks, and state management.

Community
Intermediate