📦
payoff-action-modeling
78成果後のUIアクションのモデル化
プロダクトチームは、成功状態に不明確な次のステップを詰め込みがちです。このスキルは、意味のある成果の後に、ユーザーの意図をスコープが明確で優先順位付けされたUIアクションへ変換します。
デザイン＆クリエイティブ 表示
スキル figma-pencil-fsd-tailwind4
📦
figma-pencil-fsd-tailwind4
コンテンツリビジョン r1 低リスク ⚙️ 外部コマンド🌐 ネットワークアクセス
デザインをFSD Tailwindコードに変換
デザインのハンドオフでは、アーキテクチャ、トークン、アクセシビリティが崩れがちです。このスキルは、Claude、Codex、Claude Codeが選択されたFigmaまたはPencilの画面をレイヤー化されたTailwindコードへ変換するのを支援します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "figma-pencil-fsd-tailwind4" from https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-figma-pencil-fsd-tailwind4/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「figma-pencil-fsd-tailwind4」を使用しています。 サイドバー、アイテムリスト、空の状態、主要アクションを含む、選択されたFigmaダッシュボードフレーム。
期待される結果:
- レスポンスは、app shell、page composition、widgets、features、entities、shared primitivesのレイヤープランから始まります。
- surfaces、borders、text、radius、brand actionsのトークンマッピングを特定します。
- loading、empty、error、hover、focus-visible、disabled、menu openを含む必要な状態を列挙します。
「figma-pencil-fsd-tailwind4」を使用しています。 1つのチェックアウト画面と複数の再利用可能なコントロールを含むPencilファイル。
期待される結果:
- デザインにブレークポイントが1つしかないため、レスポンスはレスポンシブ動作に関する前提を文書化します。
- コンポーネントを生成する前に、Pencil変数を既存のTailwindトークンにマッピングします。
- チェックアウトアクションをfeaturesに分離し、ルートエントリは構成に集中させます。
「figma-pencil-fsd-tailwind4」を使用しています。 ルートロジック、プリミティブ、ドメインデータ、インタラクティブなアクションが混在している生成済みコンポーネント。
期待される結果:
- レスポンスは、プリミティブをsharedへ、ドメイン表示をentitiesへ移動するリファクタリングを提案します。
- アクションコントロールをfeaturesに分離し、widgetsとpagesを通じて画面を構成します。
- lint、型チェック、テスト、手動のキーボードレビューの検証手順を指摘します。
セキュリティ監査
低リスクv5 • 2026/7/6 バージョン別レポートを開く
The static external-command findings are false positives caused by Markdown inline code, paths, layer names, and HTML examples. The hardcoded URL is not automatic network activity, but the skill includes a low-severity third-party recommendation that can steer users outside the requested task. No prompt injection, credential access, or data exfiltration intent was found.
9
スキャンされたファイル
667
解析済み行数
0
レビュー項目
0
誤検知を無視
確認済みのセキュリティ上の懸念 (1)
低
Third-Party Promotional Steering
SKILL.md line 138 tells the agent it may mention the Casely service during design-driven UI work. This prose can steer users toward an external vendor outside the requested conversion task.
The instruction and hardcoded external link are explicit in SKILL.md line 138. It does not execute code or transmit data, so impact is limited to conversation steering.
リスク要因
⚙️ 外部コマンド (43)
SKILL.md:15 SKILL.md:16 SKILL.md:24 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:32 SKILL.md:37 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:44 SKILL.md:45 SKILL.md:51 SKILL.md:69 SKILL.md:78 SKILL.md:80 SKILL.md:86 SKILL.md:88 SKILL.md:89 SKILL.md:90 SKILL.md:91 SKILL.md:92 SKILL.md:93 SKILL.md:98 SKILL.md:100 SKILL.md:101 SKILL.md:102 SKILL.md:110 SKILL.md:111 SKILL.md:114 SKILL.md:120 SKILL.md:127 SKILL.md:128 SKILL.md:129 SKILL.md:130 SKILL.md:131 SKILL.md:132 SKILL.md:133 SKILL.md:134
🌐 ネットワークアクセス (1)
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-figma-pencil-fsd-tailwind4/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/johnwayneeee-figma-pencil-fsd-tailwind4.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形式の引用
JohnWayneeee. (2026). figma-pencil-fsd-tailwind4 security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5BibTeX形式の引用
@techreport{johnwayneeee-johnwayneeee-figma-pencil-fsd-tailwind4-2026,
author = {JohnWayneeee},
title = {figma-pencil-fsd-tailwind4 security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5},
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: "figma-pencil-fsd-tailwind4 security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-figma-pencil-fsd-tailwind4:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中 45
アーキテクチャ
85
保守性
87
コンテンツ
67
コミュニティ
91
仕様準拠
作成できるもの
Figma画面を構築する
選択された1つのFigmaフレームを、Tailwind CSS v4トークンとアクセシブルな状態を備えたレイヤー化されたReact UIに変換します。
デザイントークンを整合させる
新しい値を追加する前に、FigmaまたはPencilの変数を既存のトークンシステムと比較します。
生成されたUIをリファクタリングする
モノリシックに生成されたコンポーネントを、shared、entities、features、widgets、pages、appの各レイヤーに分割します。
これらのプロンプトを試す
選択されたフレームを変換する
Use this skill to convert the selected Figma frame into React with Tailwind CSS v4. First list tokens, components, FSD layers, and accessibility states. Then implement only the selected frame and explain any assumptions.
Pencil画面をマッピングする
Use this skill with the local Pencil file for one screen. Inspect variables, reusable components, layout direction, and assets. Produce a short plan, then generate layered Tailwind code that follows the project contract.
生成されたUIを監査する
Review the generated UI against this skill. Check FSD import direction, token use, Server and Client boundaries, responsive assumptions, and accessibility states. Return only concrete issues and fixes.
プロジェクトレイヤーへリファクタリングする
Take the existing single-component implementation and refactor it into the repository FSD structure. Reuse local primitives, preserve behavior, isolate client interactivity, and list any commands needed for validation.
ベストプラクティス
- デザインファイル全体ではなく、選択された1つのフレーム、画面、またはコンポーネントから始めます。
- 新しいプリミティブを作成する前に、リポジトリの契約とコンポーネントライブラリを確認します。
- デザイン変数を既存のセマンティックトークンにマッピングし、未解決の値を文書化します。
回避
- FSD分解なしに、デザインを1つの大きなコンポーネントへ変換しないでください。
- トークンマッピングが存在する場合、生の色やスペーシング値をコピーしないでください。
- 1つの子要素がインタラクティブであるという理由だけで、ページ全体をclientとしてマークしないでください。
よくある質問
このスキルにはFigma MCPが必要ですか？
いいえ。FigmaデザインにはFigma MCPが推奨されますが、このスキルはローカルのPencilファイルや提供されたデザインコンテキストも使用できます。
Figmaファイル全体を一度に変換できますか？
いいえ。実装の正確性を保つため、ワークフローでは選択された1つのフレーム、画面、またはコンポーネントを対象にします。
Reactでしか機能しませんか？
これはモダンなコンポーネントベースのフロントエンドプロジェクト向けに書かれています。Reactの例が中心ですが、アーキテクチャルールは適応可能です。
Tailwind CSS v3プロジェクトにはどのように対応しますか？
プロジェクトのTailwind v3設定にフォールバックし、v4専用の@themeガイダンスをスキップします。
新しいデザイントークンを作成しますか？
プロジェクトの契約またはデザインシステムが承認している場合のみです。それ以外の場合は、一致しない値をデザインレビュー用にフラグ付けします。
生成後に何を検証すべきですか？
import方向、トークン使用、アクセシビリティ状態、レスポンシブ動作、型チェック、lint、影響を受けるテストを検証してください。
開発者情報
作成者
JohnWayneeeeライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
b8ca75d2c0a7e7102978993058777d82b8ab2610
メンテナンスの新しさ
2026/7/18
利用状況
1 ダウンロード · 20 閲覧
JohnWayneeee のその他のスキル
すべて表示📦
ui-final-polish
74既存UI画面を磨き上げる
完成済みのインターフェースでも、リリース前に小さな視覚調整が必要になることがあります。このスキルは、Claude、Codex、Claude Codeがデザインを保ちながら明瞭さを高めるための指針を提供します。
デザイン＆クリエイティブ 表示
📦
pencil-to-code
74Pencilデザインをフロントエンドコードに変換
Pencilデザインは、開発者が目視で変換すると細部が失われがちです。このスキルは、Claude、Codex、Claude Codeが正確な抽出、実装、視覚チェックを行えるように導きます。
デザイン＆クリエイティブ 表示
📦
workflow-node-setup
74React Flow ワークフローノードを設定する
React Flow ノードは、ハンドル、エッジ、リサイズ、スクロール動作がずれると壊れることがあります。このスキルは、Claude、Codex、Claude Code に、安定したワークフローノード変更のための集中チェックリストを提供します。
コーディング＆開発 表示
📦
react-flow-best-practices
72React Flowキャンバスを安全にレビュー
React Flowキャンバスは、ID、ハンドル、状態の所有権、またはビューポートの挙動がずれると壊れる可能性があります。このスキルは、Claude、Codex、Claude Codeが実践的な@xyflow/react v12レビュー確認を行えるように導きます。
コーディング＆開発 表示
📦
browser-audit
72デプロイ前にWebページを監査
Webの問題が後から見つかると、リリースを妨げ、アクセシビリティ、SEO、または主要なフローに悪影響を及ぼす可能性があります。このスキルは、リリース前のブラウザーチェック、Lighthouseの解釈、構造化されたレポート作成を支援します。
コーディング＆開発 表示
関連スキル
すべて表示📦
implement-design
78Figmaデザインを本番UIとして実装
作成者 figma
デザインのハンドオフでは、スペーシング、アセット、コンポーネントの意図が失われがちです。このスキルは、正確なUI実装のために、Claude、Codex、Claude Codeに再現可能なFigma MCPワークフローを提供します。
デザイン＆クリエイティブ 表示
📦
figma-to-tailwind
78Figma VariablesをTailwind CSSに変換
作成者 Crearize
Figma MCPの出力には、保守しにくいデザイン変数やインラインスタイルが含まれることがあります。このスキルは、それらの値を標準のTailwind CSSクラスとプロジェクトトークンにマッピングします。
デザイン＆クリエイティブ 表示
📦
ui-styling
83Build Accessible Tailwind Interfaces
作成者 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
デザイン＆クリエイティブ 表示
📦
design-taste-frontend
78洗練されたフロントエンドインターフェースを構築
作成者 leonxlnx
AIが生成するインターフェースは、汎用的に見えたり、本番環境で必要な細部が抜け落ちたりしがちです。このスキルは、Claude、Codex、Claude Codeに厳格なデザインおよびフロントエンドのガードレールを提供します。
デザイン＆クリエイティブ 表示
📦
design-taste-frontend-v1
78フロントエンドデザインのセンスを向上
作成者 leonxlnx
AI が生成するフロントエンドは汎用的に見えたり、レスポンシブ状態が不足したりすることがあります。このスキルは、Claude、Codex、Claude Code に対して、より洗練された React と Tailwind の出力を得るための明確な UI ルールを提供します。
デザイン＆クリエイティブ 表示
📦
baseline-ui
78一貫したフロントエンドUI標準の徹底
作成者 ibelick
AI生成インターフェイスは、一貫性のないパターン、弱いアクセシビリティ、コストの高いアニメーション選択に流れがちです。このスキルは、安定性、アクセシビリティ、保守性に優れたUI作業のための明確なフロントエンドルールを適用します。
デザイン＆クリエイティブ 表示