Создание согласованного Frontend CSS
Стилизация фронтенда часто расходится между файлами, компонентами и фреймворками. Этот навык направляет Claude, Codex и Claude Code к согласованным CSS-методам и design tokens.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-css" from https://skillstore.io/skills/eis-its-frontend-css.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-css/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «frontend-css». Style a settings panel that uses Tailwind.
Ожидаемый результат:
Краткий план стилизации с выбором utilities для layout, отступов, элементов форм, focus states и responsive behavior.
Использование «frontend-css». Refactor mixed CSS classes into a consistent method.
Ожидаемый результат:
Структурированное резюме рефакторинга, группирующее селекторы, использование tokens, изменения именования и заметки о сохранении визуального результата.
Использование «frontend-css». Review a CSS Modules file for maintainability.
Ожидаемый результат:
Ревью, выявляющее проблемы именования, дублирующиеся значения, пробелы в tokens и риски переопределения фреймворка.
The static path traversal finding is confirmed because the skill directs the agent to read a parent-directory file outside the packaged skill. No prompt injection, credential access, network access, or command execution intent was found in SKILL.md.
Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/eis-its-frontend-css/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/eis-its-frontend-css.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>EIS-ITS. (2026). frontend-css security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-css/audits/10@techreport{eis-its-eis-its-frontend-css-2026,
author = {EIS-ITS},
title = {frontend-css security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-css/audits/10},
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: "frontend-css security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-css/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-css:audit:10"
description: "Skillstore immutable audit report identifier"
Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
eis-its-frontend-css
2026-09-09
devanb-frontend-css
2026-09-09
Примените единую CSS-методологию к файлам компонентов React, Vue или аналогичных фреймворков.
Создайте согласованные решения для цветов, отступов, типографики и теней в UI-системе.
Проверьте изменения Tailwind, CSS Modules или CSS-in-JS на согласованность и поддерживаемость.
Use the frontend-css skill to style this component with the project CSS method. Keep spacing, typography, and colors consistent.
Use the frontend-css skill to refactor these styles toward the local methodology. Preserve the visual result and explain key changes.
Use the frontend-css skill to propose design tokens for colors, spacing, typography, and shadows in this interface.
Use the frontend-css skill to review this styling layer for framework conflicts, unused styles, responsive issues, and production readiness.
Автор
EIS-ITSЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
26421118b848d9f1efc0aa169d8a7a9e7e0a877e
Актуальность поддержки
20.07.2026
Использование
6 загрузок · 194 просмотров
Структура файлов
📄 SKILL.md
Создание переиспользуемых фронтенд-компонентов
Фронтенд-командам нужна единообразная структура компонентов в разных фреймворках. Этот навык помогает Claude, Codex и Claude Code проектировать сфокусированные, переиспользуемые UI-компоненты.
Улучшение доступности фронтенда
Фронтенд-команды часто упускают требования к клавиатурной навигации, семантике и поддержке экранных дикторов при рутинной работе с UI. Этот навык помогает Claude, Codex и Claude Code применять проверки доступности при создании или редактировании интерфейсов.
Применение единого стиля кодирования
Непоследовательный код замедляет ревью и усложняет сопровождение. Этот навык дает Claude, Codex и Claude Code понятные правила для читаемого и единообразного кода.
Пишите сфокусированные поведенческие тесты
Команды часто добавляют хрупкие тесты, которые отражают детали реализации вместо поведения пользователя. Этот навык помогает Claude, Codex и Claude Code писать сфокусированные тесты для критически важных рабочих процессов.
Проверка входных данных во всех точках входа
Проверка входных данных часто становится несогласованной в формах, API и бизнес-правилах. Этот навык направляет Claude, Codex и Claude Code к безопасным шаблонам валидации.
Улучшение обработки ошибок в приложении
Непоследовательная обработка ошибок может скрывать сбои и сбивать пользователей с толку. Этот навык направляет Claude, Codex и Claude Code к понятным исключениям, валидации, очистке ресурсов и путям восстановления.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Создание шаблонов React Email с Resend
от resend
Создавать готовые к продакшену email-шаблоны сложно, потому что почтовые клиенты отличаются друг от друга. Этот навык помогает Claude, Codex и Claude Code работать с компонентами React Email, отправкой, стилизацией, локализацией и редакторскими рабочими процессами.
Улучшение практик Vue 3 TypeScript
от hyf0
Проекты Vue на TypeScript часто сталкиваются с запутанными ошибками шаблонов, маршрутизатора и Volar. Этот навык дает целевые исправления Vue 3 для Codex, Claude и Claude Code.
Улучшение компонентов Vue Options API
от vuejs-ai
Проекты на Vue Options API могут терять безопасность типов и корректную привязку this. Этот skill дает прямые шаблоны для более безопасных компонентов Vue.
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.