# Styled Jsx Csp Nonce

> Configure styled-jsx to work with strict CSP using nonces (Next.js/custom Document patterns). Use when CSP blocks inline styles. Use when this capability is needed.

- Skill: `tomevault-io/styled-jsx-csp-nonce` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/styled-jsx-csp-nonce`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/styled-jsx-csp-nonce/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/styled-jsx-csp-nonce

---


# styled-jsx CSP Nonce Skill

Enable styled-jsx under strict Content-Security-Policy rules.

## What to do

1. Identify the framework (Next.js pages router, app router, custom SSR).
2. Confirm where the nonce is generated (server) and how it reaches HTML.
3. Ensure:
   - CSP header includes style-src with the same nonce
   - styled-jsx style tags receive the nonce attribute

## Output expectations

- Provide the minimal code changes needed in the appropriate files.
- Include notes on where the nonce originates and how it propagates.
- Avoid insecure CSP suggestions (do not recommend unsafe-inline).

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/andireuter) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->

