mcpskills.net — Curated AI Skills, MCPs & Agents

Build interactive web artifacts and self-contained components.

Artifact Types

HTML Artifacts

Self-contained HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Artifact Title</title>
  <style>
    /* All styles inline */
  </style>
</head>
<body>
  <!-- Content -->
  <script>
    // All JavaScript inline
  </script>
</body>
</html>

React Components

Component Structure:

function MyComponent({ prop1, prop2 }) {
  const [state, setState] = useState(initialValue);
  
  return (
    <div className="container">
      {/* Component content */}
    </div>
  );
}

Building Process

1. Requirements Analysis

Define the Artifact:

Purpose and functionality
Target audience
Technical requirements
Design constraints

2. Design Planning

Component Architecture:

Visual hierarchy
Interaction patterns
State management
Data flow

3. Implementation

HTML Artifact:

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: system-ui, sans-serif;
      padding: 2rem;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    const app = document.getElementById('app');
    // Interactive logic
  </script>
</body>
</html>

React Artifact:

function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

4. Testing and Refinement

Cross-browser Testing:

Chrome/Edge
Firefox
Safari
Mobile browsers

Performance Optimization:

Minimize DOM operations
Efficient event handling
Lazy loading when appropriate

Common Artifact Patterns

Interactive Dashboard

<!DOCTYPE html>
<html>
<head>
  <style>
    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
    .card {
      padding: 1.5rem;
      border: 1px solid #e5e5e5;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="dashboard" id="dashboard"></div>
  <script>
    // Dashboard logic
  </script>
</body>
</html>

Form Component

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        placeholder="Name"
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Best Practices

Keep artifacts self-contained
Use semantic HTML
Ensure accessibility
Optimize for performance
Test across browsers
Document usage instructions
Provide fallbacks when needed