Создание согласованных базовых UI-компонентов
Несогласованные UI-компоненты замедляют работу над продуктом и приводят к визуальному расхождению. Этот навык помогает Claude, Codex и Claude Code использовать общие токены, макеты и паттерны компонентов.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "core-components" from https://skillstore.io/skills/chriswiles-core-components.md and its manifest at https://skillstore.io/api/skills/chriswiles-core-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «core-components». Экран продукта использует raw View и Text elements с inline padding, color и font sizes.
Ожидаемый результат:
Рекомендуемое обновление: замените raw layout elements на Box и VStack, сопоставьте spacing с token values и используйте tokens цвета и размера для Text. Сохраните существующее содержимое и поведение без изменений.
Использование «core-components». Компонент card принимает numeric padding и free-form variant strings.
Ожидаемый результат:
Результат проверки: ограничьте padding утвержденными token values, задокументируйте поддерживаемые variants и передавайте визуальные различия через компонент Box.
Использование «core-components». Макет элемента списка смешивает custom containers, hard-coded borders и manual icon color values.
Ожидаемый результат:
Предлагаемый паттерн: используйте HStack для строки, VStack для текста, semantic border tokens и tertiary color token для иконки.
All 49 static external-command findings are false positives caused by Markdown backticks in TSX examples and token tables. SKILL.md contains documentation-only design system guidance, with no shell commands, Ruby execution, network behavior, file operations, or prompt-injection language found.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/chriswiles-core-components/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/chriswiles-core-components?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/chriswiles-core-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-core-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/chriswiles-core-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ChrisWiles. (2026). core-components security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-core-components/audits/8@techreport{chriswiles-chriswiles-core-components-2026,
author = {ChrisWiles},
title = {core-components security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/chriswiles-core-components/audits/8},
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: "core-components security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "ChrisWiles"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/chriswiles-core-components/audits/8"
identifiers:
- type: other
value: "skillstore:chriswiles-core-components:audit:8"
description: "Skillstore immutable audit report identifier"
Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
sickn33-core-components
2026-09-09
chriswiles-core-components
2026-09-09
Собирайте экраны с использованием паттернов Screen, Box, Stack, Text, Button, Input и Card.
Проверяйте, используют ли компоненты общие токены вместо inline styles, raw values или platform primitives.
Преобразуйте примеры компонентов и правила токенов в понятные рекомендации для командной wiki или pull request.
Проверь этот UI и замени raw platform components на задокументированные базовые компоненты там, где это уместно.
Отрефактори этот компонент, чтобы он использовал токены отступов, цвета и типографики из руководства по базовым компонентам.
Создай план макета формы с использованием VStack, Input, Button, состояний валидации и состояний загрузки из паттернов базовых компонентов.
Проверь API этого переиспользуемого компонента на token-based props, обработку variants и anti-patterns относительно навыка базовых компонентов.
Автор
ChrisWilesЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Репозиторий
https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/core-componentsСсылка
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Актуальность поддержки
18.07.2026
Использование
4 загрузок · 236 просмотров
Структура файлов
📄 SKILL.md
Отладка кода с анализом первопричины
Баги тратят время, когда команды исправляют симптомы без доказательств. Этот навык проводит Claude, Codex и Claude Code через структурированную диагностику перед внесением изменений.
Создавайте устойчивые состояния UI в React
Интерфейсы React часто не показывают понятные состояния загрузки, ошибки, пустого результата и отправки. Этот навык дает практические паттерны для предсказуемого поведения асинхронного UI.
Создавайте надежные формы Formik
В формах Formik часто повторяется логика валидации, отображения ошибок и состояния отправки. Этот навык предоставляет лаконичные паттерны для переиспользуемых полей, схем Yup, отправки через GraphQL, форм редактирования и многошаговых потоков.
Пишите более качественные Jest-тесты с переиспользуемыми паттернами
Unit-тесты часто становятся хрупкими, когда они дублируют настройку или детали реализации тестов. Этот skill предоставляет переиспользуемые Jest-паттерны для фабрик, моков, render helpers и TDD.
Создание операций GraphQL с генерируемыми типами
Работа с GraphQL-клиентом часто приводит к дублированию операций, слабой обработке ошибок и устаревшим генерируемым типам. Этот навык помогает последовательно использовать файлы .gql, сгенерированные хуки Apollo, шаги codegen и защитные механизмы UI для мутаций.
Оптимизация приложений React Native
от vercel-labs
Приложения React Native могут страдать от медленных списков, дерганых анимаций и ошибок, связанных с платформой. Этот навык дает Codex, Claude и Claude Code краткие правила для производительной работы с Expo и React Native.
Создание интерфейсов shadcn/ui в Next.js
от Asmayaseen
Командам React нужны единообразные UI-паттерны, которые работают с современным Next.js. Этот навык предоставляет рекомендации по настройке shadcn/ui, примеры компонентов, валидацию форм, таблицы, боковые панели и паттерны темного режима.
Настройка Tailwind CSS для Expo
от expo
Командам Expo нужна единообразная стилизация для native- и web-таргетов. Этот навык предоставляет сфокусированный путь настройки для Tailwind CSS v4, NativeWind v5 и react-native-css.
Создание Expo Dev Clients для нативного тестирования
от expo
Командам Expo нужны надежные клиенты разработки, когда нативный код выходит за рамки Expo Go. Этот навык помогает с настройкой сборки EAS, доставкой через TestFlight, локальными сборками, установкой и базовым устранением неполадок.
Создание DOM-компонентов Expo
от expo
Командам Expo часто нужны веб-библиотеки внутри нативных приложений без их переписывания. Этот навык помогает Claude, Codex и Claude Code использовать безопасные паттерны DOM-компонентов.
Создание сетевых сценариев для Expo
от expo
Мобильным приложениям нужны надежные API-запросы, кэширование, обработка токенов и поведение в офлайн-режиме. Этот навык помогает разработчикам Expo работать с fetch, React Query, SecureStore, NetInfo и конфигурацией на основе окружения.