form-design
Form Design
This skill covers form UX patterns — field types, label placement, multi-step wizards, layout grouping, and data collection best practices.
Use-When
This skill activates when:
- Agent builds forms (login, signup, settings)
- Agent creates multi-step flows or wizards
- Agent designs data collection interfaces
- Agent improves existing form conversion
- Agent groups related fields
Core Rules
- ALWAYS use visible labels (never placeholder-only)
- ALWAYS group related fields into sections
- ALWAYS indicate required fields visually and programmatically
- ALWAYS inline validate after blur, not on every keystroke
More from moderndegree/agent-skills
design-systems
Design tokens, spacing scales, color systems, and typography for building consistent UIs. Use when creating design systems, theming, or establishing UI foundations.
8motion-animation
Motion design principles, when to animate, transitions, and accessibility. Use when adding animations, micro-interactions, or ensuring accessibility for motion.
6dialogs-modals
Modal and dialog patterns, confirmations, destructive actions, and focus management. Use when building modals, dialogs, or confirmation dialogs.
6a11y-best-practices
Comprehensive accessibility patterns for building, testing, and fixing accessible interfaces. Use when building UI components, forms, pages, or auditing code for accessibility issues.
5notifications-feedback
Toast notifications, alerts, feedback messages, and their timing. Use when adding user feedback, success messages, or alerts.
5shadcn-best-practices
Best practices for working with shadcn/ui components, imports, theming, and forms. Use when building UI with shadcn, adding components, configuring theming, or creating forms.
5