Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Scaffolds React components that render FOSMVVM ViewModels following the ViewModelView pattern. Generates test files first, then implementation files, using the viewModelComponent() wrapper and intent-based navigation. Components stay as thin rendering layers with no business logic or HTTP calls.
Enforces the ViewModelView pattern consistently across a team, preventing common mistakes like fetch() calls in components or mismatched filenames that break discoverability.
When to use it
- Generating a form component with validation for a FOSMVVM app
- Scaffolding a list view that composes child components via .bind()
- Creating display-only cards from ViewModel properties
- Migrating Leaf templates to React while preserving ViewModel alignment
- Adding error ViewModel handling to an existing component
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Generate a TaskListView component that renders a TaskListViewModel with empty state and child TaskCard bindings
- 1Identifies component category as list type from conversation context
- 2Generates TaskListView.test.js with tests for empty state, populated list, and child binding — tests fail at this stage
- 3Generates TaskListView.jsx using FOSMVVM.viewModelComponent() wrapper with isEmpty check and TaskCard.bind() calls
- 4Verifies both files exist and component accesses FOSMVVM from global namespace
TaskListView.test.js and TaskListView.jsx written to src/components/Tasks/, ready for npm test