🎯

motion-patterns

🎯Skill

from affaan-m/ecc

What it does

Production-ready animation patterns for React and Next.js using Motion (formerly Framer Motion), covering button feedback, stagger lists, modals, toasts, page transitions, scroll reveals, expanding cards, and shared-element crossfades with accessibility support.

📦

Same repository

affaan-m/ecc(152 items)

motion-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add affaan-m/ecc --skill motion-patterns

skills.sh Install⚠ Installs to .agents/skills/

npx skills add affaan-m/ecc --skill motion-patterns

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/motion-patterns/SKILL.md

SKILL.md

255Installs

AddedMay 19, 2026

View on GitHub Back to Skills

More from this repository10

🎯

frontend-patterns🎯Skill

A skill from the ECC (harness-native operator system for agentic work) that provides React and Next.js frontend patterns. Part of a comprehensive system with 60+ specialized subagents, skills, instincts, memory optimization, and security scanning, working across Claude Code, Codex, Cursor, Gemini, and other AI agent harnesses.

🎯

api-design🎯Skill

Provides REST API design patterns including pagination, error response conventions, and best practices as part of the ECC (Everything Claude Code) cross-harness operator system for agentic development workflows.

🎯

backend-patterns🎯Skill

A skill from the ECC (harness-native operator system) that provides API, database, and caching patterns for backend development. ECC is a comprehensive agent harness system with 232 skills, 60 agents, and hooks for Claude Code, Codex, Cursor, and other AI coding assistants, featuring meta-cognition, continuous learning, and security scanning.

🎯

frontend-design-direction🎯Skill

Part of ECC, the harness-native operator system for agentic work, providing frontend design direction guidance within a comprehensive skills framework covering React, Next.js patterns, design systems, and cross-platform development across Claude Code, Codex, Cursor, and other AI agent harnesses.

🎯

accessibility🎯Skill

A skill from the ECC (harness-native operator system) that provides screen reader support, WCAG compliance guidance, and accessibility best practices for development workflows. ECC is a comprehensive agent harness system with 232 skills, 60 agents, and cross-platform support for Claude Code, Codex, Cursor, and other AI coding assistants.

🎯

design-system🎯Skill

A skill for generating, auditing, and scoring design systems across 10 visual dimensions, detecting AI-generated design patterns ("AI slop"), and producing design tokens, preview pages, and consistency reports.

🎯

frontend-slides🎯Skill

A skill for creating zero-dependency, animation-rich HTML presentations that run entirely in the browser, with support for PowerPoint conversion, visual style exploration, viewport-safe layouts, and keyboard/touch/wheel navigation.

🎯

architecture-decision-records🎯Skill

A skill that captures architectural decisions made during coding sessions as structured ADR documents, detecting decision moments in conversation and recording context, alternatives considered, and consequences using Michael Nygard's lightweight ADR format.

🎯

python-patterns🎯Skill

A comprehensive guide to idiomatic Python patterns covering type hints, error handling, context managers, comprehensions, generators, dataclasses, decorators, concurrency, package organization, and performance optimization best practices.

🎯

postgres-patterns🎯Skill

PostgreSQL quick-reference patterns for query optimization, schema design, indexing strategies (B-tree, GIN, BRIN, partial, covering), Row Level Security, cursor pagination, queue processing with SKIP LOCKED, and anti-pattern detection queries.