web-artifacts-builder

name	web-artifacts-builder
description	Guide for creating elaborate, multi-component React artifacts using Tailwind CSS and shadcn/ui.

FORGE Web Artifacts Builder Skill

Use this skill when building complex, stateful web artifacts that require more than a single-file approach.

Stack Requirements

• Framework: React 18 / TypeScript.
• Styling: Tailwind CSS + shadcn/ui.
• Components: Utilize Radix UI primitives as provided by shadcn/ui.

Workflow

1. Plan Architecture: Define state management and component hierarchy.
2. Implementation: Build interactive components with clear prop interfaces.
3. Bundling: Ensure all assets are optimized for presentation.
4. Testing: Verify interactive flows (buttons, forms, state transitions).

Design Excellence

Avoid "AI slop" by:

• Using custom typography and color themes.
• Implementing sophisticated layout patterns (not just centered stacks).
• Adding subtle micro-animations and transitions.