skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

r2mo-ui-pageform

Generate Vue/React TypeScript forms from R2MO design specs.

2|1|Updated Nov 20, 2025
Search Tags:#typescript#spec-driven#frontend#validation#forms#ui-design#r2mo
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-pageform
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2mo-ui-pageform
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/docs/skills/r2mo-ui-pageform
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-pageform

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates R2MO design specifications into production-grade frontend forms for data entry, validation, and submission.

Core Features & Use Cases

  • Generate Vue/React + TypeScript form components driven by front-matter attributes like bind, mode, actions, and api_refs.
  • Apply immediate validation, contextual logic, and API bindings to typical create/edit workflows, with patterns such as card, stepper, or modal forms.
  • Real-world use: convert a spec document into a ready-to-integrate form page for data entry and submission.

Quick Start

Provide an R2MO spec document and let the tool generate a Vue/React + TypeScript form with validation and API bindings.

Frequently Asked Questions about r2mo-ui-pageform

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Vue or React forms from design specs?▼

You generate Vue or React forms by providing an R2MO design spec, which the tool transforms into production-grade TypeScript form components with validation, API bindings, and layout patterns like card, stepper, or modal.

What is spec-driven form generation for data entry workflows?▼

Spec-driven form generation extracts field schemas, maps components, applies validation rules, and binds APIs directly from design specifications to produce ready-to-integrate create and edit form pages.

Can I use TypeScript form components for both create and edit workflows?▼

Yes, the tool supports create and edit workflows by binding form fields to front-matter attributes, applying validation rules, and mapping API references for data submission.

How do I bind API references and validation rules to frontend forms?▼

You bind API references and validation rules by defining api_refs and validation attributes in the R2MO spec, which the tool maps to TypeScript form components with immediate validation and contextual logic.

Does this approach work with card, stepper, and modal form layouts?▼

Yes, the tool supports optional layout patterns including card, stepper, and modal forms, applying spec-driven field extraction and component mapping to each layout type.

What's the best way to convert a spec document into a ready-to-integrate data entry form?▼

The best way is to provide a complete R2MO spec document with bind, mode, actions, and api_refs attributes, letting the tool generate a TypeScript form with validation and API bindings for immediate integration.

Related Skills

Explore More Software Engineering Skills→
silentbalanceyhsilentbalanceyh
2

r2mo-ui-pagelist

Generate Vue/React TypeScript list components from R2MO UI spec bindings.

Community
Intermediate
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
jorggerojasjorggerojas
1

schemas

Define and enforce form validations using Yup schemas in React and TypeScript.

Community
Intermediate
uni-helperuni-helper
95

vue

Build Vue 3 interfaces using Composition API components with optional TypeScript support.

Official
Intermediate