Write cutting-edge and modern native CSS. Apply this skill whenever writing, reviewing, or refactoring CSS for components, layouts, design systems, or theming, even if the user doesn't say "modern CSS" explicitly. Covers a self-contained design-token scale (color, size, shadow, ease, type), cascade layers (@layer), @scope for component isolation (donut scopes, :scope specificity, scoping proximity), container queries, :has(), OKLCH/color-mix, native nesting, subgrid, fluid typography via clamp(), scroll-driven animations, logical properties, and concrete native replacements for SCSS mixins, maps, and variables.
Apply this skill whenever the task involves web security: writing or auditing HTTP security headers, configuring CSP, CORS, HSTS, or Permissions-Policy, sanitising untrusted HTML (Sanitizer API / DOMPurify), implementing Trusted Types to prevent DOM-XSS, setting up the Reporting API to capture CSP/COEP/deprecation violations, hardening cookies (SameSite, HttpOnly, Secure, Partitioned), implementing WebAuthn / Credential Management, using Web Crypto for client-side cryptography, or auditing code for XSS, CSRF, clickjacking, MIME-sniffing, mixed content, or cross-origin data leakage. Triggers on keywords: XSS, CSRF, CSP, CORS, HSTS, SameSite, innerHTML, eval, Trusted Types, Sanitizer, ReportingObserver, WebAuthn, cross-origin, clickjacking, Content-Security-Policy, Referrer-Policy, Permissions-Policy, subresource integrity, cookie security, secure context, same-origin, mixed content.
