fosmvvm-leaf-view-generator

What This Skill Does

The fosmvvm-leaf-view-generator is a specialized scaffolding tool designed to streamline the creation of Leaf templates for FOSMVVM-based WebApps. It enforces the Model-View-ViewModel architecture by ensuring strict naming alignment between Swift ViewModels and their corresponding Leaf HTML templates. By automating the generation of both full-page layouts and partial fragment templates, it allows developers to focus on the structure of their UI rather than the boilerplate required for HTML-over-the-wire state management.

Installation

To integrate this skill into your environment, run the following command within your OpenClaw CLI: clawhub install openclaw/skills/skills/foscomputerservices/fosmvvm-leaf-view-generator

Use Cases

This skill is essential for developers working on Swift-based web applications using Vapor and FOSMVVM.

1. Full-Page Rendering: Quickly scaffold new navigational destinations that inherit from your base application layout.
2. Component Development: Generate atomic fragment templates like cards, buttons, or modals that are designed for DOM swapping via HTML-over-the-wire updates.
3. Architectural Enforcement: Maintain strict consistency between your ViewModel objects and the rendering layer to ensure long-term maintainability.

Example Prompts

1. "Generate a full-page Leaf template for the UserProfileViewModel located in the User feature folder."
2. "Create a fragment template for the ProductCardViewModel that includes the necessary data-attributes for dynamic state updates."
3. "Scaffold a new Leaf view for OrderSummaryViewModel and ensure it adheres to the FOSMVVM file structure standards."

Tips & Limitations

• Alignment is Key: Always ensure your ViewModel name precisely matches the Leaf file name. The generator relies on this to maintain architectural integrity.
• Fragment Strategy: When creating fragments, avoid using #extend tags, as these are meant for full-page structures. Fragments should contain a single root node for seamless JS replacement.
• Scope: This skill is specifically designed for the FOSMVVM ecosystem. It will not generate standard HTML or generic layouts outside of the FOSMVVM architecture requirements. Ensure your project structure matches the documented Sources/ directory pattern before running the generator.