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

add-mosaic-component-to-demo

Add component demonstrations to the Mosaic demo application with Rust modules and TOML configurations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding new component demonstrations to the Mosaic demo application, ensuring consistent documentation and easy testing.

Core Features & Use Cases

  • Guided Component Integration: Provides a step-by-step process for creating the necessary file structure, Rust modules, and TOML configuration for a new component demo.
  • Automated Route Generation: Leverages macros to automatically generate routes and pages for new component demos, reducing manual setup.
  • Use Case: A developer has just finished creating a new Card component in the Mosaic library and needs to add a demo page to the mosaic-demo application. This Skill guides them through creating the src/components/card/ directory, component.toml, and updating app.rs for routing.

Quick Start

Follow the step-by-step guide to add a new component demo to the Mosaic application.

Frequently Asked Questions about add-mosaic-component-to-demo

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

FAQPage Schema
How do I add a new component demo to a Rust web application?▼

To add a new component demo, you create a specific directory structure, add Rust modules, configure the TOML file, and update the app.rs routing to serve the new demo page.

What is the best way to generate routes for new Leptos component pages?▼

Generating routes for Leptos component pages is best handled by using the demo_macro::generate_component_pages!() macro, which automates route creation and reduces manual routing setup.

How do I configure TOML files for a Mosaic component demonstration?▼

Configuring a TOML file for a Mosaic component demonstration involves creating a component.toml file inside the component's specific directory to define its metadata and demo properties.

Do I need to manually update app.rs routing for every new component demo?▼

You do not need to manually update app.rs routing for every component demo because the demo_macro::generate_component_pages!() macro automates the route generation process for new pages.

What directory structure is required for adding a component to the Mosaic demo app?▼

The required directory structure for adding a component to the Mosaic demo app involves creating a src/components/[component_name]/ directory to house the Rust modules and configuration files.

Related Skills

Explore More Software Engineering Skills→
dasch-swissdasch-swiss
2

create-mosaic-component

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

Official
Intermediate
alamenaialamenai
243

check

Validate new map components for required outputs and wiring.

Community
Intermediate
adelabdelgawadadelabdelgawad

leptos-routing

Configure Leptos router patterns for typed paths, nested routes, and Axum mounting.

Community
Intermediate
ofajsofajs
754

ofajs-docs

Explain ofa.js framework usage in pure HTML/ES module environments.

Official
Advanced