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
66%
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 ./examples/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 well-crafted description that clearly defines its scope and when to use it, including a helpful negative boundary. Its main weakness is that the 'what' portion describes technology categories rather than listing specific concrete actions the skill enables. The trigger terms are strong and the distinctiveness is excellent due to the explicit scope boundary.
Suggestions
Add specific concrete actions like 'build multi-page dashboards, create interactive forms, implement tabbed interfaces' to improve specificity beyond just naming technologies.
| 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 specific actions. | 2 / 3 |
Completeness | Clearly answers both 'what' (creating elaborate multi-component HTML artifacts using React/Tailwind/shadcn) and 'when' ('Use for complex artifacts requiring state management, routing, or shadcn/ui components') with an explicit negative boundary ('not for simple single-file HTML/JSX artifacts'). | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms 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 would naturally use when requesting this type of work. | 3 / 3 |
Distinctiveness Conflict Risk | The description carves out a clear niche by specifying 'elaborate, multi-component claude.ai HTML artifacts' and explicitly distinguishing itself from simple single-file artifacts. The combination of shadcn/ui, routing, and state management creates a distinct trigger profile unlikely to conflict with simpler HTML/code skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
42%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 but falls short on the most critical part—actual development guidance. The referenced 'Common Development Tasks' section is missing entirely, leaving a significant gap in actionability. The workflow sequence is logical but lacks validation checkpoints for error recovery during build/bundle steps.
Suggestions
Add the missing 'Common Development Tasks' section with concrete code examples showing how to create components, use shadcn/ui, manage state, and structure the app
Add validation/error recovery steps: e.g., 'Run `npm run dev` to verify the app compiles before bundling' and 'If bundle fails, check that index.html exists in root and all imports resolve'
Remove the 'What the script does' bullet list under Step 3—Claude doesn't need to know the internal mechanics of the bundling script to use it
Consider splitting detailed component usage examples and patterns into a separate reference file and linking to it from the main skill
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Mostly efficient but includes some unnecessary filler 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 concise and useful, but the 'What the script does' section is unnecessary detail. | 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. There are no code examples for actual artifact development (e.g., how to create a component, how to use shadcn/ui components, how to structure the app). The most critical step—actually building the artifact—lacks concrete guidance. | 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 init fails, if bundling fails, or how to verify the bundle.html is correct before sharing. For a multi-step build process, missing error recovery/validation caps this at 2. | 2 / 3 |
Progressive Disclosure | The content references 'Common Development Tasks below' which doesn't exist, and references bundle files (scripts/init-artifact.sh, scripts/bundle-artifact.sh) that aren't provided. The only external reference is the shadcn/ui docs URL. There's no structured navigation to deeper content, and the missing referenced section is a significant gap. | 1 / 3 |
Total | 7 / 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
- douglasvought/wiggle-skills
- Commit
b27906e
- 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.