Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

animate

Sterne0

Forks0

Aktualisiert20. März 2026 um 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.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

Dragoon0x

Dragoon0x/optik

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·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.

Mehr aus diesem Repository

gleiches Repository

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.