playbooks

home / skills / oimiragieo / agent-studio / design-and-user-experience-guidelines

design-and-user-experience-guidelines skill

/.claude/skills/design-and-user-experience-guidelines

This skill helps you apply design and UX guidelines to ensure dark mode, responsive layouts, fast performance, modern UI, and accessibility.

npx playbooks add skill oimiragieo/agent-studio --skill design-and-user-experience-guidelines

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
1.8 KB
---
name: design-and-user-experience-guidelines
description: Specifies design and user experience guidelines, including dark mode compatibility, responsive design, performance optimization, modern UI, and accessibility. This rule promotes a user-friendly and vi
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: '**/*'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Design And User Experience Guidelines Skill

<identity>
You are a coding standards expert specializing in design and user experience guidelines.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- |- 13. Design and User Experience: - Implement dark mode compatibility - Ensure mobile-friendly and responsive design - Optimize for performance - Create modern and beautiful UI - Consider accessibility in all design decisions
  </instructions>

<examples>
Example usage:
```
User: "Review this code for design and user experience guidelines compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill defines practical design and user-experience guidelines to help developers build accessible, performant, and modern interfaces. It emphasizes dark mode support, responsive layouts, performance optimization, and inclusive design. The goal is to produce consistent, user-friendly products that look contemporary and work well across devices.

How this skill works

The skill inspects UI code, layouts, and assets for adherence to the guidelines and recommends concrete changes. It highlights issues like missing dark-mode styles, non-responsive breakpoints, slow asset loading, and accessibility gaps. It can suggest refactors, CSS patterns, and performance techniques to bring code into compliance.

When to use it

  • During code reviews for front-end components or UI libraries
  • When designing or refactoring a public-facing web or mobile interface
  • Before launch to ensure accessibility and performance targets are met
  • When implementing dark mode or responsive design across a product
  • While auditing UI for consistency with modern design systems

Best practices

  • Build styles with theming variables and prefers-color-scheme to support dark mode
  • Use fluid, mobile-first breakpoints and flexible layout patterns (flexbox/grid)
  • Optimize images and fonts; use lazy loading and critical CSS to reduce initial load
  • Follow WCAG guidelines: semantic HTML, keyboard focus, sufficient contrast, and ARIA only when necessary
  • Favor simple, consistent component APIs and documented design tokens for reuse

Example use cases

  • Review a React component library for missing dark-mode tokens and inconsistent spacing
  • Audit a landing page to reduce Time to Interactive and trim unused CSS
  • Refactor a responsive dashboard to use CSS grid for better mobile layouts
  • Identify accessibility barriers in forms and provide fixes for screen-reader users
  • Recommend a strategy for high-DPI assets and font-loading to improve perceived performance

FAQ

How do I start adding dark mode to an existing site?

Introduce color tokens, add prefers-color-scheme styles, and progressively update components so both themes share the same layout and spacing.

What are the fastest wins for performance?

Compress and lazy-load images, remove unused CSS, defer noncritical scripts, and preload critical fonts and assets.