web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
91
70%
Does it follow best practices?
Impact
93%
1.72xAverage score across 10 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/anthropic-web-artifacts-builder/SKILL.mdQuality
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong description that clearly defines its niche (complex multi-component HTML artifacts on claude.ai) and provides explicit trigger guidance including a helpful negative boundary ('not for simple single-file HTML/JSX artifacts'). The main weakness is that the 'what' portion describes technologies and categories rather than listing specific concrete actions the skill performs. Adding action verbs like 'builds', 'scaffolds', or 'implements' with specific artifact types would strengthen specificity.
Suggestions
Replace or supplement the technology list with specific concrete actions, e.g., 'Scaffolds multi-page dashboards, builds interactive forms with validation, implements tabbed layouts with routing'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (HTML artifacts) and some technologies (React, Tailwind CSS, shadcn/ui), and mentions state management and routing, but doesn't list specific concrete actions like 'create dashboards, build multi-page apps, implement form wizards'. The capabilities are described more as categories than actions. | 2 / 3 |
Completeness | Clearly answers both what ('creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies') and when ('Use for complex artifacts requiring state management, routing, or shadcn/ui components'), and even specifies when NOT to use it ('not for simple single-file HTML/JSX artifacts'). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'HTML artifacts', 'React', 'Tailwind CSS', 'shadcn/ui', 'state management', 'routing', 'multi-component', 'complex artifacts', 'claude.ai'. These cover a good range of terms a user working on elaborate frontend artifacts would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive by scoping to 'elaborate, multi-component claude.ai HTML artifacts' and explicitly excluding simple single-file artifacts. The combination of shadcn/ui, routing, and state management creates a clear niche that is unlikely to conflict with simpler HTML/code generation skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides a clear high-level workflow for creating bundled HTML artifacts with concrete shell commands for initialization and bundling. However, it has a critical gap: Step 2 references 'Common Development Tasks' guidance that doesn't exist, leaving the most important part of the workflow (actual development) without actionable guidance. The lack of validation/error-handling steps and some unnecessary verbosity in describing what scripts do internally also weaken the content.
Suggestions
Add the missing 'Common Development Tasks' section referenced in Step 2, with concrete examples of editing components, adding routes, managing state, etc.
Add validation checkpoints: e.g., 'Run `npm run build` before bundling to catch TypeScript errors' and guidance on what to do if `bundle-artifact.sh` fails.
Trim the ✅ checklist and 'What the script does' details - Claude doesn't need to know the internals, just how to use the scripts and troubleshoot failures.
Add a concrete example of a simple artifact (e.g., a counter component) showing the full flow from code to bundle to artifact output.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Mostly efficient but includes some unnecessary padding like the checklist of what the init script creates (✅ bullets) and explanations of what the bundle script does internally, which Claude doesn't need to know to use it. The 'AI slop' design guideline is useful but could be more concise. | 2 / 3 |
Actionability | The init and bundle commands are concrete and executable, but Step 2 ('edit the generated files, see Common Development Tasks below') references a section that doesn't exist in the content. This is a significant gap - the actual development guidance is missing, leaving the core task vague. | 2 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced and easy to follow. However, there are no validation checkpoints - no guidance on what to do if bundling fails, no verification that the bundle is valid before sharing, and no error recovery steps for any stage. | 2 / 3 |
Progressive Disclosure | The skill references 'Common Development Tasks' below which doesn't exist, and only provides one external reference (shadcn/ui docs). The content is reasonably structured but the missing referenced section is a significant navigation failure. The scripts themselves provide good abstraction. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- boisenoise/skills-collections
- Commit
636b862
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.