ui-ux-design_skill

Overview

This skill provides UI/UX design patterns and best practices tailored for a DevOps learning management system (LMS). It covers color, typography, spacing, component patterns, responsive behavior, accessibility, and page layouts to create consistent, usable learning experiences. Use it to accelerate design decisions and keep interfaces coherent across lessons, dashboards, and progress views.

How this skill works

I inspect page goals (dashboard, lesson, progress, quiz) and recommend concrete patterns: layouts, card structures, sidebar behavior, mobile drawer patterns, and progress visualizations. I map states (empty, loading, error, completed) to visual treatments and accessibility annotations, and suggest component interactions, focus states, and micro-animations for clarity. Implementation guidance is framed around Vue components and CSS utility conventions.

When to use it

• Designing dashboards, lesson pages, quizzes, or progress screens
• Creating or refining navigation and sidebar flows for courses
• Building responsive layouts that adapt from mobile to desktop
• Implementing accessibility features like ARIA and keyboard focus
• Designing progress indicators, badges, and completion states

Best practices

• Use a consistent dark-mode palette and semantic tokens for backgrounds, text, accents, and borders
• Apply a clear typography scale and spacing system to maintain hierarchy across pages
• Make interactive elements visibly focusable and provide screen-reader labels for controls
• Prefer progressive disclosure: collapse long content, use accordions for phase details
• Design predictable state patterns: success/warning/error treatments and clear retry or empty-state actions

Example use cases

• Dashboard home: hero progress bar, phase cards in a responsive grid, CTA to continue learning
• Lesson page: persistent sidebar for navigation, breadcrumb trail, clear mark-complete CTA, and collapsible quiz
• Progress page: stats cards plus accordion per phase showing granular completion percentages
• Mobile: hide sidebar by default, expose a drawer triggered by a menu button, and keep a single-column grid
• Quiz UI: selectable option cards with clear selection states and next/previous navigation