skills.rest
vuralserhat86
vuralserhat86COMMUNITY
Explore all skills by this author →
GitHub

design_patterns

Define visual hierarchy, layering, animation, and white space rules for UI/UX design.

43|11|Updated Dec 27, 2025
Search Tags:#design#design patterns#ui/ux#animation#spacing#visual hierarchy
One-click install
npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-patterns-vuralserhat86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design_patterns
Source: https://github.com/vuralserhat86/antigravity-agentic-skills/tree/main/skills/design_patterns
Command: npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-patterns-vuralserhat86

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidelines and scales for visual hierarchy, layering, and animation, ensuring a consistent and intuitive user interface.

Core Features & Use Cases

  • Visual Hierarchy: Defines z-index scales and shadow elevations for clear layering.
  • Animation & Transitions: Offers duration scales and easing functions for smooth user feedback.
  • White Space Rules: Provides guidance on content density and optimal reading widths.
  • Use Case: Ensure all interactive elements have clear focus states and that modals are layered correctly above dropdowns using z-index.

Quick Start

Apply the design patterns skill to establish visual hierarchy and spacing rules for the new dashboard components.

Frequently Asked Questions about design_patterns

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

FAQPage Schema
How do I establish consistent visual hierarchy and z-index scales for UI components?▼

Establish visual hierarchy by applying defined z-index scales and shadow elevations to layer elements correctly. This ensures modals appear above dropdowns and interactive elements maintain clear focus states for accessibility.

What are the best guidelines for UI animation durations and easing functions?▼

UI animation guidelines provide specific duration scales and easing functions to create smooth user feedback. These rules ensure transitions feel natural and consistent across the entire interface.

How do I optimize white space and content density for reading width in UI/UX design?▼

Optimize white space by applying rules for content density and reading width limits. This ensures text remains legible and the interface maintains a balanced visual structure.

Does this approach support accessibility requirements for focus state definitions?▼

Yes, the approach supports accessibility by defining clear focus states for all interactive elements. This ensures users navigating via keyboard or screen readers receive proper visual feedback.

Can I use these design patterns to fix layering issues with modals and dropdowns?▼

Yes, you can fix layering issues by applying the provided z-index scales. These scales ensure modals are layered correctly above dropdowns and other interactive elements.

Related Skills

Explore More Design & Creative Skills→
RussianLioNRussianLioN
1

ui-design-system

Generate design system tokens for colors, typography, spacing, and more.

Community
Intermediate
chaitinchaitin
5

visual-design-foundations

Define typography scales, spacing tokens, and semantic color tokens for design systems.

Official
Intermediate
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate
dylantarredylantarre
38

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community
Advanced