Web Artifacts Builder

Web Artifacts Builder Skill

Two Approaches

| Approach | When to Use | Complexity | |---------|-------------|-----------| | Pure HTML/CSS/JS | Simple interactions, no framework needed | Low | | React + Tailwind (CDN) | Rich UI, components, state management | Medium | | React + Vite + Bundle | Production app, many dependencies | High |

---

Approach A: Self-Contained HTML (No Build Step)

Best for: calculators, visualizations, simple tools, games.

  
  
  Budget Calculator
  
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 1rem;
      padding: 2rem;
      width: 100%;
      max-width: 480px;
    }

    h1 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: #f8fafc;
    }

    .field {
      margin-bottom: 1rem;
    }

    label {
      display: block;
      font-size: 0.875rem;
      color: #94a3b8;
      margin-bottom: 0.4rem;
    }

    input {
      width: 100%;
      padding: 0.6rem 0.8rem;
      background: #0f172a;
      border: 1px solid #475569;
      border-radius: 0.5rem;
      color: #f8fafc;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s;
    }

    input:focus { border-color: #6366f1; }

    button {
      width: 100%;
      padding: 0.75rem;
      background: #6366f1;
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 1rem;
      transition: background 0.2s;
    }

    button:hover { background: #4f46e5; }

    .result {
      margin-top: 1.5rem;
      padding: 1rem;
      background: #0f172a;
      border-radius: 0.5rem;
      border-left: 4px solid #6366f1;
      display: none;
    }

    .result.show { display: block; }
    .result-label { color: #94a3b8; font-size: 0.875rem; }
    .result-value { color: #f8fafc; font-size: 1.5rem; font-weight: 700; }
  

  
    💰 Budget Calculator

    
      Monthly Income ($)
      
    

    
      Monthly Expenses ($)
      
    

    Calculate Savings

    
      Monthly Savings
      
      
    
  

  
    function calculate() {
      const income = parseFloat(document.getElementById('income').value) || 0
      const expenses = parseFloat(document.getElementById('expenses').value) || 0
      const savings = income - expenses
      const pct = income > 0 ? ((savings / income) * 100).toFixed(1) : 0

      const result = document.getElementById('result')
      document.getElementById('savings-value').textContent = `$${savings.toLocaleString()}`
      document.getElementById('savings-pct').textContent = `${pct}% of income`
      result.classList.add('show')
    }
  

---

Approach B: React + Tailwind via CDN

Best for: interactive dashboards, component demos, data visualization with state.

  
  
  Dashboard
  
  
  
  
  
  
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: { 500: '#6366f1', 600: '#4f46e5' }
          }
        }
      }
    }
  

const { useState, useEffect, useCallback } = React
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } = Recharts

const data = [
  { month: 'Jan', revenue: 4200, users: 1200 },
  { month: 'Feb', revenue: 5800, users: 1450 },
  { month: 'Mar', revenue: 5100, users: 1380 },
  { month: 'Apr', revenue: 7200, users: 1820 },
  { month: 'May', revenue: 6800, users: 1750 },
  { month: 'Jun', revenue: 9100, users: 2100 },
]

function MetricCard({ label, value, change }) {
  const isPositive = change >= 0
  return (
    
      {label}
      {value}
      
        {isPositive ? '↑' : '↓'} {Math.abs(change)}% vs last month
      
    
  )
}

function Dashboard() {
  const [activeMetric, setActiveMetric] = useState('revenue')

  return (
    
      Analytics Dashboard

      
        
        
        
      

      
        
          {['revenue', 'users'].map(metric => (
             setActiveMetric(metric)}
              className={`px-3 py-1 rounded-full text-sm capitalize ${
                activeMetric === metric
                  ? 'bg-brand-500 text-white'
                  : 'text-slate-400 hover:text-white'
              }`}
            >
              {metric}
            
          ))}
        

        
          
            
            
            
            
            
          
        
      
    
  )
}

ReactDOM.createRoot(document.getElementById('root')).render()

---

Design Guidelines

Palette Approach

• Dark theme: #0f172a background, #1e293b card, #6366f1 accent
• Light theme: #f8fafc background, #ffffff card, #6366f1 accent
• Pick one dominant color; use 60-30-10 rule (background: 60%, surface: 30%, accent: 10%)

Typography

• Headings: font-size: clamp(1.5rem, 4vw, 2.5rem) - scales on mobile
• Body: 16px minimum; never below 14px for readable content
• Avoid default system fonts for anything beyond demos - use Inter or Geist via Google Fonts

Layout Principles

• Use CSS Grid for page layout, Flexbox for component layout
• Always set max-width on content containers (800-1200px)
• Add meaningful micro-interactions: transition: all 0.2s, hover states, focus rings

What to Avoid

• Purple gradients on white - too generic
• Centered body text on wide screens
• Missing loading/empty states
• No hover states on interactive elements
• Placeholder-only content (Lorem ipsum everywhere)

---

Common Mistakes

• CDN versions mismatched - check exact version numbers for React, Recharts, etc.
• Babel type="text/babel" missing - JSX won't parse without it when using CDN Babel
• No responsive design - always add meta viewport and test at 375px width
• Missing accessibility - buttons need type="button", form inputs need labels
• Forgetting error states - always handle empty data, loading, and error conditions visually
• Inline CSS overriding Tailwind - be consistent; pick one approach per project

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Jignesh-Ponamwar
• Source: Jignesh-Ponamwar/skills-mcp
• License: Apache-2.0
• Homepage: https://skills-mcp-jignesh.vercel.app/

Install and usage instructions live in the source repository linked above.