An AI skill for generating localized Leaf templates and HTML-over-the-wire fragments that perfectly align with FOSMVVM ViewModels.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install fosmvvm-leaf-view-generator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install fosmvvm-leaf-view-generator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is FOSMVVM Leaf View Generator?
The FOSMVVM Leaf View Generator is a specialized tool designed to bridge the gap between Swift ViewModels and web-based user interfaces. By automating the creation of Leaf templates, it ensures that your web views are strictly aligned with their corresponding ViewModels, maintaining architectural consistency across your project. This tool is a core component of Openclaw Skills, helping developers implement the View layer of M-V-VM with precision and speed.
This skill handles the nuances of the FOSMVVM architecture, such as ensuring localized properties render correctly and mapping raw enum values to HTML data attributes for JavaScript interoperability. Whether you are building full-page layouts or lightweight fragments for dynamic DOM updates, this skill streamlines the process while adhering to best practices for maintainability and discoverability.
FOSMVVM Leaf View Generator Use Cases
- Creating full-page templates that extend a base layout for new web features.
- Generating HTML-over-the-wire fragments for partial DOM updates without full page reloads.
- Mapping ViewModel properties to data attributes to facilitate JavaScript event handling.
- Implementing complex loops and conditional rendering logic using Leaf built-in functions.
- Troubleshooting and fixing localization rendering errors in existing templates.
How FOSMVVM Leaf View Generator Works
- The skill analyzes the current conversation context to identify the target ViewModel and its properties.
- It determines if the requested template is a full-page view or a component fragment.
- It maps Swift data types, such as LocalizableString and LocalizableDate, to the appropriate Leaf template syntax.
- The skill generates valid HTML/Leaf code, including necessary data attributes for state management.
- It suggests the correct directory structure to ensure the new template follows the View-ViewModel naming convention.
FOSMVVM Leaf View Generator Setup
To utilize this skill within your AI coding environment, ensure you have the Openclaw Skills framework active. You can invoke the generator using the following command:
/fosmvvm-leaf-view-generator
Prerequisites include having your FOSMVVM ViewModels already defined, as the skill references them to build the corresponding view logic.
FOSMVVM Leaf View Generator Data Schema & Taxonomy
| Component | Description |
|---|---|
| Full-Page Templates | Uses #extend("base") and #export("content") for complete page rendering. |
| Fragment Templates | Lightweight, single-root elements designed for component-level rendering. |
| Data Attributes | Maps raw ViewModel values to data-{entity}-{field} for JS interaction. |
| Localization | Leverages LeafDataRepresentable for automatic translation of localized types. |
| Naming Convention | Strictly matches the ViewModel name (e.g., {Feature}View.leaf). |
FOSMVVM Leaf View Generator Advanced Features
- Support for HTML-over-the-wire patterns with minimal fragment overhead.
- Automatic integration of Leaf loop variables like isFirst, isLast, and index.
- Optimized for shared ViewModels used by both web (Leaf) and native (SwiftUI) clients.
- Advanced handling of @LocalizedSubs for complex, locale-aware string composition.
- Compile-time error handling logic that maps specific server responses to UI Toasts or alerts.
SKILL.md
Loading
Related Openclaw Skills
FOSMVVM Fluent DataModel Generator
A specialized generator for Fluent-backed persistence layers within the FOSMVVM architecture, covering models, migrations, and automated tests.
FOSMVVM Fields Generator
A specialized generator for creating unified FOSMVVM Form Specifications that handle data properties, presentation logic, and multi-platform validation.
X-Deep-Miner
An automated scanning and archiving tool that transforms high-engagement X (Twitter) threads into structured Obsidian notes with expert translation.
Viking Memory
Viking Memory provides AI agents with persistent, long-term semantic memory for recall of user preferences and conversation history.
FOSMVVM React View Generator
A specialized AI generator that scaffolds React components and test suites based on the FOSMVVM ViewModelView architecture.
FOSMVVM ServerRequest Generator
An AI coding agent skill designed to scaffold type-safe ServerRequest protocols and server-side controllers for standardized FOSMVVM communication.
Featured*
