📦
apple-design
78流麗なApple風Webインターフェースを設計する
ジェスチャー駆動のWebインターフェースは、応答が遅く、硬直的で、視覚的な一貫性に欠けることが少なくありません。このスキルは、レスポンシブなモーション、マテリアル、タイポグラフィ、アクセシビリティ、インタラクション設計に関する実践的なガイダンスを提供します。
デザイン＆クリエイティブ 表示
スキル gestures
📦
gestures
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス
Build Responsive Drag and Swipe Interactions
Gesture interfaces can lag behind touch input, jump on release, or conflict with scrolling. This skill guides direct tracking, velocity-aware release, and interruptible interactions.
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "gestures" from https://skillstore.io/skills/emilkowalski-gestures.md and its manifest at https://skillstore.io/api/skills/emilkowalski-gestures/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「gestures」を使用しています。 My swipeable card follows the pointer slowly and ignores quick flicks.
期待される結果:
- Tracking: update a motion value or the element transform directly, without easing or per-move React state.
- Release: evaluate both travel distance and release velocity before dismissing.
- Cancellation: return quickly with a spring when neither threshold is met.
「gestures」を使用しています。 Buttons inside my small Vaul drawer trigger dragging, and the drawer feels slow.
期待される結果:
- Exclude interactive children from dragging with the Vaul no-drag attribute.
- For a small floating drawer, consider approximately 200 milliseconds instead of the full-sheet 500-millisecond timing.
- Keep overlay, height, and content timing consistent, then verify touch behavior on a real phone.
「gestures」を使用しています。 How should swipe interactions behave when reduced motion is enabled?
期待される結果:
Keep direct pointer tracking. Reduce momentum, bounce, and decorative movement. On release, use a short position or opacity change instead of a bouncy spring.
セキュリティ監査
安全v1 • 2026/11/8 バージョン別レポートを開く
All 24 static findings are false positives: Markdown formatting caused 23 command-execution alerts, and the URL is a Vaul documentation link. No evidence found of shell execution, data exfiltration, or prompt injection in the reviewed SKILL.md. The file provides gesture implementation guidance and illustrative frontend snippets.
1
スキャンされたファイル
107
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (23)
SKILL.md:12 SKILL.md:18-24 SKILL.md:24-28 SKILL.md:28 SKILL.md:29 SKILL.md:31-36 SKILL.md:36 SKILL.md:42-48 SKILL.md:48-51 SKILL.md:51-57 SKILL.md:57-66 SKILL.md:66-68 SKILL.md:68 SKILL.md:72-75 SKILL.md:75-78 SKILL.md:78-81 SKILL.md:81-89 SKILL.md:89 SKILL.md:96-97 SKILL.md:97 SKILL.md:98-102 SKILL.md:102 SKILL.md:106
🌐 ネットワークアクセス (1)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/emilkowalski-gestures/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/emilkowalski-gestures?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/emilkowalski-gestures?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-gestures/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/emilkowalski-gestures.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形式の引用
emilkowalski. (2026). gestures security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-gestures/audits/1BibTeX形式の引用
@techreport{emilkowalski-emilkowalski-gestures-2026,
author = {emilkowalski},
title = {gestures security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/emilkowalski-gestures/audits/1},
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: "gestures security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "emilkowalski"
date-released: "2026-11-08"
url: "https://skillstore.io/skills/emilkowalski-gestures/audits/1"
identifiers:
- type: other
value: "skillstore:emilkowalski-gestures:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中 55
アーキテクチャ
65
保守性
87
コンテンツ
65
コミュニティ
65
仕様準拠
作成できるもの
Improve swipe dismissal
Refine a swipeable card with direct tracking, fast-flick dismissal, and quick snap-back when release thresholds are not met.
Review mobile drawer behavior
Evaluate drawer timing, overlay synchronization, touch targets, interactive children, and reduced-motion behavior before release.
Diagnose gesture regressions
Use the touch checklist to investigate scroll conflicts, accidental drags, interrupted animations, and differences between desktop simulation and phones.
これらのプロンプトを試す
Understand gesture phases
Explain tracking and release phases for a swipeable card. Identify when direct movement, springs, and velocity should apply.
Add swipe dismissal
Review this Motion component: [component]. Add distance-based and velocity-based swipe dismissal, drag resistance, and quick snap-back without per-move React state.
Refine a Vaul drawer
Review this Vaul drawer: [component]. Check overlay progress, interactive child exclusions, floating-drawer timing, touch targets, and reduced-motion behavior.
Diagnose interrupted gestures
Analyze this gesture implementation and recording observations: [details]. Diagnose lag, release jumps, and interruption failures. Propose focused changes and real-phone regression checks.
ベストプラクティス
- Separate direct tracking from release physics and derive linked visuals from the same drag progress.
- Prefer an established drawer library when it covers the interaction, and verify focus trapping and Escape dismissal.
- Test on real phones with scrolling, interrupted gestures, interactive children, and reduced-motion settings.
回避
- Apply a spring during pointer tracking or update React state for every pointer movement.
- Dismiss only by distance while ignoring fast flicks and release velocity.
- Use keyframe animations on draggable elements or animate linked overlays independently of drag progress.
よくある質問
What does this skill provide?
It provides gesture design rules, Motion and CSS examples, Vaul recommendations, and touch and reduced-motion checklists.
Does this skill install Motion or Vaul?
No. It recommends libraries and shows usage patterns, but includes no installation script or dependency configuration.
When should I use Vaul instead of custom dragging?
Use Vaul for bottom sheets and drawers when it covers your needs. Build custom gestures for interactions without a suitable library.
Why does my dragged element trail the pointer?
Tracking may use easing, a spring, per-move React state, or inherited CSS variables. Prefer direct motion values or element transforms.
How does it address accessibility?
It covers touch targets, scroll coordination, hover gating, and reduced motion. It also highlights focus trapping and Escape dismissal for drawers.
Does the skill verify behavior automatically?
No. It recommends real-phone testing and diagnostic checks, but includes no automated tests or device validation tools.
開発者情報
作成者
emilkowalskiライセンス
不明
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
リポジトリ
https://github.com/emilkowalski/skills/tree/5206a950b715e0cabe7043ea0b2304332b91494e/skills/gestures参照
c993c6abcbffafea2683d7748b53b3dfaf438415
メンテナンスの新しさ
2026/11/9
利用状況
0 ダウンロード · 0 閲覧
ファイル構成
📄 SKILL.md
emilkowalski のその他のスキル
すべて表示📦
pick-ui-library
78Choose the Right Frontend UI Library
Choosing among frontend libraries can waste time and create inconsistent dependencies. This skill maps a defined UI task to an opinionated, curated library recommendation.
コーディング＆開発 表示
📦
find-animation-opportunities
78Find High-Value UI Animation Opportunities
Teams often add motion without a clear user benefit, which can make interfaces feel slow or distracting. This skill audits UI seams, applies a strict decision gate, and produces a short ranked list of precise motion recommendations.
デザイン＆クリエイティブ 表示
📦
mobile-native
78Make Web Apps Feel Native on Mobile
Mobile web applications often feel awkward because browser defaults conflict with touch interaction and changing viewports. This skill applies focused CSS and metadata fixes for a more native mobile experience.
コーディング＆開発 表示
📦
remove-animations
78Remove Unnecessary Interface Animations
Excessive interface motion can delay frequent tasks and distract from useful information. This skill guides targeted removals, smaller effects, and cleanup while checking behavior dependencies.
コーディング＆開発 表示
📦
emil-design-eng
77デザインエンジニアリング原則でインターフェースを磨く
インターフェースの細部は、一貫性がない、遅い、または視覚的につながりがないように感じられることがあります。このスキルは、実践的なモーション、インタラクション、パフォーマンス、アクセシビリティのガイダンスを適用し、UIの完成度を高めます。
デザイン＆クリエイティブ 表示
関連スキル
すべて表示📦
swiftui-expert-skill
82より優れたSwiftUI機能を構築する
作成者 avdlee
SwiftUIプロジェクトでは、非推奨API、壊れやすい状態管理、遅いビュー更新が蓄積することがあります。このスキルは、モダンで保守しやすいSwiftUIコードのための的確なガイダンスを提供します。
コーディング＆開発 表示
📦
frontend-accessibility
79フロントエンドのアクセシビリティを改善する
作成者 EIS-ITS
フロントエンドチームは、日常的なUI作業の中で、キーボード、セマンティック、スクリーンリーダーに関する要件を見落としがちです。このスキルは、Claude、Codex、Claude Code がインターフェースの作成や編集を行う際にアクセシビリティチェックを適用できるよう支援します。
コーディング＆開発 表示
📦
web-performance-seo
79Lighthouse のコントラストエラーを修正する
作成者 ZhanlinCui
Lighthouse のコントラスト監査の失敗は、実行可能な SEO とアクセシビリティの結果を見えにくくすることがあります。このスキルは、CSS のコントラスト問題に対する重点的なチェックと修正パターンを提供します。
コーディング＆開発 表示
📦
frontend-fundamentals
79フロントエンドコンポーネントの基礎をレビューする
作成者 DanielPodolsky
フロントエンドレビューでは、コンポーネントが保守しにくくなるまで、アーキテクチャ、状態、アクセシビリティ、パフォーマンスの問題が見落とされがちです。このスキルは、Claude、Codex、Claude Codeがコンポーネント品質のための焦点を絞ったチェックリスト質問とレビューパターンに沿って進められるようにします。
コーディング＆開発 表示
📦
fixing-motion-performance
79UIアニメーションのモーションパフォーマンスを修正
作成者 ibelick
不適切なアニメーションの選択は、ぎこちないインターフェースや高コストなレンダリング処理を引き起こす可能性があります。このスキルは、Claude、Codex、Claude Codeに、モーションをレビューして改善するための重点的なルールを提供します。
コーディング＆開発 表示
📦
screen-reader-testing
79スクリーンリーダーのアクセシビリティを検証する
作成者 sickn33
スクリーンリーダーの回帰は、視覚的なチェックの裏に隠れることがあります。このスキルは、VoiceOver、NVDA、JAWS、TalkBack の実践的なテスト手順を提供します。
コーディング＆開発 表示