skills.rest
Probably-Group
Probably-GroupOFFICIAL
Explore all skills by this author →
Website𝕏@problynotingGitHub

ui-ux-design

Design secure and accessible UI/UX patterns for interactive forms.

3|1|Updated Dec 3, 2025
Search Tags:#accessibility#responsive design#error handling#ui/ux#secure forms#csrf#aria
One-click install
npx skills add https://github.com/Probably-Group/Dev-AID --skill ui-ux-design-probably-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/Probably-Group/Dev-AID/tree/main/.dev-aid/skills/expert/ui-ux-design
Command: npx skills add https://github.com/Probably-Group/Dev-AID --skill ui-ux-design-probably-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you implement UI/UX patterns that are secure by default, accessible to all users, and consistent across forms and interactive components.

Core Features & Use Cases

  • Secure form interaction patterns: CSRF-safe form submissions, robust input validation guidance, and protection against sensitive-field leakage.
  • Privacy-aware sensitive data handling: prevent dangerous autocomplete behavior and mask sensitive values with safe display practices.
  • Accessibility-first UI behaviors: accessible labels, ARIA attributes, focus/interaction feedback patterns, and safe error messaging that avoids internal details.
  • Use Case: You are building an account settings page with an email update form and a password change form; use this skill to generate the UI rules for secure CSRF tokens, validation messaging, accessible form structure, and safe error handling.

Quick Start

Use the ui-ux-design skill to generate an accessible, CSRF-protected account email update form with secure validation and non-leaky error messages.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I design accessible forms with ARIA labels and secure CSRF tokens?▼

Accessible forms require proper ARIA attributes, clear labels, and CSRF-safe submission patterns. This skill generates UI rules for accessible form structure, secure validation messaging, and non-leaky error handling to protect sensitive inputs while maintaining screen reader compatibility.

What is the best way to handle sensitive input fields and prevent data leakage in UI design?▼

Sensitive input handling requires masking values and preventing dangerous autocomplete behavior. This skill provides privacy-aware display practices and secure form interaction patterns that protect sensitive fields from leakage while maintaining accessible user feedback.

How do I implement non-informative error messages for secure user flows?▼

Non-informative error messages prevent internal detail leakage during form validation. This skill designs safe error messaging patterns that satisfy security requirements while providing accessible UI feedback through ARIA attributes and clear interaction states.

Can I use this skill to generate responsive loading states and interaction design for account settings forms?▼

Yes, this skill generates responsive layouts, loading feedback, and interaction design for sensitive forms like account settings. It applies accessible UI behaviors and secure validation rules to email update and password change flows.

Does this skill provide usability testing guidance for UI/UX patterns?▼

No, this skill focuses on designing secure and accessible UI/UX patterns rather than usability testing. It covers wireframes, interaction design, loading states, responsive layouts, and safe form behavior without providing usability evaluation guidance.

Related Skills

Explore More Design & Creative Skills→
houkehouke

user-flow-design

Map user journeys and define interaction patterns for web and mobile applications.

Community
Basic
svssdevasvssdeva
1

frontend-ui-engineering

Build accessible frontend UIs with WCAG 2.1 AA compliance and design-system adherence.

Community
Advanced
Arnutt-NArnutt-N

accessibility-helper

Provide WCAG-compliant accessibility utilities, components, and hooks for HR-IMS frontends.

Community
Advanced
rbaumierrbaumier
4

frontend

Build responsive React UI components with accessibility and performance patterns.

Community
Advanced