スキル rn-styling

📦

rn-styling

Name: rn-styling
Author: CJHarmath

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

React Nativeスタイリングパターンを適用する

React Nativeのスタイリングは、テーマ、画面、プラットフォーム間で一貫性が失われやすくなります。このスキルは、Expoアプリ向けに実用的なNativeWindとBrandColorsのパターンを提供します。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

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

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "rn-styling" from https://skillstore.io/skills/cjharmath-rn-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-rn-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

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

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/cjharmath-rn-styling.md 署名済み manifest GET /api/skills/cjharmath-rn-styling/manifest 署名済み lockfile GET /api/skills/cjharmath-rn-styling/lockfile

テストする

「rn-styling」を使用しています。カードコンポーネントがハードコードされた暗い色と一貫性のない余白を使用している。

期待される結果:

セマンティックカラーをBrandColorsへ移し、レイアウトの余白はNativeWindクラスに保持する。
ダークモードのバリアントを追加する前に、テーマ対応のカラーフックを使用する。
iOSとAndroidで信頼できる動作にするため、shadowはプラットフォーム固有のスタイルルールに保持する。

「rn-styling」を使用しています。フォーム画面がキーボードに隠れ、safe area insetsを無視している。

期待される結果:

上下の端に対してsafe area処理を行うラッパーで画面を囲む。
プラットフォーム固有のオフセットを使ってkeyboard avoiding動作を使用する。
最終的なレイアウトを小型スマートフォンとタブレットでテストする。

「rn-styling」を使用しています。チームがExpo画面向けのスタイルレビュー用チェックリストを求めている。

期待される結果:

セマンティックカラーの使用、クラス順序、レスポンシブレイアウト、プラットフォームshadow、safe area、アニメーションスタイル配列を確認する。
本番環境に到達する前に、Web専用のTailwind前提を指摘する。
レビュー中にテーマ動作と画面幅に応じた動作を確認する。

セキュリティ監査

安全

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

I found no evidence that the flagged backtick patterns execute commands. The references are Markdown code fences, inline code, JSX snippets, and prose in SKILL.md, so all static findings are false positives. No prompt injection, data exfiltration intent, or system reconnaissance instruction was found.

スキャンされたファイル

361

解析済み行数

レビュー項目

誤検知を無視

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

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

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/cjharmath-rn-styling/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/cjharmath-rn-styling/security.svg)](https://skillstore.io/skills/cjharmath-rn-styling?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/cjharmath-rn-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-rn-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cjharmath-rn-styling.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形式の引用

CJHarmath. (2026). rn-styling security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-rn-styling/audits/8

BibTeX形式の引用

@techreport{cjharmath-cjharmath-rn-styling-2026,
  author = {CJHarmath},
  title = {rn-styling security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/cjharmath-rn-styling/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: "rn-styling security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-rn-styling/audits/8"
identifiers:
  - type: other
    value: "skillstore:cjharmath-rn-styling:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

モバイルコンポーネントを標準化する

React Native UIコンポーネントを構築する際に、一貫した色、余白、レイアウトの選択を適用する。

スタイリングのPull Requestをレビューする

コンポーネントの変更がNativeWind、BrandColors、safe area、プラットフォームスタイルのパターンに従っているかを確認する。

テーマ対応を計画する

共有カラー定数と明確なコンポーネント責務を使って、ライトテーマとダークテーマの利用方法を設計する。

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

コンポーネントスタイルを改善する

このReact Nativeコンポーネントスタイルをレビューしてください。BrandColors、NativeWindクラス、StyleSheetルールをどこで使うべきか提案してください。

クラスのオーバーライドを確認する

これらのNativeWindクラス名について、競合する余白、レイアウト、プラットフォームユーティリティを検査してください。どのスタイルが優先されるか、またどう簡略化できるかを説明してください。

テーマとプラットフォーム対応を追加する

この画面プランを、ライトモード、ダークモード、safe area、キーボード動作、iOS shadows、Android elevationに対応するよう更新してください。

スタイリング移行計画を作成する

このReact Nativeスタイリング方針を監査し、ハードコードされた色からBrandColorsとNativeWindレイアウトユーティリティへ移行する計画を作成してください。

ベストプラクティス

セマンティックカラーにはBrandColorsを使い、レイアウト、余白、ボーダー、radiusにはNativeWindを使用する。
プラットフォーム固有のshadowは、iOS shadowプロパティとAndroid elevationで明示的に保持する。
テーマ、キーボード、safe area、画面幅の動作を対象デバイスでテストする。

回避

セマンティックカラー定数が存在するのに、コンポーネントクラス内でhexカラーをハードコードする。
NativeWindのサポートが異なる箇所で、WebのTailwind動作に依存する。
アニメーションスタイルや再利用スタイルについて、renderパス内でスプレッドを使ってスタイルオブジェクトをマージする。

よくある質問

このスキルにはNativeWindが必要ですか？

NativeWindが利用可能であることを前提としていますが、いくつかのBrandColorsとStyleSheetのパターンは、それがなくても適用できます。

BrandColorsファイルを作成しますか？

いいえ。期待されるカラー構造と、コンポーネントがそれをどのように使うべきかを説明します。

ダークモードに対応できますか？

はい。カラースキームフックとともに、ライトとダークのカラー定数を説明します。

NativeWindのバージョン差異を扱いますか？

NativeWind v2の動作に触れ、ユーティリティを適用する前にインストール済みバージョンを確認することを推奨します。

このスキルはコマンドを実行しますか？

いいえ。このスキルはドキュメントのみであり、React Nativeのスタイリングガイダンスを提供します。

本番UIレビューにはこれで十分ですか？

強力なレビューチェックリストを提供しますが、チームは対象のiOSおよびAndroidデバイスで引き続きテストする必要があります。

開発者情報

作成者

CJHarmath

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-styling

参照

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

メンテナンスの新しさ

2026/7/18

利用状況

7 ダウンロード · 195 閲覧

ファイル構成

Expo SDKを安全にアップグレード

作成者 sickn33

Expo SDKのアップグレードでは、依存関係、設定、ネイティブの挙動が壊れる可能性があります。このスキルは、パッケージ、アプリ設定、API、テストの確認を含む、体系的なアップグレード計画を提供します。

コーディング＆開発表示

rn-styling

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

モバイルコンポーネントを標準化する

スタイリングのPull Requestをレビューする

テーマ対応を計画する

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

ベストプラクティス

回避

よくある質問

開発者情報

CJHarmath のその他のスキル

rn-performance

react-zustand-patterns

web-build-deploy

rn-zustand-patterns

rn-observability

react-state-flows

関連スキル

expo-tailwind-setup

vercel-react-native-skills

expo-dev-client

use-dom

native-data-fetching

upgrading-expo