📦

choreograph

Name: choreograph
Author: emilkowalski

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

Coordinate Interface Animations With Clear Timelines

Independent animations can create delays, competing movement, and broken transitions. Choreograph guides coordinated timing, reduced-motion alternatives, and interruption handling through CSS and Motion recipes.

対応: Claude Codex Code(CC)

📊 72 十分

Maintain this Skill? Claim it 📊 72 十分

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/emilkowalski-choreograph.md 署名済み manifest GET /api/skills/emilkowalski-choreograph/manifest 署名済み lockfile GET /api/skills/emilkowalski-choreograph/lockfile

テストする

「choreograph」を使用しています。 A drawer slides in, then staggers eight menu items. Make it faster to use.

期待される結果:

Timeline: Drawer is the lead; start at 0ms and complete a single slide in 250ms.
Static elements: Menu rows and action buttons remain inside the drawer without separate entrances.
Feel check: Inspect the opening frames and confirm visible actions respond immediately.

「choreograph」を使用しています。 Removing a tag leaves a gap until its fade finishes.

期待される結果:

Timeline: The removed tag fades while its siblings move into the gap, starting together at 0ms.
Implementation choice: Use Motion popLayout so the exiting tag stops occupying layout space immediately.
Feel check: Remove several tags quickly and confirm gaps close without waiting for previous exits.

「choreograph」を使用しています。 A step form slides in the same direction for Next and Back.

期待される結果:

Direction: Next content enters from the right; Back content enters from the left.
State handling: Pass the current direction to both AnimatePresence and its keyed child.
Feel check: Reverse direction mid-transition and inspect for duplicate views or stale exit directions.

セキュリティ監査

安全

v1 • 2026/11/4 バージョン別レポートを開く

All 28 static findings are false positives after reviewing both source files. Backticks mark documentation or TypeScript strings; reconnaissance matches describe UI behavior, and the injection phrase appears in defensive guidance. No evidence found of malicious instructions, shell execution, credential access, or data exfiltration.

スキャンされたファイル

465

解析済み行数

レビュー項目

誤検知を無視

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

監査者: codex

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/emilkowalski-choreograph/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

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

HTMLバッジ

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

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/emilkowalski-choreograph.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). choreograph security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-choreograph/audits/1

BibTeX形式の引用

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

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

Simplify Repeated Product Interactions

Remove nested entrances and unnecessary staggering from menus, drawers, and frequently opened panels.

Plan First-Visit Entrances

Assign visual roles and overlapping timing to titles, supporting text, and actions without moving every element.

Coordinate Multi-Step Transitions

Align navigation direction, container resizing, content exits, and interruption checks across a multi-step interface.

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

Review a Panel Entrance

Review the entrance animation in [component]. Identify redundant movement and provide a timeline, static elements, and recording checks.

Plan an Overlapping Entrance

Choreograph the first-visit entrance in [page]. Assign element roles, vary support timing, and include reduced-motion behavior without animating the parent entrance.

Implement Direction-Aware Steps

Update [step component] with Motion transitions that follow Next and Back direction. Coordinate resizing, preserve stable keys, and check rapid repeated navigation.

Orchestrate Interruptible Interaction States

Review [interactive component] across hover, click, reset, and idle states. Coordinate animation cancellation, await reset completion, and specify reduced-motion behavior and interruption tests.

ベストプラクティス

Inventory moving elements and assign roles before selecting timing or implementation tools.
Use the lightest animation approach and remove staggering from frequently used or keyboard-triggered interfaces.
Inspect recordings, test rapid interruptions, and verify reduced-motion behavior before accepting the choreography.

回避

Animating a container entrance and then separately staggering all its children.
Applying identical timing and movement to every element, including decorative details.
Starting new sequences without stopping existing animations or waiting for resets to finish.

よくある質問

What does this skill focus on?

It coordinates relationships between animations, including ordering, overlap, shared timing, exits, and intentional stillness.

Does every interaction need a stagger?

No. Frequently used menus, command palettes, and keyboard-triggered interfaces should show items together or avoid animation.

Which implementation tools are covered?

The recipes cover CSS keyframes, Motion variants, AnimatePresence, shared layout animation, and imperative useAnimate orchestration.

How does it handle reduced-motion preferences?

It removes movement and delays, keeps opacity changes, and shows groups together. Explanatory sequences use discrete frames instead of animated transitions.

Can it verify the visual result from code alone?

No. It requests recordings, frame inspection, and interruption checks to evaluate timing and visual continuity.

Is this a complete animation library?

No. It provides guidance and example patterns that require integration, compatible dependencies, and testing in the target interface.

開発者情報

作成者

emilkowalski

ライセンス

不明

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/emilkowalski/skills/tree/c8a79627b59d72d764d6ab6f2c87c09a48169833/skills/choreograph

参照

1afe00777fa9e67d811c340994d2c28df1bfa7ee

メンテナンスの新しさ

2026/11/5

利用状況

0 ダウンロード · 0 閲覧

ファイル構成

📄 RECIPES.md

📄 SKILL.md

emilkowalski のその他のスキル

すべて表示

📦

apple-design

流麗なApple風Webインターフェースを設計する

ジェスチャー駆動のWebインターフェースは、応答が遅く、硬直的で、視覚的な一貫性に欠けることが少なくありません。このスキルは、レスポンシブなモーション、マテリアル、タイポグラフィ、アクセシビリティ、インタラクション設計に関する実践的なガイダンスを提供します。

デザイン＆クリエイティブ表示

📦

pick-ui-library

Choose 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

Find 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

Make 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

Remove 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

デザインエンジニアリング原則でインターフェースを磨く

インターフェースの細部は、一貫性がない、遅い、または視覚的につながりがないように感じられることがあります。このスキルは、実践的なモーション、インタラクション、パフォーマンス、アクセシビリティのガイダンスを適用し、UIの完成度を高めます。

デザイン＆クリエイティブ表示

すべて表示

📦

design-lint

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

デザイン＆クリエイティブ表示

📦