mcpField
L
layout-morph

layout-morph

github.com/heyeddi-comその他013 回インストール今日更新
リポジトリ

layout-morph について

Shared-element morphs in Vue 3 with Quasar v-morph. Use when a card, row, or chip expands into its detail view in the same screen. GSAP Flip is only the fallback when the two states are not in one view. No React, no Tailwind.

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill layout-morph

インストール後、Claude Code で/layout-morphを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

manifest.json
reference.md
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
scripts/
_skill_cli.py
README.md

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

Layout morph

A small surface grows into its detail without a hard cut. Quasar v-morph owns that move. Springs for hover, press, and dialog entry stay in @motion-physics.

When to use

  • A card, list row, or chip and its expanded panel are both in the same view.
  • The user asked for a shared-element or layout transition.

Do not morph every route change. Do not morph a data table into itself.

Setup

Morph is registered with Quasar in the bootstrap owned by @primevue-aura:

import { Quasar, Dialog, Notify, Morph } from 'quasar';

app.use(Quasar, { plugins: { Dialog, Notify, Morph } });

No extra package. Quasar already ships v-morph.

Pattern

Both states share one group name. Colors come from @aura-design-tokens.

<script setup>
import { ref } from 'vue';

const morphGroup = ref('card');

function toggleView() {
  morphGroup.value = morphGroup.value === 'card' ? 'expanded' : 'card';
}
</script>

<template>
  <div>
    <div
      v-morph:card:step-group="morphGroup"
      class="compact-card"
      @click="toggleView"
    >
      <div class="card-title">Performance metrics</div>
    </div>

    <div v-morph:expanded:step-group="morphGroup" class="expanded-panel">
      <h3>Performance metrics</h3>
      <button type="button" @click="toggleView">Close</button>
    </div>
  </div>
</template>

<style scoped>
.compact-card,
.expanded-panel {
  background: var(--app-surface-card);
  border: 1px solid var(--app-border);
  color: var(--app-text-main);
}
.compact-card {
  width: 280px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
}
.expanded-panel {
  width: min(600px, 100%);
  padding: 24px;
  border-radius: 16px;
}
</style>

GSAP Flip

Use gsap Flip only when the compact state and the expanded state cannot live in the same component, such as a list on one route and a detail page on another. Install gsap only in that case. Prefer a route transition or @motion-physics modalEnter when a morph would be decorative.

Reduced motion

When prefers-reduced-motion: reduce matches, swap the group without the morph. Show the expanded panel immediately.

Next

After the morph exists, @fancy-ui-craft only if this surface also needs depth. Otherwise @visual-verification.

コメント

Markdown 対応