Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

animate

Estrelas0

Forks0

Atualizado20 de março de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

Dragoon0x

Dragoon0x/optik

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·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.

Mais deste repositório

mesmo repositório

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.