A specialized AI generator that scaffolds React components and test suites based on the FOSMVVM ViewModelView architecture.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install fosmvvm-react-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-react-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 React View Generator?
The FOSMVVM React View Generator is a technical utility designed for Openclaw Skills to facilitate the creation of thin React rendering layers. It follows the core principle that components should not transform or compute data; instead, they render what the ViewModel provides. By enforcing a strict alignment between ViewModel names and component filenames, this tool ensures high discoverability and maintenance standards across large-scale projects.
This skill is optimized for modern web development workflows where business logic is decoupled from the UI. It integrates seamlessly with WASM bridges and server-request architectures, allowing developers to use Openclaw Skills to automate the boilerplate of building interactive, form-heavy, or list-based user interfaces while maintaining strict architectural patterns.
FOSMVVM React View Generator Use Cases
- Creating new React views for existing FOSMVVM ViewModels
- Migrating legacy Leaf or SwiftUI templates into a React-based frontend
- Scaffolding complex forms with built-in validation and error state handling
- Building list views that compose multiple child components via server requests
- Rapid prototyping of UI modules during the implementation phase of a development plan
How FOSMVVM React View Generator Works
- The agent analyzes the conversation context to identify the required ViewModel structure and ServerRequest details.
- It generates a Jest and React Testing Library .test.js file first to establish a Test-Driven Development (TDD) cycle.
- The skill then generates the .jsx implementation file, wrapping the component in the FOSMVVM.viewModelComponent() utility.
- It configures the component to handle both success states and specialized Error ViewModels.
- The agent verifies the presence of both files and confirms they adhere to project naming conventions.
FOSMVVM React View Generator Setup
To activate the generator within Openclaw Skills, ensure your project is configured with the FOSMVVM global namespace. Invoke the skill with the following command:
/fosmvvm-react-view-generator
Prerequisites include having the corresponding ViewModel and ServerRequest definitions available in the current conversation context or provided via specification files.
FOSMVVM React View Generator Data Schema & Taxonomy
The skill organizes files within a feature-based directory structure to maximize modularity:
| Element | Format | Target Path |
|---|---|---|
| React View | {ViewName}View.jsx |
src/components/{Feature}/ |
| Test Suite | {ViewName}View.test.js |
src/components/{Feature}/ |
| Prop Structure | { viewModel } |
Component Props |
| Navigation | intent objects |
FOSMVVM.Link component |
| Server Actions | .bind() pattern |
Component Methods |
FOSMVVM React View Generator Advanced Features
- TDD-centric workflow that generates failing tests before implementation code
- Support for Navigation Intents to replace hardcoded URL paths for platform independence
- Automated handling of multiple Error ViewModel types including NotFound and Validation errors
- Intelligent component category detection for Display-only, Interactive, List, and Form types
- Zero-import architecture leveraging global FOSMVVM utilities for streamlined component code
SKILL.md
Loading
Related Openclaw Skills
FOSMVVM Leaf View Generator
An AI skill for generating localized Leaf templates and HTML-over-the-wire fragments that perfectly align with FOSMVVM ViewModels.
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.
FOSMVVM ServerRequest Generator
An AI coding agent skill designed to scaffold type-safe ServerRequest protocols and server-side controllers for standardized FOSMVVM communication.
FOSMVVM ServerRequest Test Generator
An automated generator for typed ServerRequest tests using the VaporTesting infrastructure to validate API logic and localization.
Featured*
