frontend-performance
Use only for frontend performance work: bundle size, Core Web Vitals, render performance, hydration, image optimization, network waterfalls, lazy loading, layout shift, and client-side responsiveness.
Works with
--- name: frontend-performance description: Use only for frontend performance work: bundle size, Core Web Vitals, render performance, hydration, image optimization, network waterfalls, lazy loading, layout shift, and client-side responsiveness. license: MIT --- # Frontend Performance ## Workflow 1. Define the user-visible symptom and performance target. 2. Measure bundle size, network, rendering, hydration, and layout shift before changing code. 3. Identify the bottleneck: JavaScript, CSS, images, data fetching, rendering, or third-party scripts. 4. Apply the smallest effective optimization. 5. Measure again using the same method. ## Common Fixes - Code split, lazy load, memoize carefully, reduce re-renders. - Optimize images, fonts, caching, and critical CSS. - Remove unused dependencies and heavy client-side work. ## Verification - Report before and after measurements. - Run correctness tests and inspect affected pages.
Related free tools on this site
More Performance skills
seo-audit
coreyhaines31/marketingskills
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.
competitor-profiling
coreyhaines31/marketingskills
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitors. For sales-specific battle cards, see sales-enablement.
prospecting
coreyhaines31/marketingskills
When the user wants to find, qualify, and build a list of prospects to reach out to — across B2B SaaS, general B2B, or local small businesses. Also use when the user mentions "prospecting," "build a prospect list," "find prospects," "find leads," "lead gen list," "find SaaS companies that," "find B2B companies," "find local businesses," "ICP-fit accounts," "who should we go after," "outbound list," "target account list," "find clients near me," "businesses without websites," "prospect research," "qualified leads," "find my first customers," "early adopters," "design partners," "beta users," or "who has this problem." Use this for the list-building and qualification phase. For writing the outbound copy after the list is built, see cold-email. For deep competitive research on specific accounts, see competitor-profiling.
