🧩

core-components

Name: core-components
Author: ChrisWiles

Безопасно 🌐 Доступ к сети📁 Доступ к файловой системе⚙️ Внешние команды

Создание согласованного UI с паттернами дизайн-системы

Создание интерфейсов без стандартов дизайна приводит к несогласованной стилизации и проблемам с поддержкой. Этот навык предоставляет паттерны компонентов и дизайн-токены для единообразных, легко поддерживаемых пользовательских интерфейсов.

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

📊 70 Адекватно

Скачать ZIP навыка

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

Включите и начните использовать

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

Использование «core-components». Создайте элемент списка с аватаром, заголовком и подзаголовком

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

Контейнер HStack с gap $3 и выравниванием по центру
Компонент Avatar с размером md для согласованного размера
VStack для текста с заголовком, использующим вес $semibold
Текст подзаголовка, использующий цветовой токен $textSecondary
Иконка стрелки с $textTertiary для ненавязчивого индикатора

Использование «core-components». Создайте кнопку основного действия

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

Button с вариантом solid для основных действий
Размер md для стандартных целей касания
Свойство isLoading для обратной связи об асинхронном состоянии
Свойство isDisabled для состояния валидации

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

Безопасно

v5 • 1/16/2026

This skill is purely documentation containing design system patterns and code examples. All 95 static findings are false positives caused by pattern matching against Markdown formatting (backticks), design token names ($md, $sm, $lg), and metadata fields. No executable code, network access, or security risks present.

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

442

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

находки

Всего аудитов

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

🌐 Доступ к сети (1)

skill-report.json:6

📁 Доступ к файловой системе (1)

skill-report.json:6

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

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

Оценка качества

Архитектура

100

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

Контент

Сообщество

100

Безопасность

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

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

Создание согласованных UI-компонентов

Применяйте дизайн-токены и паттерны компонентов для создания единообразных интерфейсов в вашем React-приложении

Документирование стандартов компонентов

Используйте эти паттерны как шаблоны для документации вашей собственной дизайн-системы и руководств по компонентам

Создание макетов мобильного UI

Применяйте кроссплатформенные паттерны компонентов с Box, HStack и VStack для согласованных мобильных интерфейсов

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

Базовое использование компонентов

Покажите, как создать Button, используя дизайн-токены с вариантами solid и outline

Структура разметки

Создайте макет экрана с заголовком, прокручиваемым контентом и согласованными отступами, используя VStack и дизайн-токены

Форма с валидацией

Создайте форму с компонентами Input, правильными токенами отступов и обработкой состояния ошибки, используя токен statusError

Кастомный компонент Card

Создайте компонент Card с вариантами elevated и outlined, используя Box и дизайн-токены для отступов и скругления границ

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

Всегда используйте дизайн-токены вместо жестко заданных значений для цветов, отступов и типографики
Импортируйте основные компоненты из вашей библиотеки компонентов вместо сырых платформенных компонентов
Используйте семантические цветовые токены, такие как $textPrimary и $statusError, для стилизации с поддержкой тем

Избегать

Жесткое задание пиксельных значений или hex-цветов вместо дизайн-токенов
Использование сырых View и Text из react-native вместо Box и Text из core
Применение инлайн-стилей с помощью свойства style вместо свойств на основе токенов

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

Какие платформы поддерживают этот навык?

Этот навык работает с Claude, Codex и Claude Code для руководства по компонентам React и React Native.

Какие дизайн-токены доступны?

Токены отступов с $1 по $8, семантические цветовые токены и токены типографики от $xs до $2xl.

Как адаптировать эти паттерны к моей кодовой базе?

Замените примеры импортов на экспорты вашей библиотеки компонентов. Именование токенов и паттерны остаются теми же.

Безопасны ли мои данные при использовании этого навыка?

Да. Этот навык содержит только документацию и паттерны. Никакой код не выполняется и никакие данные не передаются.

Почему стоит использовать дизайн-токены вместо жестко заданных значений?

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

Работает ли это с библиотеками CSS-in-JS?

Да. Паттерны и токены работают с styled-components, Emotion или любым подходом CSS-in-JS.

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

Автор

ChrisWiles

Лицензия

MIT

Репозиторий

https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/core-components

Ссылка

main

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

📄 SKILL.md