Communitygithub.com

plugin87/performance

Otimize o desempenho da UI de acordo com os Core Web Vitals — LCP, INP, CLS — com estratégia de carregamento/code-split, prevenção de layout shift e regras de animação. Use quando o usuário quiser melhorar a velocidade, corrigir jank ou layout shift, atingir metas de Web Vitals ou fazer uma UI parecer rápida em dispositivos de baixo custo.

O que é performance?

Este skill automatiza a otimização de desempenho de interfaces de usuário focando nos Core Web Vitals: LCP (≤ 2.5s), INP (≤ 200ms) e CLS (≤ 0.1). Ele é útil para desenvolvedores que precisam garantir que suas aplicações sejam rápidas e estáveis, especialmente em dispositivos de baixo custo, tratando desempenho como uma questão de acessibilidade. O skill funciona lendo um arquivo de workflow (`workflows/performance.md`) que define metas e estratégias, depois diagnostica o site em um perfil mobile intermediário (com limitação de 4G lento e CPU 4×). Ele orienta ações como renderizar conteúdo acima da dobra primeiro, dividir código por rota e widget pesado, carregar sob demanda conteúdo abaixo da dobra ou atrás de interação, pré-carregar fontes críticas e usar imagens responsivas modernas. Para eliminar layout shift, sugere dimensionar skeletons para as dimensões finais e reservar espaço de mídia com `aspect-ratio`. Para animações, recomenda usar apenas `transform` e `opacity`, aplicar `will-change` com moderação, manter durações entre 100-300ms e respeitar `prefers-reduced-motion`. A verificação do sucesso é feita através de Lighthouse ou dados de campo nos mesmos limites de LCP, INP e CLS em mobile intermediário, garantindo que a primeira interação permaneça responsiva e que não haja layout shift no carregamento nem animações não-compositoras em loops.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/performance
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Skill: Performance

Faça a UI ser rápida e estável. Trate desempenho como uma questão de acessibilidade — UIs lentas/com jank falham primeiro em dispositivos de baixo custo.

Passos

  1. Leia workflows/performance.md (metas de Core Web Vitals, estratégia de carregamento, layout shift, desempenho de animação, custo de runtime do design system).
  2. Diagnostique em relação aos orçamentos: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Meça em um perfil mobile intermediário (limite de 4G lento + 4× CPU).
  3. Carregamento: renderize acima da dobra primeiro (SSR/Server Components), divida código por rota + widget pesado, carregue sob demanda abaixo-da-dobra/atrás-de-interação (ilhas Astro / Qwik), pré-carregue um peso de fonte crítico, use imagens responsivas modernas.
  4. Elimine layout shift: dimensione skeletons para as dimensões finais, reserve espaço de mídia com aspect-ratio (tokens/sizing.json), nunca injete conteúdo acima do existente.
  5. Animação: use apenas transform/opacity, will-change com moderação, 100–300ms (tokens/motion.json), respeite prefers-reduced-motion. Prefira estilização CSS de estado em vez de JS para baixo INP; tree-shake/importações por componente.

Verificação (definição de pronto)

  • Lighthouse / dados de campo atendem LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 em mobile intermediário.
  • Primeira interação permanece responsiva sob limitação de 4G lento + 4× CPU.
  • Skeletons + mídia reservam espaço (CLS zero no carregamento); nenhuma animação não-compositora em loops.

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.

Habilidades Relacionadas

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