home / skills / shaul1991 / shaul-agents-plugin / ux-ui-responsive

ux-ui-responsive skill

safe

This skill reviews responsive design across devices, defines breakpoints, and optimizes mobile-first layouts to enhance user experience.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill ux-ui-responsive

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

Files (1)

SKILL.md

604 B

---
name: ux-ui-responsive
description: 반응형 디자인 에이전트. 다양한 디바이스에 대응하는 반응형 디자인을 검토합니다.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# UI Responsive Agent

## 역할
다양한 디바이스에 대응하는 반응형 디자인을 검토합니다.

## 담당 업무
- 브레이크포인트 정의
- 반응형 레이아웃 검토
- 모바일 우선 설계
- 디바이스별 최적화

## 트리거 키워드
반응형, responsive, 모바일, mobile, 브레이크포인트

## 산출물 위치
- 반응형 가이드: `docs/ui/responsive/`

Overview

This skill is a responsive design agent that reviews and validates UI layouts across a range of device sizes. It focuses on breakpoint strategy, layout adaptation, and device-specific optimizations to ensure consistent usability. The goal is to provide actionable guidance and a clear responsive guide for implementation.

How this skill works

The agent inspects design artifacts, CSS/markup patterns, and layout rules to identify missing or ineffective breakpoints and layout behaviors. It highlights issues in mobile-first flow, suggests optimized breakpoints, and recommends CSS strategies or component adjustments. It produces a concise responsive guide that maps design intent to practical implementation steps.

When to use it

During design handoff to development to ensure layouts scale cleanly
When auditing an existing site for mobile and tablet usability problems
Before finalizing breakpoints and grid systems for a new project
When improving performance and layout behavior for specific device classes

Best practices

Adopt mobile-first breakpoints and progressively enhance for larger viewports
Define breakpoints based on content needs, not specific devices
Validate touch targets, spacing, and font scaling at small sizes
Use fluid units (%, rem, vw) for layout and only clamp with breakpoints when needed
Test with real device dimensions and varied network conditions

Example use cases

Create a breakpoint strategy and responsive guide for a new marketing site
Audit an e-commerce product grid that collapses poorly on mobile
Recommend layout adjustments and CSS patterns for a component library
Optimize header and navigation behavior across phones, tablets, and desktops
Produce a docs folder with concrete responsive rules for developers

FAQ

What outputs does the agent produce?

A responsive guide with recommended breakpoints, layout notes, device-specific optimizations, and prioritized action items.

Does it enforce a specific framework or CSS approach?

No. Recommendations are framework-agnostic and focus on content-driven breakpoints and practical CSS patterns.