Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →kxiandaoyan/web-artifacts-builder
Build interactive web artifacts — single-file HTML/CSS/JS apps, data visualizations, dashboards, games, and interactive demos.
Passed 5 of 22 test cases with the skill, and 12 of 22 without it.
2 fixed1 passed either way17 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build a multi-step user registration wizard artifact with progress indicators and input fields.
| Checked | Without skill | With skill |
|---|---|---|
| Interactive form elements include explicit ARIA attributes or semantic labeling | Missed | Passed |
| The single HTML file is placed in /data/ | Missed | Passed |
The instructions your model reads when the skill loads.
Create self-contained, interactive web artifacts delivered as single HTML files.
Always produce a single index.html file saved to /data/ that includes all CSS and JS inline. The file must work without any server or build step.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Title</title>
<style>
/* All CSS inline */
</style>
</head>
<body>
<!-- Content -->
<script>
// All JS inline
</script>
</body>
</html>
Use Chart.js (CDN) for charts. Load data inline as JS arrays.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Tailwind CSS (CDN) for rapid layout:
test cases passed, vs 12 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.