Building Web Artifacts

To build powerful frontend opencode artifacts, follow these steps:

1. Initialize the frontend repo using scripts/init-artifact.sh
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
4. Save the artifact file and inform the user of its location
5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

REQUIRED SUB-SKILL: Use designing-frontend-interfaces before writing components. Write the design brief and lock the token block first — shadcn's defaults are a starting point, not a design, and shipping them unmodified produces exactly the generic output this section warns about.

Also required before shipping: designing-user-experience for state coverage, building-accessible-interfaces for keyboard and screen-reader support.

The specific slop signature to avoid: centered max-w-4xl for everything, purple/violet→blue gradients on white, uniform rounded-lg on every surface, shadow-md everywhere, Inter or system-ui as the display face, text-gray-500 body copy, and the hero → three feature cards → CTA skeleton.