Communitygithub.com

plugin87/performance

Optimieren Sie die UI-Leistung anhand der Core Web Vitals – LCP, INP, CLS – mit Lade-/Code-Split-Strategie, Layout-Shift-Prävention und Animations-Performance-Regeln. Verwenden Sie dies, wenn der Benutzer die Geschwindigkeit verbessern, Ruckler oder Layout-Shifts beheben, Web-Vitals-Budgets einhalten oder die UI auf schwachen Geräten flüssig erscheinen lassen möchte.

Was ist performance?

Diese Fähigkeit befähigt KI-Agenten, die Benutzeroberfläche einer Webanwendung hinsichtlich Geschwindigkeit und Stabilität zu optimieren, wobei die Performance als Barrierefreiheitsaspekt betrachtet wird – denn langsame oder ruckelnde UIs treffen zuerst schwache Geräte. Sie konzentriert sich auf die drei Core-Web-Vitals-Metriken: Largest Contentful Paint (LCP) ≤ 2,5s, Interaction to Next Paint (INP) ≤ 200ms und Cumulative Layout Shift (CLS) ≤ 0,1, gemessen auf einem mittelklassigen mobilen Profil mit gedrosseltem 4G und 4-facher CPU-Drossel. Die Strategie umfasst das Rendern sichtbarer Inhalte zuerst (z. B. SSR oder Server Components), Code-Splitting nach Route und schweren Komponenten, Lazy-Loading für unterhalb der Falz liegende oder interaktionsgebundene Inhalte (wie Astro-Inseln oder Qwik), das Vorladen einer kritischen Schriftart sowie moderne responsive Bilder. Layout-Shifts werden unterbunden, indem Skelette auf die endgültigen Maße dimensioniert, Medienflächen mit `aspect-ratio` reserviert und niemals Inhalte oberhalb vorhandener Elemente eingefügt werden. Animationen beschränken sich auf `transform` und `opacity`, nutzen `will-change` sparsam, halten sich an 100–300ms Dauer (aus den Motion-Design-Tokens) und beachten `prefers-reduced-motion`. Zur Minimierung des INP wird CSS-State-Styling gegenüber JavaScript bevorzugt und Bibliotheken werden per Komponente importiert, um Tree-Shaking zu ermöglichen. Die Verifikation erfolgt über Lighthouse- oder Felddaten, die die genannten Budgets auf einem mittelklassigen mobilen Gerät einhalten, sowie durch Tests, die sicherstellen, dass die erste Interaktion auch unter Drosselung reaktionsfähig bleibt und keine Layout-Shifts oder nicht-kompositorischen Animationen in Schleifen auftreten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/performance
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Fähigkeit: Performance

Machen Sie die UI schnell und stabil. Betrachten Sie Performance als Barrierefreiheit – langsame/ruckelnde UIs treffen zuerst schwache Geräte.

Schritte

  1. Lesen Sie workflows/performance.md (Core-Web-Vitals-Ziele, Ladestrategie, Layout-Shift, Animationsperformance, Laufzeitkosten des Designsystems).
  2. Diagnostizieren Sie gegen Budgets: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. Messen Sie auf einem mittleren mobilen Profil (Drosselung: langsames 4G + 4× CPU).
  3. Laden: Rendern Sie oberhalb der Falz zuerst (SSR/Server Components), Code-Split nach Route + schwerem Widget, Lazy-Load unterhalb der Falz/hinter Interaktion (Astro-Inseln / Qwik), laden Sie eine kritische Schriftart vor, moderne responsive Bilder.
  4. Töten Sie Layout-Shift: Dimensionieren Sie Skelette auf Endmaße, reservieren Sie Medienfläche via aspect-ratio (tokens/sizing.json), fügen Sie niemals Inhalte oberhalb vorhandener Elemente ein.
  5. Animation: nur transform/opacity, will-change sparsam, 100–300ms (tokens/motion.json), beachten Sie prefers-reduced-motion. Bevorzugen Sie CSS-State-Styling gegenüber JS für niedrigen INP; Tree-Shaking/Pro-Komponenten-Importe.

Verifikation (Definition of Done)

  • Lighthouse-/Felddaten erfüllen LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1 auf mittlerem mobilen Gerät.
  • Erste Interaktion bleibt unter langsamen 4G + 4× CPU-Drosselung reaktionsfähig.
  • Skelette + Medienfläche reservieren Platz (Null CLS beim Laden); keine nicht-kompositorischen Animationen in Schleifen.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

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.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

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...

community

affaan-m/everything-claude-code

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.

community