📦

apple-design

Name: apple-design
Author: emilkowalski

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

Создание плавных веб-интерфейсов в стиле Apple

Веб-интерфейсы с управлением жестами часто кажутся запаздывающими, жесткими или визуально непоследовательными. Этот навык предлагает практические рекомендации по адаптивному движению, материалам, типографике, доступности и проектированию взаимодействий.

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

🥉 78 Бронза

Этот навык входит в набор

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

KeywayTech Coding Skills · 19 навыки Установить весь набор

Установить с помощью моего Агента

Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.

Запрос агента

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

Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.

Ресурсы для AI-агентов

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

Markdown-детали GET /skills/emilkowalski-apple-design.md Подписанный manifest GET /api/skills/emilkowalski-apple-design/manifest Подписанный lockfile GET /api/skills/emilkowalski-apple-design/lockfile

Протестировать

Использование «apple-design». Проверьте карусель карточек, которая привязывается к позиции только после отпускания пальца.

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

Добавьте непрерывное отслеживание один к одному во время перетаскивания.
Спрогнозируйте конечное положение по скорости отпускания перед выбором точки привязки.
Передавайте скорость отпускания в прерываемую пружину и сохраняйте исходное смещение захвата.

Использование «apple-design». Порекомендуйте движение для закрываемого листа настроек.

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

Используйте отзывчивую пружину с ограниченным отскоком, симметричными траекториями появления и закрытия, точкой начала с учетом источника, прерыванием перетаскиванием и кроссфейдом для уменьшенного движения.

Использование «apple-design». Проведите аудит полупрозрачной панели инструментов с низкоконтрастным текстом.

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

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

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

Безопасно

v2 • 21.07.2026 Открыть версионный отчет

All 62 static findings are false positives caused by Markdown code delimiters and ordinary design terminology. The single skill file contains educational web-design guidance and examples, with no executable commands, reconnaissance, data collection, or prompt-injection attempt found.

Просканировано файлов

283

Проанализировано строк

Пункты проверки

Ложные срабатывания проигнорированы

Факторы риска

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

Аудитор:: claude Посмотреть историю аудитов →

Поделиться и цитировать этот отчет

Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.

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

Копировать ссылку на отчёт

https://skillstore.io/skills/emilkowalski-apple-design/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Значок Markdown

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

Значок HTML

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

Встраиваемая карточка

<iframe src="https://skillstore.io/embed/skills/emilkowalski-apple-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

emilkowalski. (2026). apple-design security audit report (audit version 2) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-apple-design/audits/2

Цитата BibTeX

@techreport{emilkowalski-emilkowalski-apple-design-2026,
  author = {emilkowalski},
  title = {apple-design security audit report (audit version 2)},
  institution = {Skillstore},
  year = {2026},
  number = {2},
  url = {https://skillstore.io/skills/emilkowalski-apple-design/audits/2},
  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: "apple-design security audit report (audit version 2)"
version: "unspecified"
type: report
authors:
  - name: "emilkowalski"
date-released: "2026-07-21"
url: "https://skillstore.io/skills/emilkowalski-apple-design/audits/2"
identifiers:
  - type: other
    value: "skillstore:emilkowalski-apple-design:audit:2"
    description: "Skillstore immutable audit report identifier"

Оценка Skillstore

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

Архитектура

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

Контент

Сообщество

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

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

Улучшение взаимодействий в продукте

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

Реализация плавного движения в вебе

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

Аудит качества интерфейса

Оценивайте движение, материалы, типографику, иерархию, доступность и согласованность взаимодействий перед выпуском продукта.

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

Проверка базовой обратной связи

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

Проектирование нижнего листа

Спроектируйте мобильный нижний лист с прямым перетаскиванием, отпусканием с учетом скорости, точками привязки, прерыванием, эффектом растяжения за границами и поведением при уменьшенном движении.

Аудит сценария взаимодействия

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

Определение системы движения

Создайте систему движения для веба для этих компонентов. Определите семейства пружин, правила скорости, поведение при прерывании, пороги жестов, альтернативы для доступности и проверочные тесты.

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

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

Избегать

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

Часто задаваемые вопросы

Создает ли этот навык полный код интерфейса?

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

Какие взаимодействия получают наибольшую пользу от этих рекомендаций?

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

Нужна ли пружина для каждой анимации?

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

Как навык учитывает доступность?

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

Можно ли использовать эти принципы вне платформ Apple?

Да. Рекомендации переносят принципы взаимодействия и движения в веб-интерфейсы с учетом ограничений браузеров и устройств.

Универсальны ли примерные значения пружин?

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

Сведения для разработчиков

Автор

emilkowalski

Лицензия

MIT

Ревизия Skillstore

Примечание о версии

Автор не указал версию.

Репозиторий

https://github.com/emilkowalski/skills/tree/main/skills/apple-design/

Ссылка

d1c4c60b80afc545d96b5e8a51c19b2fdc81df70

Актуальность поддержки

20.07.2026

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

2 загрузок · 1 просмотров

Структура файлов

📄 SKILL.md