skills.rest
ReubenFrimpong
ReubenFrimpongCOMMUNITY
Explore all skills by this author →
Website𝕏@Reuben_TheCoderGitHub

ux

Design mobile-first responsive interfaces with theme support and accessibility.

Updated Aug 27, 2026
Search Tags:#theming#ui#accessibility#responsive design#design system#ux
One-click install
npx skills add https://github.com/ReubenFrimpong/past-care-spring --skill ux-reubenfrimpong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux
Source: https://github.com/ReubenFrimpong/past-care-spring/tree/main/.claude/skills/ux
Command: npx skills add https://github.com/ReubenFrimpong/past-care-spring --skill ux-reubenfrimpong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the need for consistent, user-friendly, and accessible interfaces across different devices and themes, ensuring a high-quality user experience for all.

Core Features & Use Cases

  • Responsive Design: Ensures applications look and function well on mobile, tablet, and desktop.
  • Theme Support: Implements seamless switching between light and dark modes.
  • Accessibility: Guides the creation of interfaces usable by everyone, including those with disabilities.
  • Use Case: Implement a mobile-first responsive design for the new member registration form, ensuring it's easy to use on a phone and looks great on a desktop.

Quick Start

Implement mobile-first responsive design for the member profile page.

Frequently Asked Questions about ux

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

FAQPage Schema
How do I implement mobile-first responsive design for a web application?▼

Mobile-first responsive design is implemented by providing comprehensive guidelines and patterns for layout, spacing, and interaction patterns, ensuring interfaces function well across mobile, tablet, and desktop devices.

What's the best way to support light and dark mode theme switching in a UI?▼

Theme support is achieved by applying comprehensive design system patterns that enable seamless switching between light and dark modes, ensuring consistent visual output across different display themes.

How do I ensure my web interface meets WCAG contrast ratios and accessibility standards?▼

Accessibility standards are met by adhering to WCAG contrast ratios and semantic HTML principles, providing specific guidelines for ARIA attributes, focus states, and interfaces usable by everyone.

Can I use semantic HTML and ARIA attributes to fix interaction patterns for disabled users?▼

Yes, you can use semantic HTML and ARIA attributes to establish proper interaction patterns and focus states, ensuring the interface is fully accessible to users with disabilities.

What layout and spacing guidelines should I follow for a member registration form?▼

Layout and spacing guidelines for a member registration form should follow mobile-first responsive design principles, ensuring the form is easy to use on a phone and looks great on a desktop.

Related Skills

Explore More Design & Creative Skills→
bpteambpteam

tailwind-design-system

Define Tailwind v4 design tokens and CVA-driven component primitives.

Community
Advanced
Cissou34730Cissou34730

frontend-design

Create production-grade frontend interfaces with HTML/CSS/JS or React/Vue.

Community
Advanced
darblexdarblex

frontend-design

Provide frontend design guidelines for layouts, theming, and animations using Tailwind CSS and Flowbite.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate