skills.rest
julianoczkowski
julianoczkowskiCOMMUNITY
Explore all skills by this author →
GitHub

create-modus-form-component

Scaffold Modus form components with validation and accessible markup in React projects.

3|2|Updated Oct 3, 2025
Search Tags:#typescript#accessibility#react#components#scaffolding#form#modus
One-click install
npx skills add https://github.com/julianoczkowski/create-trimble-app --skill create-modus-form-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-modus-form-component
Source: https://github.com/julianoczkowski/create-trimble-app/tree/main/templates/react/.cursor/skills/create-modus-form-component
Command: npx skills add https://github.com/julianoczkowski/create-trimble-app --skill create-modus-form-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized, accessible scaffold for Modus form components, reducing boilerplate while ensuring consistent integration patterns across React projects.

Core Features & Use Cases

  • Pre-wired Modus inputs (ModusTextInput, ModusCheckbox, ModusButton, ModusInputFeedback, ModusInputLabel) with proper event handling and accessibility
  • Built-in validation patterns and feedback to ensure real-time and post-submit validation consistency
  • Use Case: rapidly scaffold forms for user registration, contact forms, or multi-step workflows with consistent UI and behavior

Quick Start

Create a new Modus form component scaffold in your React project and wire it to state, validation, and submission

Frequently Asked Questions about create-modus-form-component

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

FAQPage Schema
How do I scaffold accessible Modus form components in React?▼

Scaffolding accessible Modus form components in React is automated by wiring ModusTextInput, ModusCheckbox, and ModusInputLabel with proper event handling and accessible markup. This ensures consistent component usage and reduces boilerplate across generated forms.

What is the best way to handle validation and feedback in Modus forms?▼

Handling validation and feedback in Modus forms is best achieved using built-in validation patterns and ModusInputFeedback. This ensures real-time and post-submit validation consistency across user registration, contact forms, or multi-step workflows.

Can I use Modus form components for multi-step workflows in React?▼

Yes, you can use Modus form components for multi-step workflows in React. The scaffolding covers text input, checkbox, label, validation, and submission patterns, providing consistent UI and behavior across complex form workflows.

Does scaffolding Modus form components require manual accessibility wiring?▼

Scaffolding Modus form components does not require manual accessibility wiring. The generated code automatically meets requirements for accessible markup, ensuring Modus inputs are pre-wired with proper labels and feedback for screen readers.

What's the difference between manually building React forms and using a Modus form scaffold?▼

Building React forms manually introduces boilerplate and inconsistent accessibility, whereas using a Modus form scaffold standardizes component usage. The scaffold pre-wires Modus inputs, event handling conventions, and validation patterns to ensure reliable markup.

Related Skills

Explore More Software Engineering Skills→
julianoczkowskijulianoczkowski
3

set-up-modus-event-listeners

Set up and clean up Modus web component event listeners in React.

Community
Intermediate
openeuler-mirroropeneuler-mirror
3

dev-browser

Automate browser tasks with persistent state using Playwright and Node.js.

Official
Advanced
diegocamara89diegocamara89
3

frontend-patterns

Provide React and Next.js frontend patterns for scalable, accessible interfaces.

Community
Intermediate
julianoczkowskijulianoczkowski
3

modus-frontend

Design Modus 2.0 compliant frontend interfaces with Tailwind CSS and web components.

Community
Advanced