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.
74
66%
Does it follow best practices?
Impact
78%
1.25xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./data/03-developer-artifactsbuilder/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 claude.ai artifacts) and explicitly states both when to use it and when not to. The main weakness is that the 'what' portion describes technologies and categories rather than listing specific concrete actions the skill performs. The explicit exclusion clause ('not for simple single-file HTML/JSX artifacts') is a notable strength for disambiguation.
Suggestions
Add specific concrete actions to improve specificity, e.g., 'Creates multi-page dashboards, builds interactive forms with validation, implements tabbed layouts and navigation' rather than just listing 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 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 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 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
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 reasonable high-level workflow for building React artifacts with clear init and bundle commands, but suffers from a broken internal reference ('Common Development Tasks' section doesn't exist), lack of concrete development examples, and no validation/error recovery steps. The most critical gap is Step 2 (the actual development work) which is essentially empty, making the skill incomplete for its stated purpose of building 'elaborate, multi-component' artifacts.
Suggestions
Add the missing 'Common Development Tasks' section with concrete code examples showing how to create components, manage state, use shadcn/ui components, and structure the React app.
Add validation checkpoints: e.g., 'Run npm run dev to verify the app compiles before bundling' and error recovery guidance if bundle-artifact.sh fails.
Include at least one complete mini-example showing a simple multi-component artifact from creation to bundle, demonstrating the actual code that goes into the project.
Remove the internal explanation of what bundle-artifact.sh does (the 'What the script does' section) — Claude doesn't need to know the implementation details to use it.
| 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 bash commands for init and bundle are concrete and executable, but Step 2 ('edit the generated files') is vague with no concrete code examples. There are no examples of actual artifact code, component usage, or how to structure the React app. The 'See Common Development Tasks below' reference points to a section that doesn't exist. | 2 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced and logical, but there are no validation checkpoints. If bundling fails, there's no error recovery guidance. The skill also references 'Common Development Tasks' in Step 2 that doesn't exist in the document, creating a gap in the workflow. | 2 / 3 |
Progressive Disclosure | The skill references 'Common Development Tasks below' which doesn't exist, and references scripts (init-artifact.sh, bundle-artifact.sh) without bundle files 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 organizational failure. | 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
- majiayu000/claude-skill-registry-data
- Commit
2dfa65f
- 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.