Навыки tailwind-design-system

📦

tailwind-design-system

Name: tailwind-design-system
Author: sickn33

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

Создание дизайн-систем на Tailwind

Командам часто сложно поддерживать единообразие интерфейсов Tailwind в разных продуктах. Этот навык предоставляет переиспользуемые паттерны токенов, компонентов, макетов, тем и доступности.

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

🥉 78 Бронза

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

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

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

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

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

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

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

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

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

Использование «tailwind-design-system». Спланируй систему токенов Tailwind для SaaS dashboard.

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

Семантические цветовые группы для состояний background, foreground, primary, secondary, muted, accent, border и ring.
Переменные темного режима, повторяющие те же имена токенов.
Рекомендации по radius и spacing для согласованной плотности компонентов.

Использование «tailwind-design-system». Стандартизируй повторяющиеся кнопки и карточки.

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

Инвентаризация компонентов, сгруппированная по назначению, варианту, размеру и состоянию.
Рекомендации по общим именам вариантов и состояниям по умолчанию.
Проверки доступности для focus rings, disabled states и читаемого контраста.

Использование «tailwind-design-system». Улучши адаптивные макеты в существующем продукте.

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

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

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

Безопасно

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

All nine static findings are false positives caused by TypeScript syntax, Markdown backticks, and ordinary design-system examples. No executable shell behavior, system reconnaissance, prompt injection, exfiltration intent, or other semantic security risk was found.

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

708

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

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

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

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

⚙️ Внешние команды (4)

resources/implementation-playbook.md:310-315 resources/implementation-playbook.md:315-381 SKILL.md:32 SKILL.md:36

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

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

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

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

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

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

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

Значок Markdown

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

Значок HTML

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

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

<iframe src="https://skillstore.io/embed/skills/sickn33-tailwind-design-system.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

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

Цитата BibTeX

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

Сравнить варианты

2 устанавливаемых вариантов

Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.

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

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

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

sickn33 Рекомендуется Текущий

sickn33-tailwind-design-system

Оценка Skillstore 78

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

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

Обновлено

2026-09-09

wshobson

wshobson-tailwind-design-system

Оценка Skillstore 77

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

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

Обновлено

2026-09-09

Оценка Skillstore

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

Архитектура

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

Контент

Сообщество

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

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

Основа дизайн-системы

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

Стандартизация библиотеки компонентов

Преобразовать повторяющуюся разметку Tailwind в типизированные переиспользуемые компоненты с согласованными вариантами и состояниями.

Улучшение адаптивного UI

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

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

Сопоставить дизайн-токены

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

Создать варианты компонентов

Используй навык дизайн-системы Tailwind, чтобы спроектировать варианты button, input, card и label для библиотеки компонентов React TypeScript.

Стандартизировать адаптивные макеты

Используй навык дизайн-системы Tailwind, чтобы определить паттерны адаптивных контейнеров и сеток для dashboard, marketing и form pages.

Рефакторинг существующей UI-системы

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

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

Используйте семантические токены до component-specific Tailwind classes.
Держите варианты компонентов типизированными, централизованными и документированными.
Проверяйте focus states, поведение ARIA, контраст и темный режим вместе.

Избегать

Жестко задавать фирменные цвета внутри каждого компонента.
Добавлять arbitrary values для распространенных решений по макету.
Копировать примеры компонентов без адаптации к соглашениям проекта.

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

Создает ли этот навык полноценную дизайн-систему?

Он предоставляет паттерны, примеры и рекомендации по реализации. Итоговые токены, компоненты и стандарты ревью вы по-прежнему выбираете сами.

Может ли он работать с Claude, Codex и Claude Code?

Да. В отчете указана поддержка Claude, Codex и Claude Code.

Какие фреймворки он предполагает?

Примеры сосредоточены на React, TypeScript, Tailwind CSS, CVA, паттернах Radix и распространенных вспомогательных утилитах.

Включает ли он рекомендации по доступности?

Да. Он охватывает focus rings, сообщения об ошибках ARIA, метки, disabled states и структуру компонентов, удобную для клавиатуры.

Может ли он помочь с темным режимом?

Да. Он включает темизацию через CSS-переменные, паттерн провайдера темы и паттерн переключателя темы.

Будет ли он автоматически изменять мой код?

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

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

Автор

sickn33

Лицензия

MIT

Ревизия Skillstore

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

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

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-design-system

Ссылка

ae6ba0f1a47f0b4427a656b2202f2ff34bfea6be

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

08.09.2026

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

20 загрузок · 126 просмотров

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

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md