Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

animate

Estrellas0

Forks0

Actualizado20 de marzo de 2026 a las 15:09

Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

Dragoon0x

Dragoon0x/optik

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

name	animate
description	Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

/animate — Purposeful Motion

Add motion that serves a purpose:

Page load: Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms.

Hover states: Scale (1.02-1.05), subtle shadow lift, color transitions. Duration: 200-300ms. Easing: var(--ease-spring) for playful, var(--ease-out) for refined.

Scroll reveals: Elements fade in and translate 20-30px as they enter viewport. Use IntersectionObserver. Stagger siblings.

Transitions: All interactive state changes (hover, focus, active) should have transition declarations. Minimum: color, background-color, border-color, box-shadow, transform.

Always include prefers-reduced-motion: reduce media query that disables animations.

Más de este repositorio

mismo repositorio

a11y-audit

Dragoon0x/optik

Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.

2026-03-200

a11y-fix

Dragoon0x/optik

Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.

2026-03-200

align

Dragoon0x/optik

Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.

2026-03-200

aria

Dragoon0x/optik

Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.

2026-03-200

audit

Dragoon0x/optik

Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.

2026-03-200

benchmark

Dragoon0x/optik

Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.

2026-03-200

name	animate
description	Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.

/animate — Purposeful Motion

Add motion that serves a purpose:

Page load: Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms.

Hover states: Scale (1.02-1.05), subtle shadow lift, color transitions. Duration: 200-300ms. Easing: var(--ease-spring) for playful, var(--ease-out) for refined.

Scroll reveals: Elements fade in and translate 20-30px as they enter viewport. Use IntersectionObserver. Stagger siblings.

Transitions: All interactive state changes (hover, focus, active) should have transition declarations. Minimum: color, background-color, border-color, box-shadow, transform.

Always include prefers-reduced-motion: reduce media query that disables animations.