mdx-sanitizer
Sanitize MDX content for Docusaurus builds. Fixes unescaped angle brackets (<, >, <=, >=), Liquid/Nunjucks template syntax ({{ }}), TypeScript generics (Promise<T>), and inline code backtick edge cases. Use when pre-commit hooks fail on bracket or Liquid validation, or when MDX/JSX bu...
Full skill instructions
Comprehensive MDX content sanitizer that prevents JSX parsing errors caused by angle brackets, generics, and other conflicting patterns.
MDX 2.x treats unescaped < and { as JSX syntax. This causes build failures when content contains:
Promise<T>, Array<string>, Map<K, V><100ms, <=, >=-->, <--, -><link> in prose, <tag> placeholders<>This skill implements a three-layer defense:
Content is sanitized when syncing from .claude/skills/ to website/docs/:
syncSkillDocs.ts - Main skill filessyncSkillSubpages.ts - Reference filesdoc-generator.ts - Generated docsThe git pre-commit hook validates files before commit using validate-brackets.js.
npm run validate:all runs as part of prebuild to catch any issues.
cd website
npm run sanitize:mdx
# or with verbose output
npm run sanitize:mdx -- --verbose
cd website
npm run sanitize:mdx -- --fix
# or shorthand
npm run fix:mdx
import { sanitizeForMdx, validateMdxSafety, isMdxSafe } from './lib/mdx-sanitizer';
// Sanitize content
const result = sanitizeForMdx(content, { useHtmlEntities: true });
if (result.modified) {
console.log(`Fixed ${result.issues.length} issues`);
fs.writeFileSync(path, result.content);
}
// Validate without modifying
const issues = validateMdxSafety(content, 'path/to/file.md');
// Quick check
if (!isMdxSafe(content)) {
// Handle issues
}
The sanitizer uses HTML entities for maximum compatibility:
| Pattern | Original | Escaped |
|---|---|---|
| Less-than | < | < |
| Greater-than | > | > |
| Generics | <T> | &lt;T&gt; |
| Comparison | <= | &lt;= |
Content inside code blocks (``` or `) is automatically protected and never escaped.
website/scripts/lib/mdx-sanitizer.ts - Core sanitizer modulewebsite/scripts/sanitize-mdx.ts - CLI wrapperwebsite/scripts/syncSkillDocs.ts - Integrationwebsite/scripts/syncSkillSubpages.ts - Integrationwebsite/scripts/lib/doc-generator.ts - Integrationwebsite/package.json - npm scripts<100, <0.5ms<=, >=<><--, -->Promise<T>, Array<string>< value<link>, <tag> (not valid HTML)npm run clearnpm run sanitize:mdx -- --fixnpm run buildIf valid JSX components are being escaped:
<MyComponent>)For edge cases, manually escape in source:
`<T>`< and >
Track real-time API cost accrual during LLM execution. Activate on 'cost tracking', 'token usage', 'API costs', 'budget monitoring', 'usage metrics'. NOT for cost estimation, pricing tiers,
Expert in writing OpenAPI 3.0/3.1 specifications for REST APIs. Specializes in schema design, documentation best practices, API-first development, and tooling integration. Generates comprehensive
Implements real-time bidirectional communication between DAG execution engines and visualization dashboards via WebSocket. Covers connection management, typed event protocols, reconnection
Modern web applications with authentic Windows 3.1 aesthetic. Solid navy title bars, Program Manager navigation, beveled borders, single window controls. Extrapolates Win31 to AI chatbots (Cue
Expert in drone systems, computer vision, and autonomous navigation. Specializes in flight control, SLAM, object detection, sensor fusion, and path planning. Activate on "drone", "UAV", "SLAM",
Structured logging, distributed tracing, and metrics for production applications. [What: OpenTelemetry setup, log level strategy, correlation IDs, SLI/SLO alerting thresholds, Grafana dashboard
End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards. Use for complex forms, validation architecture, autosave,
Generate context-aware code review checklists from PR diffs — tailored to language, codebase patterns, and team standards. Identifies what reviewers should focus on. NOT for automated code
Orchestrate multi-agent collaborative document synthesis through 6 phases - Divergence, Synthesis, Commentary, Consolidation, Reality Check, Final Merge. Produces authoritative founding documents
Performance optimization and continuous improvement for sobriety.tools recovery app. Use for load time optimization, offline capability, crisis detection, performance monitoring, automated
Guides creation of high-quality Agent Skills with domain expertise, anti-pattern detection, and progressive disclosure best practices. Use when creating skills, reviewing existing skills, or when users mention improving skill quality, encoding expertise, or avoiding common AI tooling mistakes. Ac...
Expert in PostgreSQL performance tuning, query optimization, and database administration. Specializes in EXPLAIN analysis, indexing strategies, connection pooling, partitioning, and production-grade
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience