スキル core-components

📦

core-components

Name: core-components
Author: ChrisWiles

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

一貫性のあるコアUIコンポーネントを構築する

一貫性のないUIコンポーネントはプロダクト開発を遅らせ、見た目のばらつきを生みます。このスキルは、Claude、Codex、Claude Code が共有トークン、レイアウト、コンポーネントパターンを使うための指針を提供します。

対応: Claude Codex Code(CC)

🥉 79 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/chriswiles-core-components.md 署名済み manifest GET /api/skills/chriswiles-core-components/manifest 署名済み lockfile GET /api/skills/chriswiles-core-components/lockfile

テストする

「core-components」を使用しています。プロダクト画面が、生の View と Text 要素にインラインの padding、color、font sizes を指定して使用している。

期待される結果:

推奨される更新: 生のレイアウト要素を Box と VStack に置き換え、スペーシングをトークン値に対応付け、Text のカラーとサイズのトークンを使用します。既存のコンテンツと挙動は変更しません。

「core-components」を使用しています。 Card コンポーネントが数値の padding と自由形式の variant 文字列を受け取っている。

期待される結果:

レビュー結果: padding を承認済みのトークン値に制限し、サポートされる variant を文書化し、視覚的な差分は Box コンポーネントを通じて渡してください。

「core-components」を使用しています。リスト項目レイアウトが、カスタムコンテナ、ハードコードされた border、手動の icon color 値を混在させている。

期待される結果:

推奨パターン: 行には HStack、テキストには VStack、semantic border tokens、アイコンには tertiary color token を使用します。

セキュリティ監査

安全

v8 • 2026/7/6 バージョン別レポートを開く

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.

スキャンされたファイル

265

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (49)

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/chriswiles-core-components/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/chriswiles-core-components/security.svg)](https://skillstore.io/skills/chriswiles-core-components?utm_source=security_passport_badge)

HTMLバッジ

<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>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

ChrisWiles. (2026). core-components security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-core-components/audits/8

BibTeX形式の引用

@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}
}

CITATION.cff

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"

バリアントを比較

インストール可能なバリアント 2 件

各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。

このバリアントが首位の理由

Skillstore での利用が多い

作者 / ソース Skillstore スコア証拠の信頼度 Skillstore 利用状況更新済み

sickn33 推奨

sickn33-core-components

Skillstore スコア 79

証拠の信頼度高

Skillstore 利用状況 21

更新済み

2026-09-09

ChrisWiles 現在

chriswiles-core-components

Skillstore スコア 79

証拠の信頼度高

Skillstore 利用状況 7

更新済み

2026-09-09

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

プロダクト画面を作成する

Screen、Box、Stack、Text、Button、Input、Card のパターンを使って画面を組み立てます。

UIの一貫性をレビューする

コンポーネントがインラインスタイル、生の値、プラットフォームプリミティブではなく共有トークンを使っているかを確認します。

コンポーネントの使用方法を文書化する

コンポーネント例とトークンルールを、チームWikiやプルリクエスト向けの明確なガイダンスに変換します。

これらのプロンプトを試す

コアコンポーネントを使う

このUIをレビューし、適切な箇所で生のプラットフォームコンポーネントを文書化されたコアコンポーネントに置き換えてください。

デザイントークンを適用する

このコンポーネントをリファクタリングし、コアコンポーネントガイドラインのスペーシング、カラー、タイポグラフィトークンを使うようにしてください。

フォームレイアウトを設計する

コアコンポーネントパターンの VStack、Input、Button、検証状態、読み込み状態を使って、フォームレイアウトの計画を作成してください。

コンポーネントPropsを監査する

この再利用可能なコンポーネントAPIを、トークンベースのprops、バリアント処理、コアコンポーネントスキルに照らしたアンチパターンの観点からレビューしてください。

ベストプラクティス

カスタムコンテナを追加する前に、まずコアレイアウトコンポーネントから始めます。
表示されるすべてのテキスト状態に、セマンティックカラーとタイポグラフィトークンを使用します。
新しいバリアントは、このスキルで使われているものと同じトークン名とコンポーネントpropsで文書化します。

回避

トークンが存在するのに、スペーシング、カラー、フォント値をハードコードする。
標準UIに対して、生のプラットフォーム View または Text コンポーネントをインポートする。
共有コンポーネントpropsを迂回するインラインスタイルを追加する。

よくある質問

このスキルはコンポーネントライブラリをインストールしますか？

いいえ。すでにコアコンポーネントを持つプロジェクト向けの使用ガイダンスを提供します。

どのツールで使えますか？

Claude、Codex、Claude Code 向けに文書化されています。

実際のソースファイルは含まれていますか？

いいえ。このスキルには SKILL.md 内のガイダンスと TSX 例のみが含まれます。

React Native の画面に役立ちますか？

はい。例では React Native スタイルのコンポーネント名と TSX パターンを使用しています。

すべてのトークン値を定義していますか？

いいえ。プロジェクトがすでにサポートしているべき一般的なスペーシング、カラー、タイポグラフィトークンを列挙しています。

既存のUIコードをレビューできますか？

はい。コードを、文書化されたトークンおよびコンポーネントパターンと比較できます。

開発者情報

作成者

ChrisWiles

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

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

参照

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

メンテナンスの新しさ

2026/7/18

利用状況

4 ダウンロード · 236 閲覧

ファイル構成

Expoのネットワーキングフローを構築

作成者 expo

モバイルアプリには、信頼性の高いAPIリクエスト、キャッシュ、トークン処理、オフライン動作が必要です。このスキルは、Expo開発者がfetch、React Query、SecureStore、NetInfo、環境ベースの設定を扱うためのガイドです。

コーディング＆開発表示

core-components

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

バリアントを比較

Skillstore スコア

作成できるもの

プロダクト画面を作成する

UIの一貫性をレビューする

コンポーネントの使用方法を文書化する

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

ChrisWiles のその他のスキル

systematic-debugging

react-ui-patterns

formik-patterns

testing-patterns

graphql-schema

関連スキル

vercel-react-native-skills

styling-with-shadcn

expo-tailwind-setup

expo-dev-client

use-dom

native-data-fetching