Web UI Design
@dasien/remotecredentialrequestpoc-web-ui-design
v1.0.0•Today
Design responsive web interfaces using modern UX principles, accessibility standards, and mobile-first approaches
prpm install @dasien/remotecredentialrequestpoc-web-ui-design%0A5.%20Ensure%20color%20contrast%20and%20keyboard%20navigation%0A6.%20Provide%20loading%20states%20and%20error%20feedback%0A%0A%23%23%20Example%0A**Context**%3A%20User%20profile%20page%0A%60%60%60%60html%0A%3C!--%20Mobile-first%20responsive%20design%20--%3E%0A%3Cdiv%20class%3D%22profile-container%22%3E%0A%20%20%3Cheader%20class%3D%22profile-header%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22avatar.jpg%22%20alt%3D%22User%20avatar%22%20class%3D%22avatar%22%3E%0A%20%20%20%20%3Ch1%3EJohn%20Doe%3C%2Fh1%3E%0A%20%20%3C%2Fheader%3E%0A%20%20%0A%20%20%3Csection%20class%3D%22profile-info%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22info-grid%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22info-item%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3EEmail%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3Ejohn%40example.com%3C%2Fspan%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22info-item%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3ERole%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3EDeveloper%3C%2Fspan%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fsection%3E%0A%20%20%0A%20%20%3Cfooter%20class%3D%22profile-actions%22%3E%0A%20%20%20%20%3Cbutton%20class%3D%22btn-primary%22%3EEdit%20Profile%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%20class%3D%22btn-secondary%22%3EChange%20Password%3C%2Fbutton%3E%0A%20%20%3C%2Ffooter%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.profile-container%20%7B%0A%20%20max-width%3A%20800px%3B%0A%20%20margin%3A%200%20auto%3B%0A%20%20padding%3A%201rem%3B%0A%7D%0A%0A.info-grid%20%7B%0A%20%20display%3A%20grid%3B%0A%20%20grid-template-columns%3A%20repeat(auto-fit%2C%20minmax(250px%2C%201fr))%3B%0A%20%20gap%3A%201rem%3B%0A%7D%0A%0A%40media%20(max-width%3A%20768px)%20%7B%0A%20%20.info-grid%20%7B%20grid-template-columns%3A%201fr%3B%20%7D%0A%7D%0A%3C%2Fstyle%3E%0A%60%60%60%60%0A%0A%23%23%20Best%20Practices%0A-%20%E2%9C%85%20Mobile-first%20responsive%20design%0A-%20%E2%9C%85%20Semantic%20HTML%20elements%20(header%2C%20nav%2C%20main%2C%20footer)%0A-%20%E2%9C%85%20Accessible%20forms%20with%20labels%20and%20ARIA%20attributes%0A-%20%E2%9C%85%20Loading%20states%20and%20error%20messages%0A-%20%E2%9D%8C%20Avoid%3A%20Fixed%20pixel%20widths%0A-%20%E2%9D%8C%20Avoid%3A%20Relying%20only%20on%20color%20for%20information){kind=link}
%0A5.%20Ensure%20color%20contrast%20and%20keyboard%20navigation%0A6.%20Provide%20loading%20states%20and%20error%20feedback%0A%0A%23%23%20Example%0A**Context**%3A%20User%20profile%20page%0A%60%60%60%60html%0A%3C!--%20Mobile-first%20responsive%20design%20--%3E%0A%3Cdiv%20class%3D%22profile-container%22%3E%0A%20%20%3Cheader%20class%3D%22profile-header%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22avatar.jpg%22%20alt%3D%22User%20avatar%22%20class%3D%22avatar%22%3E%0A%20%20%20%20%3Ch1%3EJohn%20Doe%3C%2Fh1%3E%0A%20%20%3C%2Fheader%3E%0A%20%20%0A%20%20%3Csection%20class%3D%22profile-info%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22info-grid%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22info-item%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3EEmail%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3Ejohn%40example.com%3C%2Fspan%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22info-item%22%3E%0A%20%20%20%20%20%20%20%20%3Clabel%3ERole%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cspan%3EDeveloper%3C%2Fspan%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fsection%3E%0A%20%20%0A%20%20%3Cfooter%20class%3D%22profile-actions%22%3E%0A%20%20%20%20%3Cbutton%20class%3D%22btn-primary%22%3EEdit%20Profile%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%20class%3D%22btn-secondary%22%3EChange%20Password%3C%2Fbutton%3E%0A%20%20%3C%2Ffooter%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A.profile-container%20%7B%0A%20%20max-width%3A%20800px%3B%0A%20%20margin%3A%200%20auto%3B%0A%20%20padding%3A%201rem%3B%0A%7D%0A%0A.info-grid%20%7B%0A%20%20display%3A%20grid%3B%0A%20%20grid-template-columns%3A%20repeat(auto-fit%2C%20minmax(250px%2C%201fr))%3B%0A%20%20gap%3A%201rem%3B%0A%7D%0A%0A%40media%20(max-width%3A%20768px)%20%7B%0A%20%20.info-grid%20%7B%20grid-template-columns%3A%201fr%3B%20%7D%0A%7D%0A%3C%2Fstyle%3E%0A%60%60%60%60%0A%0A%23%23%20Best%20Practices%0A-%20%E2%9C%85%20Mobile-first%20responsive%20design%0A-%20%E2%9C%85%20Semantic%20HTML%20elements%20(header%2C%20nav%2C%20main%2C%20footer)%0A-%20%E2%9C%85%20Accessible%20forms%20with%20labels%20and%20ARIA%20attributes%0A-%20%E2%9C%85%20Loading%20states%20and%20error%20messages%0A-%20%E2%9D%8C%20Avoid%3A%20Fixed%20pixel%20widths%0A-%20%E2%9D%8C%20Avoid%3A%20Relying%20only%20on%20color%20for%20information){kind=link}
0 total downloads
💡 Suggested Test Inputs
Loading suggested inputs...
🎯 Community Test Results
Loading results...
📦 Package Info
- Format
- claude
- Type
- skill
- Category
- web-development
- Latest Version
- 1.0.0
- Total Versions
- 1
🔗 Links
📋 Latest Version Details
- Version
- 1.0.0
- Published
- November 11, 2025
- Package Size
- 1.22 KB