skills.rest
fajjarnr
fajjarnrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

Initialize React and Vite artifact projects and bundle them into single HTML files.

1|Updated Jan 18, 2026
Search Tags:#documentation#React#frontend#Tailwind#artifact#Vite
One-click install
npx skills add https://github.com/fajjarnr/payu --skill web-artifacts-builder-fajjarnr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/fajjarnr/payu/tree/main/.agent/skills/web-artifacts-builder
Command: npx skills add https://github.com/fajjarnr/payu --skill web-artifacts-builder-fajjarnr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vite, tailwindcss, postcss, autoprefixer, lucide-react, clsx, tailwindcss-animate, class-variance-authority, tailwind-merge, @radix-ui/react-accordion, @radix-ui/react-avatar, @radix-ui/react-checkbox, @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) components.

What problem does it solve?

PayU teams need a fast, consistent way to produce high-fidelity frontend artifacts for docs, PRDs, and demos. This skill provides a turnkey workflow to initialize artifact projects, develop with React and Vite, and bundle everything into a single, portable HTML artifact.

Core Features & Use Cases

  • Artifact project bootstrap: Initialize new artifact projects with a standardized structure.
  • Local development & bundling: Develop with Vite + React and bundle into a single HTML file for offline usage.
  • Documentation-ready outputs: Generate ready-to-share demos and PRDs that can be embedded in PayU docs.

Quick Start

From the root of your PayU project, run:

  • bash .agent/skills/web-artifacts-builder/scripts/init-artifact.sh payment-flow-demo
  • after development, run: bash ../scripts/bundle-artifact.sh

Frequently Asked Questions about web-artifacts-builder

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

FAQPage Schema
How do I bundle a React and Vite project into a single HTML file for documentation?▼

To bundle a React and Vite project into a single HTML file, you initialize an artifact project using the provided script, develop your frontend components, and run the bundle script to generate a portable, offline-ready HTML output.

Do I need Node.js and npm to build standalone React frontend artifacts?▼

Yes, building standalone React frontend artifacts requires standard frontend tooling, specifically Node.js, npm, Vite, and Tailwind CSS, to initialize the project structure and execute the bundling workflow.

Can I use Tailwind CSS and Radix UI components when creating high-fidelity PRD and demo artifacts?▼

Yes, you can use Tailwind CSS and Radix UI components to build high-fidelity PRD and demo artifacts, as the workflow includes Tailwind, Radix UI primitives, and related styling dependencies for interactive frontend development.

What is the best way to generate interactive PayU documentation demos from React components?▼

The best way to generate interactive PayU documentation demos is using the artifact workflow scripts to bootstrap a React project, develop the UI, and bundle it into a single HTML file ready to embed in PayU docs.

How do I initialize a new artifact project for a payment flow demo?▼

You initialize a new artifact project for a payment flow demo by running the init script from your project root, which sets up a standardized Vite and React structure for immediate frontend development.

Related Skills

Explore More Software Engineering Skills→
sevenbelowllcsevenbelowllc

artifacts-builder

Initialize React projects and bundle them into single HTML files.

Official
Advanced
underPressueunderPressue

artifacts-builder

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

Community
Advanced
CenredJunCenredJun

shadcn-ui

Scaffold accessible React UI components with shadcn CLI in Next.js projects.

Community
Advanced
agoodwayagoodway
1

bootstrap-astro

Bootstraps an Astro project with React, Tailwind, and Kamal deployment configuration.

Official
Intermediate