📦
prompt-engineering-patterns
86本番環境向けLLMプロンプトを最適化
LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。
生産性 表示
スキル interaction-design
📦
interaction-design
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス
洗練されたUIマイクロインタラクションを追加
フィードバックやトランジションが欠けていると、静的なインターフェースは分かりにくく感じられることがあります。このスキルは、プロダクトUI向けのモーション、読み込み状態、ジェスチャー、フィードバックパターンをガイドします。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "interaction-design" from https://skillstore.io/skills/wshobson-interaction-design.md and its manifest at https://skillstore.io/api/skills/wshobson-interaction-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「interaction-design」を使用しています。 保存ボタンをクリックした後、反応がないように感じられる。
期待される結果:
押下フィードバック、読み込みラベル、重複クリックの無効化、成功確認、エラー回復を含む推奨インタラクション計画。
「interaction-design」を使用しています。 ダッシュボードのルート間でページトランジションが唐突に感じられる。
期待される結果:
開始および終了のタイミング、イージングの選択、レイアウトの連続性、モーション低減時の挙動を含むモーション仕様。
「interaction-design」を使用しています。 長いマーケティングページにスクロールトリガーの表示アニメーションが必要。
期待される結果:
intersection observation、transformベースのアニメーション、パフォーマンス制限、アクセシビリティ保護策を使用する段階的な表示アプローチ。
セキュリティ監査
安全v4 • 2026/7/7 バージョン別レポートを開く
All static findings were adjudicated as false positives caused by Markdown code fences, JSX template literals, CSS examples, browser UI examples, and documentation links. No evidence found of prompt injection, malicious intent, credential access, data exfiltration, or executable installer behavior in the reviewed files.
4
スキャンされたファイル
1,781
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (45)
references/animation-libraries.md:347-349 references/animation-libraries.md:349-351 references/animation-libraries.md:417-420 references/animation-libraries.md:420-440 references/microinteraction-patterns.md:53-68 references/microinteraction-patterns.md:108-132 references/microinteraction-patterns.md:173-180 references/microinteraction-patterns.md:205-219 references/microinteraction-patterns.md:245-254 references/microinteraction-patterns.md:302-318 references/microinteraction-patterns.md:355-371 references/microinteraction-patterns.md:394-410 references/microinteraction-patterns.md:474-495 references/scroll-animations.md:53-59 references/scroll-animations.md:186-206 references/scroll-animations.md:391-416 SKILL.md:43-49 SKILL.md:49-53 SKILL.md:53-69 SKILL.md:69-77 SKILL.md:77-87 SKILL.md:87-91 SKILL.md:91-98 SKILL.md:98-104 SKILL.md:104-110 SKILL.md:110-117 SKILL.md:120-130 SKILL.md:130-136 SKILL.md:136-154 SKILL.md:154-160 SKILL.md:160-191 SKILL.md:191-197 SKILL.md:197-214 SKILL.md:214-220 SKILL.md:220-257 SKILL.md:257-261 SKILL.md:261-272 SKILL.md:272-276 SKILL.md:276-287 SKILL.md:287-289 SKILL.md:289-302 SKILL.md:302-306 SKILL.md:306 SKILL.md:307-316 SKILL.md:316
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/wshobson-interaction-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/wshobson-interaction-design?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/wshobson-interaction-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-interaction-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/wshobson-interaction-design.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形式の引用
wshobson. (2026). interaction-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-interaction-design/audits/4BibTeX形式の引用
@techreport{wshobson-wshobson-interaction-design-2026,
author = {wshobson},
title = {interaction-design security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-interaction-design/audits/4},
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: "interaction-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-interaction-design/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-interaction-design:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 45
アーキテクチャ
85
保守性
87
コンテンツ
72
コミュニティ
83
仕様準拠
作成できるもの
プロダクトのフィードバックを改善
読み込み、成功、エラー、確認の各状態を追加し、プロダクト上の操作をより理解しやすくします。
フロントエンドモーションを実装
Framer Motion、CSSトランジション、GSAP、またはブラウザーのアニメーションAPIを使って、実用的なReactモーションパターンを構築します。
インタラクション品質をレビュー
過剰なモーション、欠落しているフィードバック、不適切なタイミング、モーション低減対応の不足についてインターフェースを監査します。
これらのプロンプトを試す
ボタンフィードバックを追加
このボタンに、明確なhover、press、loading、success、errorのフィードバックを追加してください。モーションはアクセシブルで短く保ってください。
読み込み状態を設計
このダッシュボードビューにloading、empty、error、successの状態を作成してください。有用な場合はスケルトンと進捗の手がかりを使用してください。
ページトランジションを構築
このReactアプリのページおよびモーダルトランジションを設計してください。タイミング、イージング、中断時の挙動、モーション低減対応を含めてください。
モーションシステムを監査
このインターフェースのモーションシステムを監査してください。欠落しているフィードバック、過剰なアニメーション、パフォーマンスリスク、アクセシビリティ修正を特定してください。
ベストプラクティス
- フィードバック、位置関係、フォーカス、または連続性を明確にするためにモーションを使用します。
- 一般的なインタラクションは高速に保ち、モーション低減設定をサポートします。
- パフォーマンスが重要な場合は、transformとopacityをアニメーションさせます。
回避
- タスク完了を遅らせる装飾的なモーションを追加しないでください。
- 不要なアニメーションの再生中に入力をブロックしないでください。
- transformで代替できる場合、レイアウト負荷の高いプロパティをアニメーションさせないでください。
よくある質問
このスキルは何の作成に役立ちますか？
Webインターフェース向けのマイクロインタラクション、読み込み状態、トランジション、ジェスチャー、フィードバックパターン、スクロールアニメーションの作成に役立ちます。
本番環境対応のコードを生成しますか？
強力な実装パターンを提供しますが、チームは自分たちのアプリと対象ブラウザーで結果をテストする必要があります。
どのアニメーションツールを扱いますか？
Framer Motion、GSAP、CSSトランジション、CSS keyframes、Web Animations API、ネイティブのView Transitionsを扱います。
アクセシビリティは含まれていますか？
はい。モーション低減サポート、明確なフィードバック、中断可能なアニメーション、段階的な拡張を重視します。
パフォーマンス改善に役立ちますか？
はい。transformとopacityのアニメーション、慎重なwill-changeの使用、リスナーやアニメーションのクリーンアップを推奨します。
誰がこのスキルを使うべきですか？
フロントエンドエンジニア、プロダクトデザイナー、UXチームが、プロダクトインターフェースのインタラクション品質を改善するために使用できます。
開発者情報
作成者
wshobsonライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/24
利用状況
26 ダウンロード · 326 閲覧
wshobson のその他のスキル
すべて表示📦
context-driven-development
81コンテキスト駆動開発を管理する
AI支援プロジェクトでは、プロダクト目標、スタック選定、ワークフロールールが散在すると一貫性が失われます。このスキルは、Conductor のコンテキスト成果物を通じて Claude、Codex、Claude Code を導きます。
コーディング＆開発 表示
📦
startup-financial-modeling
80スタートアップ向け財務モデルを構築する
スタートアップチームは、採用、資金調達、資金使途を計画する前に、明確な予測を必要とします。このスキルは、収益、コスト、ランウェイ、シナリオを実務的な財務計画アウトプットとして整理します。
データ＆アナリティクス 表示
📦
kpi-dashboard-design
79意思決定を促進するKPIダッシュボードを設計する
チームは多くの数値を表示するだけで、行動につながらないダッシュボードを作りがちです。このスキルは、Claude、Codex、Claude Codeが意味のあるKPIを選定し、ビューを構成し、指標を明確に提示するのに役立ちます。
デザイン＆クリエイティブ 表示
📦
postmortem-writing
79非難しないインシデント事後分析を書く
インシデントレビューは、一貫性がなくなったり、非難に焦点が当たったり、実行に移しにくくなったりしがちです。このスキルは、Claude、Codex、Claude Code が、明確なタイムライン、根本原因、担当者を含む構造化された事後分析を作成するのに役立ちます。
ライティング＆コンテンツ 表示
📦
data-storytelling
79明確なデータストーリーを構築
生の指標だけでは、ステークホルダーを説得したり意思決定を支援したりするには不十分なことがよくあります。このスキルは、Claude、Codex、Claude Code が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。
データ＆アナリティクス 表示
関連スキル
すべて表示📦
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.
デザイン＆クリエイティブ 表示
📦
web-accessibility
82WCAG準拠のためのWebアクセシビリティ監査
作成者 89jobrien
アクセシビリティ上のギャップは、ユーザーの利用を妨げ、コンプライアンスリスクを生む可能性があります。このスキルは、WCAG監査、スクリーンリーダーチェック、キーボードテスト、改善計画を支援します。
デザイン＆クリエイティブ 表示
📦
ux-designer
80リサーチ主導のデザインガイダンスでUXを改善
作成者 shubhamsaboo
チームは思い込みに基づいてフローを設計し、アクセシビリティの問題を見落としがちです。このスキルは、UXのベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。
デザイン＆クリエイティブ 表示
📦
design-lint
80Check designs with deterministic CSS rules
作成者 cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
デザイン＆クリエイティブ 表示
📦
ui-ux-designer
79アクセシブルなプロダクトインターフェイスを設計する
作成者 sickn33
チームは、ユーザーニーズを一貫性がありアクセシブルなインターフェイスへ落とし込むことに苦労しがちです。このスキルは、リサーチ、フロー、デザインシステム、トークン、ハンドオフをガイドします。
デザイン＆クリエイティブ 表示
📦
uiux-ops
79UI/UXデザイン運用を改善する
作成者 A-Genno
UI/UX作業は、チームに共有された原則やレビュー習慣がないと方向性がぶれがちです。このスキルは、Claude、Codex、Claude Codeにデザイン判断のための簡潔なチェックリストを提供します。
デザイン＆クリエイティブ 表示