Gene: Web Artifacts

Description

Create distinctive, production-grade frontend interfaces using React, Vite, Tailwind CSS, and shadcn/ui. Enhanced with best practices from Anthropic's web-artifacts-builder and frontend-design skills.

Trigger Conditions

• User asks to build web components, pages, or applications
• Creating HTML artifacts in conversations
• Frontend development requests
• UI/UX improvements
• Building interactive dashboards or tools

Technology Stack

• React 18 + TypeScript
• Vite for development
• Tailwind CSS 3.4
• shadcn/ui components
• Parcel for bundling

Design Principles

Aesthetic Guidelines

• AVOID "AI slop" aesthetics:
  • Excessive centered layouts
  • Purple gradients on white
  • Uniform rounded corners
  • Inter font
• PURSUE distinctive, memorable designs:
  • Unique typography choices
  • Bold color decisions
  • Creative layouts (asymmetry, overlap, diagonals)
  • Atmospheric backgrounds

Design Thinking

Before coding, understand:

• Purpose: What problem does this interface solve?
• Tone: Brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, brutalist, etc.
• Constraints: Framework, performance, accessibility requirements
• Differentiation: What makes this UNFORGETTABLE?

Execution Protocol

Step 1: Initialize Project

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Creates project with:

• React + TypeScript (via Vite)
• Tailwind CSS with shadcn/ui theming
• Path aliases (@/) configured
• 40+ shadcn/ui components pre-installed

Step 2: Develop Artifact

• Edit generated files
• Use shadcn/ui components: https://ui.shadcn.com/docs/components
• Follow design principles above

Step 3: Bundle to Single HTML

bash scripts/bundle-artifact.sh

Creates self-contained bundle.html with all JS/CSS inlined.

Step 4: Present to User

Share the bundled HTML file as an artifact in conversation.

Key Guidelines

Typography

• Choose distinctive fonts (avoid Arial, Inter, Roboto)
• Pair display font with refined body font
• Use fonts that elevate the design

Color & Theme

• Commit to cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents

Motion & Animation

• Use CSS-only solutions when possible
• Focus on high-impact moments
• Staggered reveals for page loads
• Scroll-triggering and hover states

Spatial Composition

• Unexpected layouts
• Asymmetry and overlap
• Generous negative space OR controlled density

Guardrails

• Match implementation complexity to aesthetic vision
• Maximalist needs elaborate code; minimalist needs precision
• Never use generic AI aesthetics

Integration

• Works with: document-generation, tool-orchestration
• Essential for frontend development