Навыки responsive-design

📦

responsive-design

Name: responsive-design
Author: wshobson

Ревизия содержимого r1 Безопасно ⚙️ Внешние команды🌐 Доступ к сети

Создание адаптивных веб-макетов

Адаптивные интерфейсы часто ломаются на разных устройствах, в разных контейнерах и при разном размере контента. Этот навык предоставляет практические CSS- и компонентные паттерны для адаптивных макетов.

Поддерживает: Claude Codex Code(CC)

📊 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-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

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». Сетка dashboard плохо сворачивается на телефонах.

Ожидаемый результат:

План mobile-first макета с одноколоночными значениями по умолчанию, группировкой для планшетов, поведением desktop-сетки и проверками переполнения.

Использование «responsive-design». Компонент карточки появляется в узких боковых панелях и широких областях контента.

Ожидаемый результат:

Подход на основе контейнерных запросов, который меняет размещение изображения карточки, масштаб текста и отступы в зависимости от ширины родителя.

Использование «responsive-design». На маркетинговой странице фиксированная типографика, которая выглядит слишком крупной на мобильных устройствах.

Ожидаемый результат:

Fluid type scale с читаемыми минимальными размерами, контролируемыми максимальными размерами и соответствующими рекомендациями по отступам.

Аудит безопасности

Безопасно

v5 • 08.07.2026 Открыть версионный отчет

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.

Почему этот вариант первый

Самая высокая оценка Skillstore

Автор / источник Оценка Skillstore Достоверность доказательств Использование в Skillstore Обновлено

supercent-io Рекомендуется

supercent-io-responsive-design

Оценка Skillstore 77

Достоверность доказательств Высокий

Использование в Skillstore 31

Обновлено

2026-09-09

wshobson Текущий

wshobson-responsive-design

Оценка Skillstore 75

Достоверность доказательств Высокий

Использование в Skillstore 19

Обновлено

2026-09-09

Оценка Skillstore

Почему такая оценка Достоверность доказательств: Высокий

Архитектура

Сопровождаемость

Контент

Сообщество

Соответствие спецификации

Что вы можете построить

Создание адаптивных карточек продуктов

Используйте контейнерные запросы, чтобы карточки адаптировались внутри сеток, боковых панелей и узких мобильных представлений.

Определение адаптивных дизайн-токенов

Создавайте переиспользуемые командами шкалы fluid type, отступов и breakpoints для разных продуктов.

Улучшение мобильных представлений данных

Преобразуйте плотные таблицы и навигацию в макеты, которые остаются удобными на небольших экранах.

Попробуйте эти промпты

Сделать страницу адаптивной

Используй навык responsive-design, чтобы эта страница работала на мобильных устройствах, планшетах и desktop. Сохрани существующий визуальный стиль.

Добавить fluid type и отступы

Используй навык responsive-design, чтобы заменить фиксированные размеры шрифтов и отступы на ограниченные fluid values. Объясни выбранные минимальные и максимальные размеры.

Рефакторинг компонентов с контейнерными запросами

Используй навык responsive-design, чтобы отрефакторить эти компоненты с контейнерными запросами вместо breakpoints, основанных только на viewport.

Разработать стратегию адаптивной системы

Используй навык responsive-design, чтобы предложить breakpoint tokens, правила контейнерных запросов, правила адаптивных media и шаги валидации для этой дизайн-системы.

Лучшие практики

Начинайте с наименьшего практичного макета, затем улучшайте его для более крупных контейнеров и viewports.
Выбирайте breakpoints на основе потребностей контента и ширины компонента, а не только названий устройств.
Тестируйте реальный контент, длинные подписи, соотношения сторон изображений и переполнение таблиц в каждом адаптивном состоянии.

Избегать

Не полагайтесь только на фиксированные device breakpoints для переиспользуемых компонентов.
Не используйте неограниченные viewport units, из-за которых текст становится слишком маленьким или слишком большим.
Не скрывайте важный контент на мобильных устройствах только для того, чтобы макет выглядел проще.