aired-artifact

Scaffold React projects, bundle assets into bundle.html, and publish to aired.sh.

2|Updated Mar 17, 2026

Search Tags:#automation #react #single-file #publish #bundling #artifact #aired

Ready to run

npx skills add https://github.com/progrmoiz/skills --skill aired-artifact

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aired-artifact
Source: https://github.com/progrmoiz/skills/tree/main/skills/aired-artifact
Command: npx skills add https://github.com/progrmoiz/skills --skill aired-artifact

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Builds premium React artifacts and publishes them to aired.sh as shareable single-file HTML. Anti-slop design system with shadcn/ui + Framer Motion.

Core Features & Use Cases

Scaffold a React artifact project from a set of scripts.
Bundle all assets into a single HTML file with inlined resources.
Publish to aired.sh to generate a shareable URL for distribution.
Enforce design-system tokens and UI patterns during artifact creation.

Quick Start

Run the init-artifact.sh script to scaffold a project, then run bundle-artifact.sh to generate bundle.html and finally run publish-artifact.sh to publish it to aired.sh.

Frequently Asked Questions about aired-artifact

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

FAQPage Schema

How do I bundle a React app into a single HTML file for publishing?▼

Bundling a React app into a single HTML file requires inlining all JavaScript and CSS assets into one document. This skill automates that process using Parcel, generating a standalone bundle.html suitable for sharing.

What is the best way to publish interactive React dashboards as shareable links?▼

Publishing interactive React dashboards as shareable links involves compiling the project into a standalone HTML file and deploying it. This skill scaffolds the project, bundles it, and publishes it to aired.sh to generate a distribution URL.

Does this single-file bundling approach work with TypeScript path aliases?▼

Single-file bundling works with TypeScript path aliases when configured correctly. This skill includes the parcel-resolver-tspaths dependency to ensure path resolution functions properly during the asset inlining and bundling process.

Can I use shadcn/ui and Framer Motion in a standalone HTML artifact?▼

You can use shadcn/ui and Framer Motion in a standalone HTML artifact. This skill enforces an anti-slop design system integrating these libraries, ensuring UI components and animations remain functional after the bundling process.

Why do my inlined assets break when bundling React projects into one file?▼

Inlined assets break when bundling React projects due to incorrect resource resolution or missing inline configurations. This skill uses Parcel with html-inline to properly resolve and embed all dependencies into the final bundle.html.