스킬 responsive-design

📦

responsive-design

Name: responsive-design
Author: wshobson

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근

반응형 웹 레이아웃 구축

반응형 인터페이스는 다양한 기기, 컨테이너, 콘텐츠 크기에서 자주 깨집니다. 이 스킬은 적응형 레이아웃을 위한 실용적인 CSS 및 컴포넌트 패턴을 제공합니다.

지원: Claude Codex Code(CC)

📊 75 적절함

Maintain this Skill? Claim it 📊 75 적절함

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/wshobson-responsive-design.md and its manifest at https://skillstore.io/api/skills/wshobson-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/wshobson-responsive-design.md 서명된 manifest GET /api/skills/wshobson-responsive-design/manifest 서명된 lockfile GET /api/skills/wshobson-responsive-design/lockfile

테스트해 보기

"responsive-design" 사용 중입니다. 대시보드 그리드가 휴대폰에서 제대로 접히지 않습니다.

예상 결과:

단일 열 기본값, 태블릿 그룹화, 데스크톱 그리드 동작, 오버플로 확인을 포함한 모바일 우선 레이아웃 계획.

"responsive-design" 사용 중입니다. 카드 컴포넌트가 좁은 사이드바와 넓은 콘텐츠 영역에 나타납니다.

예상 결과:

부모 너비를 기준으로 카드 이미지 배치, 텍스트 크기, 간격을 변경하는 컨테이너 쿼리 접근 방식.

"responsive-design" 사용 중입니다. 마케팅 페이지에 고정 타이포그래피가 있어 모바일에서 너무 크게 느껴집니다.

예상 결과:

읽기 쉬운 최소 크기, 제어된 최대 크기, 이에 맞는 간격 안내를 포함한 유동형 글꼴 스케일.

보안 감사

안전

v5 • 2026. 7. 8. 버전별 보고서 열기

AI review found the static matches to be false positives in documentation examples. The skill contains responsive design guidance, CSS and TSX snippets, and resource links, with no evidence of command execution, credential material, network behavior, reconnaissance, prompt injection, or malicious intent.

스캔된 파일

