fosmvvm-react-view-generator_skill

Overview

This skill generates React components that render FOSMVVM ViewModels and scaffolds a ViewModelView pattern with tests-first workflow. It creates a Jest + React Testing Library test file and a TypeScript-ready JSX component that uses the FOSMVVM global utilities, loading states, error ViewModel handling, and .bind() child bindings. The output enforces naming and placement conventions so components are discoverable and maintainable.

How this skill works

The generator inspects conversation context to determine the ViewModel shape, server request details, and component category (display-only, interactive, list, form). It produces a failing .test.js file first, then the implementation .jsx file that wraps the render function with FOSMVVM.viewModelComponent() and references FOSMVVM globals (Link, operations, etc.). Tests cover success and error ViewModels plus interactions or form validation when applicable.

When to use it

• Creating a new React view for an existing FOSMVVM ViewModel
• Scaffolding tests and implementation together following TDD
• Building list views that compose child components with .bind()
• Implementing form views with validation driven by ViewModel
• Migrating template-based views (Leaf/SwiftUI patterns) to React

Best practices

• Name the component file to match the ViewModel (MyFeatureView.jsx in the matching feature folder)
• Keep components thin: render only what the ViewModel provides, no business logic
• Use FOSMVVM.viewModelComponent() and access utilities from the global namespace
• Use navigation intents via FOSMVVM.Link instead of hardcoded URLs
• Handle each error ViewModel explicitly rather than generic error wrappers

Example use cases

• Generate TaskListView with child TaskCard.bind() calls and tests for empty/multiple items
• Create SignInView form component with input state, submission flow, and validation tests
• Scaffold an InfoCard display-only component that renders success and specific error ViewModels
• Produce an ActionCard interactive component with operation calls wired to viewModel.operations
• Convert a Leaf template into a React component that follows FOSMVVM naming and binding patterns