critical-css-inliner
Installation
SKILL.md
Critical CSS Inliner
This skill identifies and extracts the CSS needed for the 'above the fold' content and inlines it for instant rendering.
Instructions
- Identify elements visible on initial page load (Header, Hero, Navigation).
- Extract the minimum CSS required for these elements.
- Inline this CSS in the HTML
<head>. - Defer the rest of the CSS to load asynchronously.
- Test rendering performance using specialized speed tools.
Examples
- "Identify the critical CSS for my landing page's hero section."
- "Explain how to defer non-critical CSS in a Next.js project."