# CSS Non Blocking

> CSS Non Blocking is an Agent Skill for testing & quality published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render. Check the rendered layout across breakpoints and interaction states before proposing a fix.

- Skill name: `css-non-blocking`
- Category: [Testing & Quality](https://www.openparable.com/skill/testing-quality/1)
- Source: https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/css-non-blocking/SKILL.md
- Repository: thedaviddias/Front-End-Checklist (73,218 GitHub stars when collected)

## SKILL.md

# Load CSS without blocking render

Render-blocking CSS delays First Contentful Paint—users see a blank screen while waiting for stylesheets to download and parse.

## Quick Reference

- Use `<link rel="preload" as="style">` with onload handler
- Inline critical CSS, defer non-critical styles
- Use media queries to split CSS by viewport/feature
- Modern: Next.js/Vite handle this automatically

## Check

Analyze this CSS loading implementation to ensure stylesheets are loaded without blocking the DOM parsing and rendering process.

## Fix

Implement non-blocking CSS loading using the preload technique with media attributes and loadCSS polyfill for better performance.

## Explain

Explain how non-blocking CSS loading improves page performance by preventing render-blocking resources from delaying the initial paint.

## Code Review

Review stylesheets, component styles, and responsive states related to Load CSS without blocking render. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/css/css-non-blocking

---

Source: https://www.openparable.com/skill/testing-quality/css-non-blocking (OpenParable). Cite the canonical URL above.