artifacts-builder

Set up React, TypeScript, Vite, Tailwind CSS, and shadcn/ui projects and bundle them into a single HTML file.

1|Updated Nov 13, 2023

Search Tags:#frontend #react #shadcn/ui #vite #tailwind #bundling #codex artifact

One-click install

npx skills add https://github.com/LeoTechPro/intTools --skill artifacts-builder-leotechpro

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/LeoTechPro/intTools/tree/main/codex/assets/codex-home/skills/artifacts-builder
Command: npx skills add https://github.com/LeoTechPro/intTools --skill artifacts-builder-leotechpro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, @radix-ui/react-accordion, @radix-ui/react-aspect-ratio, @radix-ui/react-avatar, @radix-ui/react-checkbox, @radix-ui/react-collapsible, @radix-ui/react-context-menu, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers/zod, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of sophisticated frontend artifacts for Codex, enabling developers to build interactive and visually rich user experiences without complex build configurations.

Core Features & Use Cases

Project Initialization: Quickly set up a new React project with pre-configured Tailwind CSS, shadcn/ui, and TypeScript.
Bundling: Consolidate all project code and assets into a single, shareable HTML file for easy deployment within Codex.
Use Case: Develop a dynamic dashboard artifact for a Codex session, complete with interactive charts and a custom UI, all bundled into a single file for seamless integration.

Quick Start

Run the initialization script to create a new React project named 'my-artifact' using bash scripts/init-artifact.sh my-artifact.

Frequently Asked Questions about artifacts-builder

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

FAQPage Schema

How do I bundle a React project into a single HTML file for deployment?▼

You can bundle a React project into a single HTML file by using Parcel alongside Vite to consolidate all code and assets into one shareable file for deployment. This Skill automates that configuration.

What is the best way to set up a React project with shadcn/ui and Tailwind CSS?▼

The best way to set up a React project with shadcn/ui and Tailwind CSS is to run the initialization script provided in this Skill, which pre-configures TypeScript and all necessary Radix UI dependencies.

Do I need Node.js 18 and pnpm to build frontend artifacts with Vite?▼

Yes, you need Node.js 18+ and pnpm to use this Skill's build process, as the Vite and Parcel configurations require these specific environments to bundle your frontend artifacts correctly.

Can I use Radix UI components to build interactive dashboards in a single file?▼

Yes, you can use Radix UI components to build interactive dashboards because this Skill includes pre-configured dependencies for charts, forms, and dialogs that bundle into a single HTML file.

Does Parcel work with Vite to bundle TypeScript projects using path aliases?▼

Parcel works with Vite in this Skill by using the parcel-resolver-tspaths plugin to resolve TypeScript path aliases during the single HTML file bundling process for your frontend artifacts.