design-and-user-experience-guidelines
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
Best use case
design-and-user-experience-guidelines is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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
Teams using design-and-user-experience-guidelines should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/design-and-user-experience-guidelines/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How design-and-user-experience-guidelines Compares
| Feature / Agent | design-and-user-experience-guidelines | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.
Related Skills
game-design
Game design principles. GDD structure, balancing, player psychology, progression.
frontend-design
Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.
figma-design
Access Figma designs, extract design systems, and retrieve component specifications. Use when implementing UI from Figma mockups, extracting design tokens, or analyzing design files.
faion-ui-designer
UI design: wireframes, prototypes, design systems, visual design.
event-store-design
Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implementing event persistence patterns.
epic-ui-guidelines
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
detect-design
Design system detection with drift findings and evidence blocks. Use when auditing design system consistency.
design_responsive
Breakpoints, fluid typography, container queries ve modern CSS features.
design
Design consistency and visual styling for the Svelte client UI. Use when creating or modifying visual elements, colors, typography, buttons, inputs, or cards.
Design Undo/Redo Systems
CREATE comprehensive undo/redo systems with Command Pattern. Design state management for complex applications with canvas interactions, multiple stores, and user actions. Use when building new undo/redo functionality from scratch.
design-system
design system with Tailwind v4.0, accessibility patterns, and project-specific UI/UX rules. Use for all KKOOKK frontend development.
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.