responsive-design작성자 Seth Hobson

Responsive Design 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 컨테이너 쿼리, 유동 타입, CSS Grid, 모바일 우선 브레이크포인트를 활용한 반응형 레이아웃.

Web & UI
UI 코드

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

2026-09-14에 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 1,989자

01 기능

Claude Code와 Codex에서 responsive-design 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 컨테이너 쿼리, 유동적 타이포그래피, CSS Grid, 모바일 퍼스트 브레이크포인트 전략을 사용하여 현대적인 반응형 레이아웃을 구현합니다. 컴포넌트 수준의 반응성, 유동적 타이포그래피와 여백 스케일, CSS Grid와 Flexbox를 활용한 복잡한 레이아웃, 디자인 시스템을 위한 브레이크포인트 전략을 다룹니다. 이 스킬은 반응형 이미지와 미디어, 적응형 내비게이션 패턴, 반응형 테이블과 데이터 표시도 다룹니다.

모바일 퍼스트 개발, 기기 기반이 아닌 콘텐츠 기반 브레이크포인트, 그리고 컴포넌트 수준 적응을 위한 컨테이너 쿼리를 강조합니다. 이 스킬에는 터치 타깃, 국제화를 위한 논리적 속성, 이미지 처리와 지연 로딩을 통한 성능 최적화에 관한 가이드가 포함되어 있습니다.

UI 코드

예시 프롬프트 보기 ↗

작동 방식

01
모바일 퍼스트로 시작하기
데스크톱부터 작업하는 대신, 모바일 스타일을 기반으로 시작한 뒤 더 큰 화면에 맞춰 점진적으로 확장하십시오.
02
콘텐츠 기반 브레이크포인트 설정하기
특정 기기 크기가 아니라 콘텐츠가 다시 배치되어야 하는 지점을 기준으로 브레이크포인트를 정의하십시오.

02 적합성 확인

responsive-design 스킬을 사용하는 경우

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 responsive-design 스킬을 사용하십시오. 아래 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

모바일 우선 반응형 레이아웃 구현
컴포넌트 기반 반응형을 위한 컨테이너 쿼리 사용
유동 타이포그래피 및 간격 스케일 생성
디자인 시스템을 위한 중단점 전략 설계
반응형 테이블과 데이터 표시 구축하기

03 스킬 내부

responsive-design 스킬이 Claude Code와 Codex에 제공하는 규칙

1 SKILL.md가 에이전트에 설정하는 구체적인 지침, 기본값, 제한 — 결과를 바꾸는 파일 부분입니다.

최적화 및 지연 로딩
성능을 위해 이미지를 최적화하고, 처음에 화면 밖에 있는 콘텐츠는 지연 로딩하십시오.

04 활용하기

Claude Code 또는 Codex에 responsive-design을 설치하십시오

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 responsive-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/wshobson/agents --skill responsive-design

plugins/ui-design/skills/responsive-design/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

출력을 수락하기 전에 대화 기록과 파일에서 다음을 확인하십시오:

결과는 이 skill의 카탈로그 목록과 같이 UI 코드로 제공됩니다.
에이전트는 결과를 생성하기 전에 계획 또는 기록에서 responsive-design 스킬을 명시합니다.
사용자의 콘텐츠, 이름 및 숫자는 출력에서 변경되지 않습니다.

OpenDesign에서는 SKILL.md 링크를 통해 responsive-design을 가져오십시오: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택하십시오.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/ui-design/skills/responsive-design/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 카탈로그에 18개 스킬을 포함하는 전체 wshobson/agents 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. responsive-design에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 사용해야 하는 경우모바일 우선 레이아웃, 컨테이너 쿼리, 유동적 타이포그래피, 반응형 데이터 표시를 포함한 여덟 가지 시나리오를 나열합니다
세부 패턴 및 예제필요할 때 더 깊은 패턴 문서를 참조하도록 references/details.md를 안내합니다
모범 사례모바일 우선 접근, 콘텐츠 기반 브레이크포인트, 유동적 값, 컨테이너 쿼리, 성능을 포함한 여덟 가지 핵심 원칙
흔한 문제가로 스크롤 오버플로, 고정 너비, 뷰포트 높이, 터치 타겟 크기 등 일곱 가지 흔한 문제

스킬 자체 설명

"컨테이너 쿼리, 유동 타이포그래피, CSS Grid 및 모바일 우선 중단점 전략을 사용하여 최신 반응형 레이아웃을 구현합니다. 적응형 인터페이스 구축, 유동 레이아웃 구현 또는 컴포넌트 수준 반응형 동작 생성 시 사용합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 1,989자입니다. GitHub에서 전체 파일 읽기.

Responsive Design

실제 UI 디자인 작업에서 responsive-design 실행

OpenDesign을 다운로드하고, SKILL.md 링크에서 responsive-design을 가져온 다음, 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill responsive-design