frontend-responsive
Создание адаптивных frontend-макетов
Адаптивные интерфейсы часто некорректно работают на телефонах, планшетах и настольных компьютерах. Этот навык дает Claude, Codex и Claude Code сфокусированные рекомендации по mobile-first макетам, брейкпоинтам и UI, удобному для сенсорного ввода.
Этот навык входит в набор
Установите весь набор одной командой, чтобы получить все навыки для задачи.
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-responsive" from https://skillstore.io/skills/eis-its-frontend-responsive.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-responsive/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «frontend-responsive». Сделайте dashboard удобным для использования на телефонах и настольных мониторах.
Ожидаемый результат:
- Начните с одноколоночного мобильного макета и расширяйте его до многоколоночных представлений на более широких экранах.
- Держите основные действия видимыми, используйте относительные отступы и проверяйте сенсорные цели на маленьких экранах.
- Тестируйте ключевые брейкпоинты, в которых таблицы, графики и фильтры меняют структуру.
Использование «frontend-responsive». Проверьте список карточек товаров на проблемы адаптивности.
Ожидаемый результат:
- Проверьте, что карточки аккуратно складываются в колонку на мобильных устройствах и избегают тесных двухколоночных макетов.
- Используйте гибкие размеры медиа, чтобы изображения сохраняли пропорции при разной ширине viewport.
- Убедитесь, что заголовки, цены и кнопки действий остаются читаемыми и удобными для нажатия.
Использование «frontend-responsive». Спланируйте адаптивную типографику для маркетинговой страницы.
Ожидаемый результат:
- Используйте относительные единицы шрифта и задавайте изменения размеров на значимых контентных брейкпоинтах.
- Сохраняйте удобочитаемую длину строки на настольных компьютерах и избегайте слишком крупных заголовков на телефонах.
- Тестируйте перенос текста для длинных меток, заголовков и призывов к действию.
Аудит безопасности
БезопасноThe skill contains one confirmed filesystem concern: it directs the agent to follow a ../../../ path outside the skill directory. The two system reconnaissance findings are false positives caused by normal responsive design wording.
Пункты проверки возможностей (1)
Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.
Факторы риска
📁 Доступ к файловой системе (1)
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/eis-its-frontend-responsive/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/eis-its-frontend-responsive?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/eis-its-frontend-responsive?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-responsive/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/eis-its-frontend-responsive.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
EIS-ITS. (2026). frontend-responsive security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-responsive/audits/10Цитата BibTeX
@techreport{eis-its-eis-its-frontend-responsive-2026,
author = {EIS-ITS},
title = {frontend-responsive security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-responsive/audits/10},
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: "frontend-responsive security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-responsive/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-responsive:audit:10"
description: "Skillstore immutable audit report identifier"
Сравнить варианты
2 устанавливаемых вариантовНавык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
eis-its-frontend-responsive
2026-09-09
devanb-frontend-responsive
2026-09-09
Оценка Skillstore
Почему такая оценка Достоверность доказательств: ВысокийЧто вы можете построить
Планирование адаптивных страниц
Определить mobile-first структуру страницы до написания стилей макета.
Проверка адаптивных компонентов
Проверить отступы, типографику, сенсорные цели и приоритет контента при разных размерах viewport.
Подготовка заметок для тестирования viewport
Определить проверки для мобильных устройств, планшетов и настольных компьютеров для нового интерфейса.
Попробуйте эти промпты
Use the frontend-responsive skill. Help me plan a mobile-first layout for [page name] with key sections, content priority, and desktop expansion.
Use the frontend-responsive skill. Review [component description] for breakpoints, relative units, touch targets, image sizing, and small-screen behavior.
Use the frontend-responsive skill. Create a breakpoint strategy for [application area] that covers mobile, tablet, desktop, and large display behavior.
Use the frontend-responsive skill. Audit [workflow or screen set] for layout risks across devices and give prioritized fixes without adding unrelated redesigns.
Лучшие практики
- Начинайте с самого маленького viewport и добавляйте сложность макета по мере увеличения доступного пространства.
- Выбирайте брейкпоинты на основе потребностей контента, а не только распространенных ширин устройств.
- Проверяйте сенсорные цели, перенос текста, изображения и навигацию на каждой важной ширине.
Избегать
- Не проектируйте только для настольных компьютеров с последующим уменьшением интерфейса.
- Не полагайтесь на фиксированные пиксельные ширины для основных контейнеров макета.
- Не скрывайте важный контент на мобильных устройствах без продуктовой причины.