القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.
| 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. |
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.
