collect-user-input

Builds and validates Blazor forms across SSR and interactive render modes.

Updated Jul 20, 2026
One-click install
npx skills add https://github.com/Netcodr81/kinetic-reports --skill collect-user-input-netcodr81
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: collect-user-input
Source: https://github.com/Netcodr81/kinetic-reports/tree/main/.github/skills/collect-user-input
Command: npx skills add https://github.com/Netcodr81/kinetic-reports --skill collect-user-input-netcodr81

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building forms in Blazor is confusing because the correct pattern depends on the app's interactivity mode — Static SSR requires FormName and SupplyParameterFromForm, while interactive modes use @bind-Value, and mixing them up causes silent failures like null models, double submissions, or ignored validation. ## Core Features & Use Cases - Mode-Aware Form Patterns: Provides the correct EditForm setup for Static SSR, Server, WebAssembly, and Auto render modes, including FormName, SupplyParameterFromForm, and antiforgery handling. - Validation Guidance: Covers DataAnnotationsValidator, per-field ValidationMessage, custom validator components for server-side business rules, and custom CSS class providers for styling validation states. - Interactive Input Handling: Shows @bind:after reactions, real-time search filtering with @oninput, file uploads via InputFile, and double-submission prevention. - Use Case: You need to add a registration form with email uniqueness validation to a Blazor page using per-page interactivity — this Skill gives you the exact EditForm, validator component, and SSR fallback pattern that works. ## Quick Start Ask the AI to add a validated contact form with name, email, and a file upload to your Blazor page, respecting the interactivity mode defined in AGENTS.md.

Frequently Asked Questions about collect-user-input

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

FAQPage Schema
How do I create a form in Blazor with validation?▼

Use EditForm with a Model, add DataAnnotationsValidator inside it, and define validation attributes like Required and StringLength on your model class. Handle submission with OnValidSubmit and display errors with ValidationSummary or per-field ValidationMessage components.

How to handle form submission in Blazor Static SSR?▼

In Static SSR, decorate the model property with SupplyParameterFromForm, give the EditForm a unique FormName, and initialize the model with ??= in OnInitialized. Do not use @bind or @oninput since they require interactivity.

Why is my Blazor form model null on page load?▼

The SupplyParameterFromForm property is null on GET requests and only populated on POST. Initialize it in OnInitialized with the ??= operator so the form has a model on first render while preserving posted values on submit.

Can I use InputFile for uploads in Blazor Server-Side Rendering?▼

No, InputFile only works in interactive render modes (Server, WebAssembly, or Auto), not in Static SSR. In interactive Server mode, call OpenReadStream with maxAllowedSize to exceed the default SignalR message size limit.

Why is Blazor form validation not working with data annotations?▼

Validation attributes are silently ignored unless you add the DataAnnotationsValidator component inside the EditForm. Also confirm you are not setting both Model and EditContext on the same EditForm, which is not allowed.

How do I validate a form field against server data in Blazor?▼

Create a custom validator component that uses ValidationMessageStore and the cascading EditContext to add errors after an async server call. Call DisplayErrors with a dictionary of field names and messages, then NotifyValidationStateChanged updates the UI.