Does it automatically update the application menu?

Yes, it provides logic to add ui5-side-navigation-items to the app-shell, ensuring new pages are accessible to users immediately.

Can I use it to create sub-components?

While primarily optimized for 'page' level components with routing, the structural patterns and property declarations can be applied to any custom element in the project.

How does it handle state management?

It utilizes the withStore higher-order component from lit-reatom to link LitElement properties directly to Reatom atoms for reactive updates.

What frameworks does this skill support?

This skill is specifically designed for LitElement, Reatom state management, and the UI5 Web Components ecosystem within the Reatom-UI5-Starter project.

Lit & Reatom Page Architect

Name: Lit & Reatom Page Architect
Author: blikblum

byblikblum

•

Design Tools

Generates and maintains standardized frontend page components using LitElement and Reatom state management.

About

This skill provides a comprehensive framework for scaffolding and updating page components within the Reatom UI5 starter ecosystem. It automates the creation of LitElement classes, integrates Reatom atoms for reactive state management, and ensures consistent styling using Bootstrap helpers. Beyond component creation, it guides developers through routing configuration, Storybook story setup, and task-based event handling, ensuring all new features adhere to established architectural patterns and best practices.

Key Features

Seamlessly integrate Reatom state management via store-backed properties
Automate Storybook story generation for visual testing and documentation
Configure application routing and navigation menu integration
Scaffold LitElement page components with standardized file structures
1 GitHub stars
Implement standardized DOM task patterns for service-layer communication

Use Cases

Scaffolding new feature pages with dedicated routes and navigation items
Creating Storybook documentation for individual page views
Updating existing pages to include reactive state from Reatom atoms

About

Key Features

Seamlessly integrate Reatom state management via store-backed properties
Automate Storybook story generation for visual testing and documentation
Configure application routing and navigation menu integration
Scaffold LitElement page components with standardized file structures
1 GitHub stars
Implement standardized DOM task patterns for service-layer communication

Use Cases

Scaffolding new feature pages with dedicated routes and navigation items
Creating Storybook documentation for individual page views
Updating existing pages to include reactive state from Reatom atoms