design-guide
Создавайте согласованные UI-компоненты Paperclip
Работа над UI Paperclip может становиться несогласованной, когда компоненты, токены и макеты создаются ad hoc. Этот навык дает Claude, Codex и Claude Code общее руководство по дизайну для единообразной frontend-реализации.
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "design-guide" from https://skillstore.io/skills/getpaperclipai-design-guide.md and its manifest at https://skillstore.io/api/skills/getpaperclipai-design-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «design-guide». Проверьте новый компонент строки issue для Paperclip.
Ожидаемый результат:
Ответ определяет EntityRow как правильный базовый паттерн, требует StatusIcon перед PriorityIcon и рекомендует StatusBadge в trailing slot.
Использование «design-guide». Спланируйте карточки метрик dashboard для страницы agents.
Ожидаемый результат:
Ответ рекомендует MetricCard в responsive four-column grid, с semantic tokens, small shadows и установленной типографикой для значений и меток.
Использование «design-guide». Обновите руководство по дизайну после добавления переиспользуемого selector.
Ожидаемый результат:
Ответ перечисляет раздел руководства по дизайну, который нужно добавить, варианты для показа, интерактивные состояния для включения и поля индекса компонентов для обновления.
Аудит безопасности
БезопасноReviewed all 84 static findings in SKILL.md and references/component-index.md. The findings are false positives caused by markdown inline code, TSX examples, CSS class names, file paths, and responsive grid guidance. No prompt injection, data exfiltration, command execution intent, or malicious instructions were found.
Факторы риска
⚙️ Внешние команды (80)
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/getpaperclipai-design-guide/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/getpaperclipai-design-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/getpaperclipai-design-guide.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
getpaperclipai. (2026). design-guide security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/getpaperclipai-design-guide/audits/3Цитата BibTeX
@techreport{getpaperclipai-getpaperclipai-design-guide-2026,
author = {getpaperclipai},
title = {design-guide security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/getpaperclipai-design-guide/audits/3},
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: "design-guide security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "getpaperclipai"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/getpaperclipai-design-guide/audits/3"
identifiers:
- type: other
value: "skillstore:getpaperclipai-design-guide:audit:3"
description: "Skillstore immutable audit report identifier"
Оценка Skillstore
Почему такая оценка Достоверность доказательств: ВысокийЧто вы можете построить
Создание нового компонента
Используйте руководство, чтобы выбрать токены, варианты, имена файлов, состояния и примеры для руководства по дизайну нового компонента Paperclip.
Проверка согласованности UI
Сравните страницу или функцию с паттернами типографики, макета, статусов, приоритетов и взаимодействия Paperclip.
Документирование изменений компонентов
Обновите индекс компонентов и страницу руководства по дизайну, когда переиспользуемый UI-паттерн изменяется или расширяется.
Попробуйте эти промпты
Используйте навык design-guide, чтобы проверить мой план нового компонента Paperclip. Проверьте токены, типографику, варианты, размещение файлов и обновления руководства по дизайну.
Используйте навык design-guide, чтобы реализовать этот компонент Paperclip. Следуйте существующей композиции shadcn/ui, вариантам CVA, использованию cn, соглашениям по статусам и правилам именования файлов.
Используйте навык design-guide, чтобы рефакторить этот макет страницы Paperclip. Согласуйте его с sidebar, breadcrumb, main content, properties panel, spacing и responsive patterns.
Используйте навык design-guide, чтобы проверить это изменение UI на расхождение с системой дизайна. Выявите дублирующиеся паттерны, отсутствующую документацию, несогласованные токены, слабые состояния и возможности переиспользования компонентов.
Лучшие практики
- Начинайте с существующих примитивов и пользовательских составных компонентов, прежде чем создавать новый компонент.
- Используйте semantic tokens, установленную типографику и общие компоненты статусов или приоритетов.
- Обновляйте и страницу руководства по дизайну, и индекс компонентов, когда изменяется переиспользуемый UI.
Избегать
- Не хардкодьте raw colors, пользовательские шкалы типов или одноразовую стилизацию статусов.
- Не изменяйте примитивы shadcn/ui напрямую, когда их можно расширить через композицию.
- Не добавляйте переиспользуемые компоненты без примеров, состояний, вариантов и справочной документации.
Часто задаваемые вопросы
Что помогает создавать этот навык?
Какой стек он предполагает?
Заменяет ли он ревью визуального дизайна?
Может ли он создавать новые компоненты?
Включает ли он инвентарь компонентов?
Безопасно ли его использовать?
Сведения для разработчиков
Автор
getpaperclipaiЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
a06681402992ceae98ba04d54cfd4ab004862696
Актуальность поддержки
18.07.2026
Использование
1 загрузок · 0 просмотров
Структура файлов