fosmvvm-react-view-generator

What This Skill Does

The fosmvvm-react-view-generator is a specialized developer-tools skill designed to accelerate the creation of React components within the FOSMVVM architectural pattern. It automates the boilerplate associated with the ViewModelView pattern, ensuring that components serve strictly as thin rendering layers that observe and display ViewModel state. By leveraging OpenClaw's contextual awareness, the skill creates corresponding unit tests and React files in a single pass, following a TDD-first workflow that enforces project consistency and naming conventions.

Installation

To integrate this skill into your environment, run the following command within your terminal or OpenClaw interface:

clawhub install openclaw/skills/skills/foscomputerservices/fosmvvm-react-view-generator

Ensure that your project structure adheres to the expected /src/viewmodels and /src/components hierarchy to enable the automated file generation logic to function correctly.

Use Cases

• Rapid Prototyping: Quickly scaffold complex UI views from defined ViewModels without writing manual hooks or loading state boilerplate.
• Architecture Enforcement: Maintain strict adherence to the FOSMVVM pattern by automatically generating code that separates business logic (in ViewModels) from display logic (in React components).
• TDD Compliance: Streamline the developer experience by generating tests before component code, ensuring high test coverage and robust implementations.
• Refactoring: Update component structures based on existing ViewModel changes without manually realigning prop types or binding logic.

Example Prompts

1. "Generate a UserProfileView for the UserProfileViewModel, ensuring it handles loading states and displays the user's avatar and bio."
2. "Create a component for the ProductGridViewModel that includes test files and correctly binds the processRequest action to the search button."
3. "Scaffold the OrderStatusView using the OrderStatusViewModel and include test coverage for the error handling states."

Tips & Limitations

• Naming Conventions: Always ensure your ViewModel files are named consistently with the target component (e.g., OrderViewModel.js and OrderView.jsx). Failure to do so may cause the generator to struggle with identifying the correct target file.
• Thin Components: This skill assumes you are following the FOSMVVM philosophy; avoid injecting complex business logic into the generated React components, as this violates the architecture.
• File System: The skill requires write access to your project directory. Ensure your IDE has the necessary permissions for the tool to create and modify files in the target folders.