common-fate
について
common-fateスキルは、一緒に動く要素がグループとして知覚されるというゲシュタルト原理を実装します。これは、連動するアニメーション、トランジション、またはドラッグ＆ドロップインタラクションを設計する際に使用し、コンポーネントを視覚的に結び付けます。関連する要素が一斉に反応することで、開発者が直感的なインターフェースを作成するのに役立ちます。
クイックインストール
Claude Code
推奨/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/common-fateこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします
ドキュメント
Principio de Destino Común
Resumen
Los elementos que se mueven en la misma dirección y velocidad se perciben como relacionados o parte del mismo grupo, incluso si tienen otras características diferentes.
Origen
- Escuela: Psicología de la Gestalt
- Año: ~1920s
- Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler
Fundamento Psicológico
El sistema visual evolucionó para detectar objetos en movimiento (depredadores, presas). Elementos que comparten movimiento se interpretan como una unidad porque en la naturaleza, partes del mismo objeto se mueven juntas.
Aplicación en Diseño
Animaciones de Grupo
- Cards que se reorganizan juntas al filtrar
- Elementos que entran en escena coordinadamente
- Collapse/expand de secciones como unidad
- Parallax con capas que se mueven a diferentes velocidades
Drag and Drop
- Múltiples items seleccionados se mueven juntos
- Ghost preview muestra todos los elementos
- Drop zones que se expanden juntas
- Elementos que "hacen espacio" al mismo tiempo
Transiciones de Estado
- Loading states que afectan grupos
- Hover effects que propagan a relacionados
- Selection que destaca grupo completo
- Ripple effects coordinados
Scroll Behaviors
- Sticky headers que se mueven con scroll
- Elementos que aparecen/desaparecen en sync
- Carousels con movimiento coordinado
- Parallax que agrupa por velocidad
Ejemplos
- Trello: Mover card mueve todos sus elementos
- macOS Mission Control: Ventanas de misma app agrupadas
- Figma: Selección múltiple se mueve como unidad
- iOS Folders: Apps dentro se mueven juntas
- Google Photos: Grid items que se reorganizan
Anti-patterns
- ❌ Elementos relacionados que se animan independientemente
- ❌ Transiciones desincronizadas en grupos
- ❌ Drag que no muestra todos los items seleccionados
- ❌ Scroll con elementos relacionados a diferentes velocidades
- ❌ Hover effects que no propagan a elementos asociados
Métricas
- Animation Sync Score: Coordinación de movimientos
- Group Recognition: Usuarios identifican grupos por movimiento
- Interaction Cohesion: Consistencia en comportamientos de grupo
- Motion Hierarchy: Claridad en relaciones por movimiento
Principios Relacionados
- [[proximity]] - Cercanía espacial también agrupa
- [[similarity]] - Similitud visual agrupa
- [[continuity]] - Movimiento en trayectorias continuas
Referencias
- Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms"
- Chang, D. & Nesbitt, K. (2006). "Developing Gestalt-based design guidelines for multi-sensory displays"
- https://www.interaction-design.org/literature/article/the-law-of-common-fate
GitHub リポジトリ
関連スキル
algorithmic-art
メタThis Claude Skill creates original algorithmic art using p5.js with seeded randomness and interactive parameters. It generates .md files for algorithmic philosophies, plus .html and .js files for interactive generative art implementations. Use it when developers need to create flow fields, particle systems, or other computational art while avoiding copyright issues.
subagent-driven-development
開発This skill executes implementation plans by dispatching a fresh subagent for each independent task, with code review between tasks. It enables fast iteration while maintaining quality gates through this review process. Use it when working on mostly independent tasks within the same session to ensure continuous progress with built-in quality checks.
executing-plans
デザインUse the executing-plans skill when you have a complete implementation plan to execute in controlled batches with review checkpoints. It loads and critically reviews the plan, then executes tasks in small batches (default 3 tasks) while reporting progress between each batch for architect review. This ensures systematic implementation with built-in quality control checkpoints.
cost-optimization
その他This Claude Skill helps developers optimize cloud costs through resource rightsizing, tagging strategies, and spending analysis. It provides a framework for reducing cloud expenses and implementing cost governance across AWS, Azure, and GCP. Use it when you need to analyze infrastructure costs, right-size resources, or meet budget constraints.