skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

mcscatblog-react-widget

Build a single-file React widget for iframe embedding in Jekyll blog posts.

18|10|Updated Sep 21, 2025
Search Tags:#react#preact#jekyll#iframe#blog widget#single-file build
One-click install
npx skills add https://github.com/microsoft/mcscatblog --skill mcscatblog-react-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcscatblog-react-widget
Source: https://github.com/microsoft/mcscatblog/tree/main/.claude/skills/mcscatblog-react-widget
Command: npx skills add https://github.com/microsoft/mcscatblog --skill mcscatblog-react-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you package an interactive React-based widget so it can be safely embedded in a Jekyll blog post without Liquid processing breaking the build or the browser rendering.

Core Features & Use Cases

  • Single-file widget output: Builds the widget into one standalone HTML file that can be embedded through an iframe.
  • Jekyll-safe integration: Avoids front matter and Liquid parsing issues that can cause build hangs or corrupted output.
  • Practical blog workflow: Supports a repeatable process for editing a JSX source file, rebuilding it outside the blog repo, and copying the finished artifact back into the post assets.
  • Use case: Add an interactive demo, calculator, or explainer component to a Microsoft Copilot Studio blog post while keeping the main site static and reliable.

Quick Start

Create or update the widget JSX source, build it into a single HTML file outside the blog repository, copy the result into the post assets, and embed it in the blog post with an iframe using the relative_url path.

Frequently Asked Questions about mcscatblog-react-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a React widget in a Jekyll blog post without breaking the build?▼

To embed React widgets in Jekyll, build the widget into a single standalone HTML file and embed it via an iframe. This prevents Liquid processing from breaking the build or corrupting the browser rendering.

Why does my React component cause Liquid parsing issues in Jekyll?▼

Liquid parsing issues occur when raw React HTML is placed directly in Jekyll posts. Using a single-file build output embedded through an iframe avoids front matter and Liquid parsing conflicts that cause build hangs.

Can I add interactive demos to a static Jekyll blog using React?▼

Yes, you can add interactive demos to a static Jekyll blog using React by compiling the widget into a self-contained HTML asset. This keeps the main site static while supporting interactive components like calculators or explainers.

What is the best way to build a single-file React widget for iframe embedding?▼

The best way to build a single-file React widget for iframe embedding is to compile the JSX source outside the blog repository into one standalone HTML file. This artifact is then copied into post assets and embedded using a relative URL.

Does Jekyll require front matter for static HTML widget files?▼

Jekyll does not require front matter for static HTML widget files when they are handled as Jekyll-safe assets. Omitting front matter and embedding the single-file build via an iframe prevents asset leakage and processing errors.

Related Skills

Explore More Software Engineering Skills→
connactaiconnactai

homepage-builder

Generate a deployable responsive homepage from Landing AI LP stripes.

Official
Advanced
dhar174dhar174
1

markdown-to-html

Converts Markdown documents to HTML for web display or static sites.

Community
Intermediate
hschnehschne
1

liquid

Enforce standardized Liquid coding conventions for Jekyll templates.

Community
Intermediate
bikeshavingbikeshaving
2.8k

crank-component-authoring

Author interactive Crank.js components in single-file HTML without a build step.

Official
Intermediate