performance
Skill1 starsChanged 4 months agoMITView on GitHub
Otimização de performance web e de aplicações baseada em medição: Core Web Vitals (LCP/INP/CLS), profiling antes de otimizar, camadas de cache, lazy loading, bundle size e performance de query. Use quando o usuário mencionar: "performance", "otimizar", "está lento", "Core Web Vitals", "LCP", "tempo de carregamento", "bundle grande", "lazy load", "cache", "profiling", "lighthouse", "TTFB".
78 other projects use a version of this.
Adopted by
Most recently taken up by
- Stijnus/dsh-rev-engtheir own version, first seen Nov 8, 2026
- Mahesh-Bishnoi/skillstheir own version, first seen Nov 8, 2026
- AnyOrgName/php-skillstheir own version, first seen Nov 8, 2026
- daveebbelaar/bawatheir own version, first seen Nov 8, 2026
- cognitedata/builder-skillstheir own version, first seen Nov 4, 2026
- theexperiencecompany/gaiatheir own version, first seen Nov 3, 2026
Used with
Projects with it also use app-brief, design-from-app and 10 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
StijnusSkillapp-brief
One-page brief (docs/BRIEF.md) for a new macOS app, written before any code. Use when the user has an app idea, wants to replace an app they pay for, or the research and clone skills are done.
Also in 3 projects that use this
- StijnusSkill
design-from-app
Rebuild the look of an app the user likes as a native SwiftUI design kit, by measuring its screenshots (sizes, spacing, type, colors, icons), building its parts, and comparing pixel by pixel until they match. Use when the user names an app whose look they want, shares screenshots of one, or says "make it look like X".
Also in 3 projects that use this
FlorianBruniauxSkilltdd-rust
Also in 3 projects that use this
RodrigoTomeESSkillweb-quality-audit
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
Also in 9 projects that use this
launchapp-devSkilllayout-grid
Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
Also in 3 projects that use this
MohamedAbdallah-14Skillapp-icon
Generate an app icon from a single 1024² master and fan out to iOS (AppIcon.appiconset with squircle-ready 1024 opaque), Android (adaptive foreground + background + Android 13 monochrome), PWA (192/512 + 512 maskable with 80% safe zone), and visionOS (3-layer parallax).
Also in 3 projects that use this
- +1 more from Stijnus
Other versions78 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 78
- rtk-ai/rtk★ 86ksame name
- millionco/react-doctor★ 15ksame name
- midudev/preguntas-entrevista-react★ 7.8ksame name
- BuilderIO/agent-native★ 7.6ksame name
- ethereum/ethereum-org-website★ 6ksame name
- plugin87/ux-ui-agent-skills★ 3.1ksame name
- static-web-server/static-web-server★ 2.4ksame name
- daveebbelaar/bama★ 1.7ksame name
- lichtblick-suite/lichtblick★ 1.2ksame name
- theexperiencecompany/gaia★ 325same name
68 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository70 other files it gives its agents.
- agent-creationSkill
- handoffSkill
- task-distributorSkill
- task-plannerSkill
- accessibilitySkill
- airbnb-designSkill
- airtable-designSkill
- atlassian-designSkill
- carbon-designSkill
- cloudscape-designSkill
- coinbase-designSkill
- discord-designSkill
- duolingo-designSkill
- figma-designSkill
- fluent-designSkill
- linear-designSkill
- material-designSkill
- meta-designSkill
- netflix-designSkill
- notion-designSkill
- nubank-designSkill
- one-ui-designSkill
- pinterest-designSkill
- polaris-designSkill
- premium-web-designSkill
- primer-designSkill
- reddit-designSkill
- revolut-designSkill
- robinhood-designSkill
- salesforce-lightning-designSkill
- slack-designSkill
- spectrum-designSkill
- spotify-designSkill
- stripe-designSkill
- tiktok-designSkill
- twitch-designSkill
- uber-base-designSkill
- vercel-geist-designSkill
- visionos-designSkill
- whatsapp-designSkill
- economicsSkill
- legal-basicsSkill
- negotiationSkill
- politicalSkill
- api-designSkill
- architectureSkill
- caching-strategiesSkill
- ci-cdSkill
- database-designSkill
- event-drivenSkill
- observabilitySkill
- payment-systemsSkill
- qaSkill
- refactoringSkill
- securitySkill
- system-designSkill
- testingSkill
- clone-websiteSkill
- graphifySkill
- remotionSkill
- The first 60 shown.
The file
Files
Performance
Você atua como engenheiro de performance. Lei fundamental: meça antes de otimizar. A intuição sobre gargalos está quase sempre errada; profiling aponta os 20% do código que causam 80% da lentidão. Otimização sem medição é dívida disfarçada.
Processo (nunca pule)
- Meça — profiler/DevTools/APM para achar o gargalo real (ver [[observability]]).
- Priorize — ataque o maior gargalo; ganho marginal em código quente > reescrita de código frio.
- Otimize — a menor mudança que resolve.
- Meça de novo — confirme o ganho; performance regride sem guardrails.
- Previna regressão — orçamento de performance no CI (ver [[ci-cd]]).
Core Web Vitals (a régua do usuário na web)
| Métrica | Mede | Alvo (bom) | Alavancas |
| LCP (Largest Contentful Paint) | Carregamento percebido | < 2.5s | Otimizar imagem do hero, servidor rápido (TTFB), preconnect, sem render-blocking |
| INP (Interaction to Next Paint) | Responsividade | < 200ms | Quebrar JS longo, web workers, evitar main-thread travada |
| CLS (Cumulative Layout Shift) | Estabilidade visual | < 0.1 | Dimensões em img/vídeo, reservar espaço p/ ads/embeds, fontes com fallback |
Frontend — as maiores alavancas
- Imagens (geralmente o maior peso): formatos modernos (AVIF/WebP),
srcset/tamanho certo,loading="lazy"no que está abaixo da dobra,width/heightpara não causar CLS. - JavaScript: o recurso mais caro. Code splitting, tree shaking,
import()dinâmico, remover libs pesadas. Meça o bundle. - Render: evite render-blocking (CSS/JS crítico inline, resto async/defer);
content-visibilitypara off-screen. - Fontes:
font-display: swap, preload da fonte crítica, subset. - Cache HTTP/CDN: assets com hash +
Cache-Control: immutable; sirva estático da CDN próxima do usuário.
Backend & dados
- N+1 query é o clássico: 1 query vira N ao iterar. Use eager loading/JOIN/batch (ver [[database-design]]).
- Índices nas queries quentes; confirme com
EXPLAIN ANALYZE. - Cache em camadas: request memo → Redis (dados quentes) → CDN (resposta). Invalide com cuidado (o problema difícil).
- Async/filas para trabalho pesado fora do caminho da request (ver [[system-design]]).
- Conexões: pool de DB; evite abrir/fechar por request.
Cache — mental model
Navegador → CDN → Cache de app (Redis) → Banco
↑ mais perto do usuário = mais rápido e baratoCache resolve leitura repetida. Cuidados: staleness (TTL/invalidação), stampede (muitos miss simultâneos → lock/refresh), e nunca cachear dado por-usuário em camada compartilhada sem chave certa.
Armadilhas
- Otimização prematura — complexidade por ganho que ninguém mede.
- Média mente — use p95/p99; a cauda é onde o usuário sofre.
- Micro-otimizar código frio — irrelevante se roda 1x/dia.
- Cache sem invalidação — troca bug de lentidão por bug de dado velho.
Recursos externos
| Recurso | O que pegar |
| web.dev — Performance | Core Web Vitals, receitas de otimização de carregamento. |
| web.dev — Vitals | Definição e como medir LCP/INP/CLS. |
| Chrome DevTools — Performance | Profiling de main thread, flame charts. |
| Lighthouse | Auditoria automatizada de performance. |
| Use The Index, Luke | Performance de query/índice. |
| Brendan Gregg — Systems Performance | Metodologia de profiling (USE method). |
Do / Don't
| Do | Don't |
| Medir/profile antes | Otimizar por palpite |
| p95/p99 | Só a média |
| Otimizar o gargalo real | Micro-otimizar código frio |
| Cache com invalidação | Cache sem TTL/chave |
| Orçamento de perf no CI | Deixar regredir |
Checklist
- Gargalo identificado por profiling (não intuição)
- Core Web Vitals medidos (LCP<2.5s, INP<200ms, CLS<0.1)
- Imagens otimizadas (formato/tamanho/lazy/dimensões)
- JS reduzido (split/tree-shake/dynamic import), bundle medido
- N+1 eliminado; índices nas queries quentes (EXPLAIN)
- Cache em camadas com invalidação correta
- Ganho remedido; orçamento de performance no CI
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.