skills.rest
progrmoiz
progrmoizCOMMUNITY
Explore all skills by this author →
Website𝕏@iammoizfarooqGitHub

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
One-click install
npx skills add https://github.com/progrmoiz/skills --skill aired-artifact
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
archubbuckarchubbuck
17

web-artifacts-builder

Bundle React and Vite projects into a single HTML artifact.

Community
Advanced
511avolo-dot511avolo-dot

web-artifacts-builder

Bundle frontend assets into a single self-contained HTML artifact.

Community
Advanced
QoreDBQoreDB
137

ui-component-architect

Generate animated React UI components with Tailwind, Shadcn, and Framer Motion.

Official
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate