Auditez et corrigez les problèmes de performance des animations, notamment les thrashs de layout, les propriétés du compositeur, les animations liées au défilement et les effets de flou. À utiliser lorsque les animations saccadent, les transitions hoquettent ou lors de la révision des performances CSS/JS.
Cette compétence permet d'auditer et de corriger les problèmes de performance des animations dans le développement web, en ciblant les thrashs de layout, le mauvais usage des propriétés du compositeur, les animations liées au défilement et les effets de flou coûteux. Elle est utile lorsqu'une animation saccade, qu'une transition n'est pas fluide, ou lors de la révision de code CSS ou JavaScript pour des applications web modernes. La compétence supporte les environnements de développement utilisant des agents IA comme Claude Code, Cursor ou Codex, et s'appuie sur des techniques éprouvées de l'ingénierie de performance web, telles que l'utilisation de `requestAnimationFrame`, la simplification des animations CSS avec `transform` et `opacity`, et l'évitement des effets de flou complexes. Elle aide à identifier les goulots d'étranglement dans le rendu et propose des correctifs concrets pour garantir des animations à 60 fps, améliorant ainsi l'expérience utilisateur.
npx skills add https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performanceAuditez et corrigez les problèmes de performance des animations, notamment les thrashs de layout, les propriétés du compositeur, les animations liées au défilement et les effets de flou. À utiliser lorsque les animations saccadent, les transitions hoquettent ou lors de la révision des performances CSS/JS.
This repo contains 3 individual skills — each has its own dedicated page.
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.