Auditiere und behebe Probleme der Animationsleistung, einschließlich Layout-Thrashing, Compositor-Eigenschaften, scrollgebundener Bewegungen und Unschärfeeffekte. Verwende dieses Skill, wenn Animationen ruckeln, Übergänge stocken oder die CSS/JS-Animationsleistung überprüft werden soll.
Dieser Skill, `ibelick/fixing-motion-performance`, ist ein spezialisiertes Werkzeug für Entwickler und KI-Agenten, um Animationsleistungsprobleme in Webanwendungen zu diagnostizieren und zu beheben. Er konzentriert sich auf die Identifizierung und Optimierung von häufigen Engpässen wie Layout-Thrashing (erzwungene Neuberechnungen des Layouts durch JavaScript), die Nutzung von Compositor-freundlichen Eigenschaften (z. B. `transform` und `opacity` anstelle von `left`/`top`), die Vermeidung von scrollabhängigen Animationen, die das Rendering blockieren, und die effiziente Anwendung von Unschärfeeffekten. Der Skill ist für den Einsatz mit KI-Coding-Assistenten wie Claude Code, Cursor oder Codex konzipiert. Er analysiert vorhandenen CSS/JS-Code, schlägt gezielte Optimierungen vor und kann sogar automatisch Änderungen am Code vornehmen. Die zugrunde liegende Logik basiert auf gängigen Web-Performance-Richtlinien und Best Practices, wie sie z. B. in den Chrome DevTools oder Lighthouse-Audits zu finden sind. Entwickler profitieren von diesem Skill, indem sie ruckelnde Animationen und stockende Übergänge in flüssige, performante Benutzererlebnisse verwandeln können, ohne manuell tief in die Optimierung einsteigen zu müssen.
npx skills add https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performanceAuditiere und behebe Probleme der Animationsleistung, einschließlich Layout-Thrashing, Compositor-Eigenschaften, scrollgebundener Bewegungen und Unschärfeeffekte. Verwende diesen Skill, wenn Animationen ruckeln, Übergänge stocken oder die CSS/JS-Animationsleistung überprüft werden soll.
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.