web-styling
Стилизуйте интерфейсы React быстрее
Команды React часто повторяют решения по стилизации в разных компонентах и макетах. Этот навык предоставляет переиспользуемые паттерны Tailwind, CSS Modules, CSS-in-JS, темизации, анимации и компоновки.
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «web-styling». Стилизуйте адаптивную карточку продукта с Tailwind CSS.
Ожидаемый результат:
План стилизации mobile-first с отступами, типографикой, hover states, цветами dark mode и переиспользуемыми группами классов.
Использование «web-styling». Создайте варианты кнопок primary, secondary, outline и danger.
Ожидаемый результат:
Матрица вариантов, охватывающая размеры, состояния, поведение disabled, объединение классов и согласованную стилизацию взаимодействий.
Использование «web-styling». Спланируйте систему тем для React-дашборда.
Ожидаемый результат:
Краткая стратегия токенов для цветов, отступов, CSS variables, сопоставления dark mode и организации файлов компонентов.
Аудит безопасности
БезопасноAll static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
Факторы риска
⚙️ Внешние команды (42)
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.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
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7Цитата BibTeX
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Оценка Skillstore
Почему такая оценка Достоверность доказательств: ВысокийЧто вы можете построить
Создание переиспользуемых компонентов React
Создавайте кнопки, карточки, модальные окна и базовые элементы компоновки с согласованными вариантами и адаптивными классами.
Документирование дизайн-системы
Стандартизируйте отступы, цветовые токены, значения темного режима и соглашения по стилизации компонентов.
Выпуск отполированных продуктовых экранов
Быстро применяйте проверенные паттерны стилизации без создания собственной архитектуры стилизации с нуля.
Попробуйте эти промпты
Создайте руководство по стилизации для компонента React с именем [component]. Используйте Tailwind CSS, адаптивные отступы, hover states и поддержку dark mode.
Проверьте эти требования к стилизации React и предложите переиспользуемый паттерн вариантов с использованием clsx, tailwind-merge или cva. Объясните, когда подходит каждый вариант.
Спроектируйте подход к темизации React для [product]. Включите цветовые токены, токены отступов, CSS variables, поведение dark mode и организацию файлов.
Проведите аудит этого подхода к стилизации React на сопровождаемость. Определите дублирующиеся паттерны, пробелы в токенах, проблемы адаптивности, вопросы анимации и шаги миграции.
Лучшие практики
- Используйте адаптивные правила mobile-first и явно задавайте ограничения компоновки.
- Централизуйте дизайн-токены, определения вариантов и значения темного режима.
- Используйте вспомогательные функции объединения классов, когда компоненты принимают внешние переопределения классов.
Избегать
- Дублирование длинных строк классов вариантов в нескольких компонентах.
- Смешивание произвольных цветов и отступов без общих дизайн-токенов.
- Добавление анимаций без правил состояний, ограничений движения или fallback-поведения.