mcscatblog-react-widget Skill

Source

• Creator: microsoft
• Repository: microsoft/mcscatblog
• Skill file: .claude/skills/mcscatblog-react-widget/SKILL.md

What it does

Build and embed a React widget into a Jekyll blog post as a self-contained HTML file

Skill instructions

Embed a React Widget in a Blog Post Build a React (JSX) component into a single self-contained HTML file and embed it in a Jekyll/Chirpy blog post via iframe. Key Constraints - Jekyll processes all .html files through Liquid. Files without front matter are treated as static files and copied as-is — this is what we want. Never add YAML front matter or {% raw %} tags to widget HTML files. - Minified JS often contains template-literal syntax (${...}, backticks) that Liquid interprets as tags, causing builds to hang indefinitely. The solution is to let the file be a static file (no front matter = no Liquid processing). - Build time: Jekyll takes ~60 seconds on this repo. That's normal, not a hang. Wait for it. - Never put nodemodules inside the blog repo. Jekyll copies all static files under assets/ — thousands of files from nodemodules will make builds take 10+ minutes. The exclude config in config.yml does NOT prevent static files under assets/ from being copied. Build Location Keep the