Communitygithub.com

plugin87/rendimiento

Optimiza el rendimiento de la interfaz de usuario según Core Web Vitals (LCP, INP, CLS) con estrategias de carga, división de código, prevención de cambios de diseño y reglas de animación. Úsalo cuando el usuario quiera mejorar la velocidad, corregir tirones o cambios de diseño, cumplir con los presupuestos de Web Vitals o hacer que la interfaz se sienta rápida en dispositivos de gama baja.

¿Qué es rendimiento?

Esta habilidad está diseñada para que un agente de IA (como Claude Code, Cursor o Codex) pueda auditar y optimizar el rendimiento de aplicaciones web, enfocándose en los indicadores Core Web Vitals: LCP (≤2.5s), INP (≤200ms) y CLS (≤0.1). El agente sigue un flujo de trabajo estructurado: primero lee un archivo de configuración (`workflows/performance.md`) que define los objetivos y las estrategias; luego diagnostica el rendimiento en un perfil móvil de gama media con red 4G lenta y CPU reducida a 1/4; finalmente aplica mejoras concretas como renderizar contenido sobre el pliegue con SSR o Server Components, dividir el código por rutas y componentes pesados, cargar de forma diferida lo que está bajo el pliegue, y prevenir cambios de diseño mediante el uso de `aspect-ratio` y esqueletos con dimensiones finales. También optimiza animaciones limitándose a `transform` y `opacity`, usando `will-change` con moderación, respetando `prefers-reduced-motion` y prefiriendo estilos CSS sobre JavaScript para reducir el INP. La verificación se realiza ejecutando Lighthouse o midiendo datos de campo, asegurando que la primera interacción sea receptiva incluso bajo condiciones adversas y que no haya animaciones no compositadas en bucles.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Habilidad: Rendimiento

Haz que la interfaz de usuario sea rápida y estable. Trata el rendimiento como un problema de accesibilidad: las interfaces lentas o con tirones fallan primero en dispositivos de gama baja.

Pasos

  1. Lee workflows/performance.md (objetivos de Core Web Vitals, estrategia de carga, cambios de diseño, rendimiento de animaciones, costo de ejecución del sistema de diseño).
  2. Diagnostica contra los presupuestos: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Mide en un perfil móvil de gama media (acelera 4G lenta + CPU 4×).
  3. Carga: renderiza primero el contenido sobre el pliegue (SSR/Server Components), divide el código por ruta + widget pesado, carga diferida lo que está bajo el pliegue o detrás de una interacción (islas Astro / Qwik), precarga un peso de fuente crítico, imágenes responsivas modernas.
  4. Elimina los cambios de diseño: dimensiona los esqueletos con las dimensiones finales, reserva espacio para medios mediante aspect-ratio (tokens/sizing.json), nunca inyectes contenido encima del existente.
  5. Animación: solo transform/opacity, usa will-change con moderación, 100–300ms (tokens/motion.json), respeta prefers-reduced-motion. Prefiere el estilo CSS con estados sobre JavaScript para un INP bajo; importaciones árbolizadas por componente.

Verificación (criterio de aceptación)

  • Los datos de Lighthouse o de campo cumplen con LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 en móvil de gama media.
  • La primera interacción sigue siendo receptiva bajo aceleración de 4G lenta + CPU 4×.
  • Los esqueletos y el espacio reservado para medios (CLS cero en carga); no hay animaciones no compositadas en bucles.

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.

Skills relacionados

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