skills.rest
pascallammers
pascallammersCOMMUNITY
Explore all skills by this author →
GitHub

design

Guide UI/UX design with design systems, accessibility, and responsive principles.

1|Updated Sep 26, 2025
Search Tags:#design#ui#accessibility#responsive design#design system#ux
One-click install
npx skills add https://github.com/pascallammers/mylo-travel-concierge-v2 --skill design-pascallammers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/pascallammers/mylo-travel-concierge-v2/tree/main/.factory/skills/design
Command: npx skills add https://github.com/pascallammers/mylo-travel-concierge-v2 --skill design-pascallammers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for creating user interfaces that are not only visually appealing but also highly accessible and maintainable.

Core Features & Use Cases

  • Design System Foundations: Establishes principles for design tokens, consistent spacing, and typography.
  • Component Patterns: Offers examples for common UI elements like buttons, forms, cards, and modals.
  • Accessibility Best Practices: Details requirements for semantic HTML, ARIA roles, keyboard navigation, and color contrast.
  • Responsive Design: Guides on mobile-first strategies, container queries, and touch targets.
  • Use Case: When designing a new feature, consult this Skill to ensure all components adhere to accessibility standards and align with the established design system, preventing common UI/UX pitfalls.

Quick Start

Review the core principles for user-centered design and consistency.

Frequently Asked Questions about design

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

FAQPage Schema
How do I design accessible UI components with proper ARIA attributes?▼

To design accessible UI components, implement semantic HTML alongside ARIA roles and keyboard navigation. This ensures user interfaces remain highly accessible and maintainable while meeting strict color contrast requirements.

What are design tokens and how do they establish design system foundations?▼

Design tokens are foundational variables that establish consistent spacing and typography across a design system. They provide a centralized reference to maintain visual alignment and structural consistency throughout all UI components.

How do I apply responsive design principles using a mobile-first strategy?▼

Apply responsive design by adopting a mobile-first strategy that progressively enhances layouts using container queries. This approach ensures interfaces adapt smoothly while maintaining appropriate touch targets for mobile users.

Can I use this guide for building common UI element patterns like forms and modals?▼

Yes, you can use this guide for building common UI elements like buttons, forms, cards, and modals. It offers component patterns that align with established design systems to prevent common UI/UX pitfalls.

What is the best way to ensure my new feature adheres to accessibility standards?▼

The best way to ensure accessibility compliance is to consult established guidelines during feature design. This verifies that all components meet semantic HTML, keyboard navigation, and color contrast standards before implementation.

Why do my interfaces fail keyboard navigation and color contrast checks?▼

Interfaces fail keyboard navigation and color contrast checks when they lack semantic HTML and proper ARIA roles. Reviewing accessibility best practices helps identify and resolve these structural and visual compliance gaps.

Related Skills

Explore More Design & Creative Skills→
TheSoftwareHouseTheSoftwareHouse
282

frontend-implementation

Implement accessible UI components using design tokens and semantic HTML.

Official
Advanced
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate
thesaifalitaithesaifalitai
8

uiux-design

Convert design concepts into accessible, responsive Tailwind CSS components.

Community
Advanced
fusenginefusengine
22

validating-accessibility

Validate digital interfaces against WCAG 2.2 Level AA accessibility standards.

Community
Intermediate