Mdx Sanitizer Skill for Claude
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 build errors reference unexpected tokens. NOT for general markdown linting or prose editing.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/curiositech/some_claude_skills --skill mdx-sanitizerThe instruction itself
18 sections, as written by the authorMDX Sanitizer
Comprehensive MDX content sanitizer that prevents JSX parsing errors caused by angle brackets, generics, and other conflicting patterns.
The Problem
MDX 2.x treats unescaped < and { as JSX syntax. This causes build failures when content contains:
- TypeScript generics:
Promise<T>,Array<string>,Map<K, V> - Comparisons:
<100ms,<=,>= - Arrows:
-->,<--,-> - Invalid tags:
<link>in prose,<tag>placeholders - Empty brackets:
<>
Solution Architecture
This skill implements a three-layer defense:
1. Sync-Time Sanitization (Proactive)
Content is sanitized when syncing from .claude/skills/ to website/docs/:
syncSkillDocs.ts- Main skill filessyncSkillSubpages.ts- Reference filesdoc-generator.ts- Generated docs
2. Pre-Commit Validation (Reactive)
The git pre-commit hook validates files before commit using validate-brackets.js.
3. Build-Time Validation (Final Check)
npm run validate:all runs as part of prebuild to catch any issues.
Usage
Check for Issues (Dry Run)
cd website
npm run sanitize:mdx
# or with verbose output
npm run sanitize:mdx -- --verbose
Fix All Issues
cd website
npm run sanitize:mdx -- --fix
# or shorthand
npm run fix:mdx
Programmatic API
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
}
Escaping Strategies
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.
Files Modified
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
Patterns Detected
- Less-than before digit:
<100,<0.5ms - Comparison operators:
<=,>= - Empty brackets:
<> - Arrows:
<--,--> - Generic types:
Promise<T>,Array<string> - Space after less-than:
< value - Invalid pseudo-tags:
<link>,<tag>(not valid HTML)
Troubleshooting
Build Still Fails After Running Sanitizer
- Clear Docusaurus cache:
npm run clear - Re-run sanitizer:
npm run sanitize:mdx -- --fix - Rebuild:
npm run build
False Positives
If valid JSX components are being escaped:
- Ensure they use PascalCase (e.g.,
<MyComponent>) - Check they're valid HTML5 elements
Manual Escaping
For edge cases, manually escape in source:
- Use backticks for inline code:
<T> - Use fenced code blocks for multi-line
- Use HTML entities:
<and>
Sources
Other skills for the same job
different authors, same section of the catalogue
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Use when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing. Uses GPT-5.2 by default for state-of-the-art software engineering.
Implement memory-safe programming with RAII, ownership, smart pointers, and resource management across Rust, C++, and C. Use when writing safe systems code, managing resources, or preventing memory bugs.
Python/HTSlib workflows for genomic files. Use when reading, querying, filtering, or writing SAM/BAM/CRAM, VCF/BCF, FASTA/FASTQ, or tabix data with pysam, including pileup, coverage, indexing, and CRAM references.
Evaluate scientific claims and evidence quality. Use for assessing experimental design validity, identifying biases and confounders, applying evidence grading frameworks (GRADE, Cochrane Risk of Bias), or teaching critical analysis. Best for understanding evidence quality, identifying flaws. For formal peer review writing use peer-review.
Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions; use `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treat external providers (for example Buildkite) as out of scope and report only the details URL.
> Create, build, deploy, and localize declarative agents for M365 Copilot and Teams. USE THIS SKILL for ANY task involving a declarative agent — including localization, scaffolding, editing manifests, adding capabilities, and deploying. Localization requires tokenized manifests and language files that only this skill knows how to produce. "scaffold an agent", "new agent project", "add a capability", "add a plugin", "configure my agent", "deploy my agent", "fix my agent manifest", "edit my agent", "localize my agent", "add localization", "translate my agent", "multi-language agent", "add an API plugin", "add an MCP plugin", "add OAuth to my plugin", "review instructions", "improve instructions", "fix my instructions"
Documentation generation workflow covering API docs, architecture docs, README files, code comments, and technical writing.
How to use it
Take curiositech/mdx-sanitizer from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.