Стилизуйте интерфейсы React быстрее
Команды React часто повторяют решения по стилизации в разных компонентах и макетах. Этот навык предоставляет переиспользуемые паттерны Tailwind, CSS Modules, CSS-in-JS, темизации, анимации и компоновки.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
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.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„web-styling“ wird verwendet. Стилизуйте адаптивную карточку продукта с Tailwind CSS.
Erwartetes Ergebnis:
План стилизации mobile-first с отступами, типографикой, hover states, цветами dark mode и переиспользуемыми группами классов.
„web-styling“ wird verwendet. Создайте варианты кнопок primary, secondary, outline и danger.
Erwartetes Ergebnis:
Матрица вариантов, охватывающая размеры, состояния, поведение disabled, объединение классов и согласованную стилизацию взаимодействий.
„web-styling“ wird verwendet. Спланируйте систему тем для React-дашборда.
Erwartetes Ergebnis:
Краткая стратегия токенов для цветов, отступов, 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.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)<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>CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7@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}
}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"
Создавайте кнопки, карточки, модальные окна и базовые элементы компоновки с согласованными вариантами и адаптивными классами.
Стандартизируйте отступы, цветовые токены, значения темного режима и соглашения по стилизации компонентов.
Быстро применяйте проверенные паттерны стилизации без создания собственной архитектуры стилизации с нуля.
Создайте руководство по стилизации для компонента React с именем [component]. Используйте Tailwind CSS, адаптивные отступы, hover states и поддержку dark mode.
Проверьте эти требования к стилизации React и предложите переиспользуемый паттерн вариантов с использованием clsx, tailwind-merge или cva. Объясните, когда подходит каждый вариант.
Спроектируйте подход к темизации React для [product]. Включите цветовые токены, токены отступов, CSS variables, поведение dark mode и организацию файлов.
Проведите аудит этого подхода к стилизации React на сопровождаемость. Определите дублирующиеся паттерны, пробелы в токенах, проблемы адаптивности, вопросы анимации и шаги миграции.
Autor
CJHarmathLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Aktualität der Wartung
20.7.2026
Nutzung
6 Downloads · 270 Aufrufe
Dateistruktur
📄 SKILL.md
Оптимизация производительности React Native
Приложения React Native могут страдать от медленных списков, лишних рендеров и зависаний потока JS. Этот навык предоставляет сфокусированные паттерны для более быстрых экранов FlatList, мемоизированных компонентов, оптимизированных селекторов, кешированных изображений и профилирования.
Улучшение паттернов React-хранилищ Zustand
Команды React могут сталкиваться с устаревшим состоянием, особенностями времени рендеринга и ошибками асинхронных действий при использовании Zustand. Этот навык дает прямые паттерны для хранилищ, селекторов, производного состояния, тестирования, отладки и персистентности.
Надежное развертывание React-приложений
Настройка развертывания React может быть повторяющейся и подверженной ошибкам. Этот навык предоставляет практические примеры для Vercel, Netlify, Docker, CI/CD, окружений и мониторинга.
Создавайте надежные сторы Zustand для React Native
Команды React Native часто теряют время из-за устаревшего состояния, тайминга асинхронных действий и лишних рендеров. Этот навык предоставляет паттерны Zustand, которые упрощают понимание, тестирование и отладку поведения сторов.
Применение паттернов стилизации React Native
Стилизация React Native может становиться непоследовательной между темами, экранами и платформами. Этот навык дает практические паттерны NativeWind и BrandColors для приложений Expo.
Улучшение наблюдаемости React Native
Тихие сбои и слабые сообщения об ошибках затрудняют диагностику мобильных багов. Этот навык дает практические паттерны React Native для логов, ошибок, трассировки и безопасной отправки отчетов.
Создавайте fullstack-приложения с рекомендациями senior-разработчика
von alirezarezvani
Fullstack-проекты часто требуют согласованной настройки, выбора архитектуры и проверок качества. Этот навык предоставляет скрипты и справочные материалы для работы с React, Next.js, Node.js, GraphQL и PostgreSQL.
Реализация React View Transitions
von vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Создание типобезопасных компонентов React
von softaworks
Работа с React и TypeScript часто требует точных типов для событий, хуков и маршрутов. Этот skill предоставляет сфокусированные паттерны для типизированных компонентов, API React 19 и маршрутизации.
Создание готовых к промышленной эксплуатации фронтенд-функций
von davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Оптимизация производительности Next.js
von Atman36
Приложения Next.js могут замедляться из-за больших бандлов, слабого кэширования и неоптимизированных медиа. Этот навык помогает Claude, Codex и Claude Code выполнять целевые улучшения производительности для продакшен-приложений.
Оптимизация производительности React и Next.js
von vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.