skills.rest
galafis
galafisCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Scaffold and bundle React frontend artifacts with Vite, Tailwind, and shadcn/ui.

Updated Aug 27, 2026
Search Tags:#frontend#react#scaffolding#vite#tailwind#shadcn-ui#bundle
One-click install
npx skills add https://github.com/galafis/fonte --skill artifacts-builder-galafis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/galafis/fonte/tree/main/_kilo_marketplace_temp/skills/artifacts-builder
Command: npx skills add https://github.com/galafis/fonte --skill artifacts-builder-galafis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, vite, tailwindcss, postcss, autoprefixer, @types/node, tailwindcss-animate, clsx, class-variance-authority, lucide-react, next-themes, @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-tooltip, sonner, cmdk, embla-carousel-react, react-day-picker, date-fns, react-hook-form, @hookform/resolvers, zod, and includes scripts (resource) components.

What problem does it solve?

Automates the creation and bundling of sophisticated frontend artifacts by providing a ready-to-use scaffold that combines React, TypeScript, Vite, Tailwind, and shadcn/ui for complex UIs.

Core Features & Use Cases

  • Scaffolds a full frontend project optimized for multi-component interfaces, routing, and state management.
  • Bundles artifacts into a single, portable HTML output suitable for sharing in demos and Kilo sessions.
  • Supports rapid prototyping of design systems and interactive demos with a consistent tooling stack (React + Vite + Tailwind + shadcn/ui).

Quick Start

Initialize a new artifact with the provided script, then edit and bundle it using the bundled tooling.

Frequently Asked Questions about artifacts-builder

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

FAQPage Schema
How do I scaffold a React frontend project with Vite and Tailwind?▼

To scaffold a React frontend project with Vite and Tailwind, run the provided initialization script. This sets up an optimized project structure with shadcn/ui, TypeScript, and state management tooling for complex multi-component interfaces.

Can I bundle a React app into a single HTML file for sharing?▼

Yes, you can bundle a React app into a single HTML file for sharing. The provided bundling script compiles the Vite project into a portable HTML output suitable for interactive demos and Kilo sessions.

Does this scaffolding tool include shadcn/ui components for design systems?▼

Yes, this scaffolding tool includes shadcn/ui components for design systems. It pre-configures Radix UI primitives, Tailwind CSS, and lucide-react icons to support rapid prototyping of consistent user interfaces.

What do I need to build multi-component SPAs with this React scaffold?▼

To build multi-component SPAs with this React scaffold, you need Node.js 18+ and pnpm installed. The environment uses Vite and TypeScript to handle routing, state management, and the initialization and bundling scripts.

How does the bundling process handle React artifacts built with Vite?▼

The bundling process handles React artifacts built with Vite by compiling the multi-component project into a single portable HTML file. This is executed via the bundle script, ensuring the output is self-contained and easily shareable.

Can I use react-hook-form and zod for state management in this scaffold?▼

Yes, you can use react-hook-form and zod for state management in this scaffold. The tooling stack pre-configures these dependencies alongside Radix UI and cmdk to support complex forms and interactive state in your artifacts.

Related Skills

Explore More Software Engineering Skills→
baoduo158baoduo158
1

web-artifacts-builder

Create claude.ai HTML artifacts with React, TypeScript, Vite, and Tailwind CSS.

Community
Advanced
vZulinvZulin

artifacts-builder

Bundle React-based frontend projects into a single portable HTML artifact.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
tranhieutttranhieutt
70

senior-frontend

Scaffold React/Next.js projects with TypeScript, Tailwind CSS, and component generators.

Community
Advanced