2,221

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/wshobson-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg)](https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/wshobson-responsive-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

wshobson. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-responsive-design/audits/5

BibTeX 인용

@techreport{wshobson-wshobson-responsive-design-2026,
  author = {wshobson},
  title = {responsive-design security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/wshobson-responsive-design/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "responsive-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-responsive-design/audits/5"
identifiers:
  - type: other
    value: "skillstore:wshobson-responsive-design:audit:5"
    description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 2개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨

supercent-io 권장

supercent-io-responsive-design

Skillstore 점수 77

증거 신뢰도 높음

Skillstore 사용량 37

업데이트됨

2026-09-09

wshobson 현재

wshobson-responsive-design

Skillstore 점수 75

증거 신뢰도 높음

Skillstore 사용량 27

업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

적응형 제품 카드 만들기

컨테이너 쿼리를 사용해 카드가 그리드, 사이드바, 좁은 모바일 보기 안에서 적응하도록 만듭니다.

반응형 디자인 토큰 정의

팀이 제품 전반에서 재사용할 수 있는 유동형 글꼴, 간격, 브레이크포인트 스케일을 구축합니다.

모바일 데이터 보기 개선

밀도 높은 테이블과 내비게이션을 작은 화면에서도 사용 가능한 레이아웃으로 변환합니다.

이 프롬프트를 사용해 보세요

페이지를 반응형으로 만들기

responsive-design 스킬을 사용해 이 페이지가 모바일, 태블릿, 데스크톱에서 작동하도록 만드세요. 기존 시각 스타일은 유지하세요.

유동형 글꼴과 간격 추가

responsive-design 스킬을 사용해 고정 글꼴 크기와 간격을 제한된 유동형 값으로 교체하세요. 선택한 최소 및 최대 크기를 설명하세요.

컨테이너 쿼리로 컴포넌트 리팩터링

responsive-design 스킬을 사용해 뷰포트 전용 브레이크포인트 대신 컨테이너 쿼리로 이 컴포넌트들을 리팩터링하세요.

반응형 시스템 전략 설계

responsive-design 스킬을 사용해 이 디자인 시스템을 위한 브레이크포인트 토큰, 컨테이너 쿼리 규칙, 반응형 미디어 규칙, 검증 단계를 제안하세요.

모범 사례

가장 작은 실용적 레이아웃에서 시작한 다음 더 큰 컨테이너와 뷰포트에 맞게 향상하세요.
기기 이름만이 아니라 콘텐츠 요구 사항과 컴포넌트 너비를 기준으로 브레이크포인트를 선택하세요.
각 반응형 상태에서 실제 콘텐츠, 긴 레이블, 이미지 비율, 테이블 오버플로를 테스트하세요.

피하기

재사용 가능한 컴포넌트에 고정된 기기 브레이크포인트에만 의존하지 마세요.
텍스트가 너무 작거나 너무 커지게 만드는 제한 없는 뷰포트 단위를 사용하지 마세요.
레이아웃을 더 단순해 보이게 만들기 위해 모바일에서 필수 콘텐츠를 숨기지 마세요.

자주 묻는 질문

이 스킬은 코드를 실행하거나 패키지를 설치하나요?

아니요. 반응형 CSS와 컴포넌트 패턴을 위한 markdown 안내와 예제를 제공합니다.

Tailwind CSS 프로젝트에 도움이 될 수 있나요?

예. 예제에는 Tailwind 스타일의 반응형 클래스와 컨테이너 쿼리 사용법이 포함되어 있습니다.

디자인 시스템을 지원하나요?

예. 브레이크포인트 토큰, 유동형 스케일, 재사용 가능한 레이아웃 패턴, 컴포넌트 반응형 처리를 다룹니다.

브라우저 테스트를 대체할 수 있나요?

아니요. 반응형 동작을 계획하고 구현하는 데 도움을 주지만, 시각적 테스트는 여전히 필요합니다.

어떤 프레임워크에 적용되나요?

이 안내는 CSS 중심이며 React, Tailwind CSS, 표준 웹 프로젝트에 맞게 조정할 수 있습니다.

이 스킬은 marketplace 게시에 안전한가요?

예. 검토된 파일에는 문서 예제와 링크가 포함되어 있으며, 실행 가능한 자동화나 자격 증명 접근은 없습니다.

개발자 세부 정보

작성자

wshobson

라이선스

MIT

Skillstore 리비전

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design/

참조

64ca8af0f54a325752f08bd54e52151061ea659a

유지보수 최신성

2026. 7. 23.

사용량

12 다운로드 · 201 조회

파일 구조

📁 references/

📄 breakpoint-strategies.md

📄 container-queries.md

📄 fluid-layouts.md

📄 SKILL.md

wshobson의 다른 스킬

전체 보기

📦

prompt-engineering-patterns

프로덕션 LLM 프롬프트 최적화

LLM 프롬프트는 지침, 예시, 평가 기준이 명확하지 않아 실패하는 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code 및 유사 도구에서 프롬프트를 개선하기 위한 템플릿과 워크플로를 제공합니다.

생산성 보기

📦

context-driven-development

컨텍스트 기반 개발 관리

제품 목표, 스택 선택, 워크플로 규칙이 흩어져 있으면 AI 지원 프로젝트의 일관성이 떨어집니다. 이 스킬은 Conductor 컨텍스트 아티팩트를 통해 Claude, Codex, Claude Code를 안내합니다.

코딩 및 개발 보기

📦

startup-financial-modeling

스타트업 재무 모델 구축

스타트업 팀은 채용, 자금 조달, 현금 사용을 계획하기 전에 명확한 예측이 필요합니다. 이 스킬은 매출, 비용, 런웨이, 시나리오를 실용적인 재무 계획 산출물로 구조화합니다.

데이터 및 분석 보기

📦

kpi-dashboard-design

의사결정을 이끄는 KPI 대시보드 설계

팀은 종종 많은 숫자를 보여주지만 행동을 안내하지는 못하는 대시보드를 만듭니다. 이 스킬은 Claude, Codex, Claude Code가 의미 있는 KPI를 선택하고, 뷰를 구조화하며, 지표를 명확하게 제시하도록 돕습니다.

디자인 및 크리에이티브 보기

📦

postmortem-writing

비난 없는 인시던트 사후 분석 작성

인시던트 리뷰는 종종 일관성이 없거나, 비난에 초점이 맞춰지거나, 실행으로 옮기기 어렵게 됩니다. 이 스킬은 Claude, Codex, Claude Code가 명확한 타임라인, 근본 원인, 담당자를 포함한 구조화된 사후 분석을 작성하도록 돕습니다.

글쓰기 및 콘텐츠 보기

📦

data-storytelling

명확한 데이터 스토리 만들기

원시 지표만으로는 이해관계자를 설득하거나 의사결정을 뒷받침하기 어려운 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code가 분석을 명확한 내러티브, 시각 자료, 추천 사항으로 구성하도록 돕습니다.

데이터 및 분석 보기

전체 보기

📦

ui-styling

Build Accessible Tailwind Interfaces

작성자 nextlevelbuilder

Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.

디자인 및 크리에이티브 보기

📦