Does this skill support mobile responsiveness?

Yes, it includes specific breakpoints and mobile-first patterns like hidden sidebars, drawer menus, and responsive grids to ensure a seamless experience across all devices.

How does this skill help with web accessibility?

It automatically implements best practices for focus states, ARIA labels for screen readers, and semantic landmarks to ensure the interface meets WCAG standards.

What is the primary focus of the LMS UI/UX Design skill?

It provides a standardized design system specifically for Learning Management Systems (LMS), focusing on dark mode aesthetics, accessibility, and educational component patterns.

Which frontend framework are the patterns designed for?

The provided component patterns are optimized for Vue.js and use utility-first CSS classes, making them highly compatible with modern frameworks like Nuxt and Tailwind CSS.

LMS UI/UX Design System

Name: LMS UI/UX Design System
Author: fawzymohamed

byfawzymohamed

0•

Design Tools

Implements consistent dark-mode UI/UX patterns and design system components tailored for educational platforms and Learning Management Systems.

The LMS UI/UX Design skill provides a comprehensive framework for building modern, accessible, and responsive educational interfaces. It features a curated dark-mode design system including color palettes, typography scales, and standardized spacing. Designed specifically for developers working on learning platforms, it offers ready-to-use patterns for complex layouts like lesson sidebars, interactive quiz cards, and progress visualization dashboards. This skill ensures that your Claude-generated code adheres to best practices for accessibility, mobile responsiveness, and fluid user transitions.

Key Features

01Standardized layouts for lesson pages, progress tracking, and dashboards

02Reusable Vue component patterns for quizzes and phase navigation

03Comprehensive dark-mode design system with standardized color palettes

04Mobile-responsive navigation structures and sidebar drawers

050 GitHub stars

06Pre-configured accessibility features including ARIA labels and focus states

Use Cases

01Building responsive, mobile-first dashboards for educational content

02Creating accessible quiz components with consistent styling and transitions

03Designing interactive lesson pages with integrated progress visualization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fawzymohamed/devops ui-ux-design

For use in Claude.ai and ChatGPT

Download Skill