skills.rest
ahtavarasmus
ahtavarasmusCOMMUNITY
Explore all skills by this author →
Website𝕏@ahtavarasm_usGitHub

lightfriend-add-frontend-page

Scaffold new Yew frontend pages with standardized modules, routes, and navigation.

77|10|Updated Feb 1, 2025
Search Tags:#frontend#routing#rust#webassembly#module#yew
One-click install
npx skills add https://github.com/ahtavarasmus/lightfriend --skill lightfriend-add-frontend-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lightfriend-add-frontend-page
Source: https://github.com/ahtavarasmus/lightfriend/tree/main/.claude/skills/lightfriend-add-frontend-page
Command: npx skills add https://github.com/ahtavarasmus/lightfriend --skill lightfriend-add-frontend-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adding new pages to the Lightfriend Yew frontend requires repetitive boilerplate and careful wiring to routing, module declarations, and navigation, slowing UI iteration and increasing the risk of inconsistencies.

Core Features & Use Cases

  • Clear, repeatable steps to scaffold a new frontend page with a consistent structure (page module, route, switch, and optional navigation).
  • Reduces cognitive load by providing concrete code patterns and integration points for Yew routes and components.
  • Use Case: A developer adds a new page named "Profile" and wires it into main.rs, updates the ROUTE enum, and tests the route in trunk serve.

Quick Start

Create a new page module under frontend/src/pages, register it in main.rs, and run trunk serve to verify.

Frequently Asked Questions about lightfriend-add-frontend-page

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

FAQPage Schema
How do I add a new page to a Yew frontend project?▼

To add a new Yew frontend page, you create a module under pages, register a Route variant, add a switch case in main.rs, and optionally wire navigation hooks.

What boilerplate is required for Yew routing when creating a page?▼

Yew routing requires a new page module, a Route enum variant, and a corresponding switch case in main.rs to map the route to the component.

How do I structure frontend modules in Rust WebAssembly applications?▼

Structure frontend modules by placing new page components in a dedicated pages directory, then declaring the module and wiring it into the central routing switch.

Does adding a Yew page require manual navigation integration?▼

Navigation integration is optional when adding a Yew page, but standardizing the page module, route variant, and switch case is required for routing to function.

How do I test a newly added route in a Yew and Trunk project?▼

Test a newly added Yew route by running trunk serve to compile the WebAssembly module and verify the page renders correctly in the browser.

Related Skills

Explore More Software Engineering Skills→
ewe-studiosewe-studios
1

Rust Directory and Configuration

Set up Rust toolchains, Cargo configurations, and project directory structures.

Official
Advanced
AndreHogbergAndreHogberg
4

render-info

Read RendererInfo.IsInteractive and RendererInfo.Name in Blazor Razor components to adapt UI.

Community
Basic
randoneeringrandoneering

building-streamlit-multipage-apps

Build multi-page Streamlit apps with centralized navigation and per-page modules.

Community
Intermediate
yardenshohamyardenshoham

htmx

Explain htmx attributes for server-rendered HTML interactivity.

Community
Advanced