briefroom CDN Policy

✅ Allowed CDNs (7 origins)

These CDNs are allowed from briefroom delivery domains (judge #45-D + sub-judgement 4):

• jsDelivr — https://cdn.jsdelivr.net/npm/... ✅
• cdnjs — https://cdnjs.cloudflare.com/ajax/libs/... ✅
• unpkg — https://unpkg.com/... ✅
• esm.sh — https://esm.sh/... ✅
• Google Fonts (CSS) — https://fonts.googleapis.com/css?... ✅
• Google Fonts (file) — https://fonts.gstatic.com/s/... ✅
• Tailwind Play CDN — https://cdn.tailwindcss.com ⚠️ (unstable, see below)

Recommended approach 1: Relative bundled paths (most reliable)

Resistant to CDN outages and spec changes, ideal for long-term storage.

<!-- ✅ Tailwind bundle (npx tailwindcss で生成した static CSS) -->
<link href="./styles.css" rel="stylesheet">

<!-- ✅ バンドラで build した相対パス JS -->
<script src="./app.js" type="module"></script>

Quick Start: use Tailwind as a relative path

1. Locally run npx tailwindcss -i src/input.css -o styles.css --minify
2. Place the generated styles.css in the same folder as your HTML
3. <link href="./styles.css" rel="stylesheet"> to include it
4. Zip the folder and upload it to briefroom

Recommended approach 2: Via allowed CDNs (simple, CDN-dependent)

For quick demos / mockups:

<!-- ✅ Tailwind v3 (jsdelivr 経由、CSS のみ) -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

<!-- ✅ Tailwind v4 (jsdelivr 経由、JIT) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- ✅ Vue 3 (jsdelivr 経由) -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

<!-- ✅ Alpine.js (jsdelivr 経由) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- ✅ React + ReactDOM (esm.sh 経由) -->
<script type="module">
  import React from 'https://esm.sh/react@18';
  import ReactDOM from 'https://esm.sh/react-dom@18/client';
</script>

<!-- ✅ Google Fonts (Inter family) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<!-- ✅ Font Awesome (cdnjs 経由) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

Prompt templates for AI

Build HTML for briefroom. For Tailwind CSS, bundle a pre-built CSS file (produced by `npx tailwindcss`) or inline it in a `<style>` tag — do not use `cdn.tailwindcss.com` (Tailwind Play CDN is officially discouraged for production and classified "unstable" on briefroom). If you cannot bundle, use `https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css` (jsDelivr) as a CDN fallback. For fonts, Google Fonts `https://fonts.googleapis.com/...` is allowed, or use system-ui. Other JS libs via jsdelivr / cdnjs / unpkg / esm.sh are allowed.

Output as a single self-contained HTML folder for briefroom. For Tailwind CSS, bundle a pre-built CSS file or inline it in a <style> tag — do not use cdn.tailwindcss.com (Play CDN is discouraged for production, classified "unstable"). If a CDN is required, use https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css. For other JS libs, jsdelivr / cdnjs / unpkg / esm.sh are allowed. Google Fonts are allowed.

This code uses Tailwind CSS via `cdn.tailwindcss.com` (Play CDN), which is classified "unstable" on briefroom (officially discouraged for production, previously blocked, may stop working without notice). Please rewrite it as one of:

<!-- Preferred: bundle a pre-built CSS file -->
<link href="./styles.css" rel="stylesheet">

<!-- Alternative: jsDelivr -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.17/dist/tailwind.min.css" rel="stylesheet">

Detection scope + warning behavior

briefroom detects external CDN and iframe references in 5 places in your entry HTML and shows them in the warning panel:

• <link rel="stylesheet" href="https://...">
• <script src="https://..."></script>
• <style>@import url("https://...")</style>
• style="background:url(https://...)"
• <iframe src="https://..."> (judge #96 — allowlisted embeds are excluded from warnings)

Of the URLs shown in the warning panel:

• 7 allowed CDNs → actually work (warning is informational)
• Others → blocked (do not work, must rewrite)
• Tailwind Play CDN → allowed by CSP and currently rendering, but officially discouraged for production and previously blocked → classified "unstable" and always warns (bundling pre-built CSS is recommended)