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.
76
70%
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 HTML artifacts on claude.ai) and provides explicit trigger guidance including both positive triggers and a negative boundary. The main weakness is that it describes the technology stack more than the concrete actions/outcomes a user might request, which slightly limits specificity.
Suggestions
Add concrete action examples like 'build multi-page dashboards, create interactive forms with validation, 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 multiple concrete actions like 'create dashboards, build multi-page apps, implement form wizards'. The actions are more implied than explicitly enumerated. | 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', 'claude.ai'. These are terms developers would naturally use when requesting complex frontend artifacts. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche: complex multi-component claude.ai HTML artifacts. The explicit exclusion of 'simple single-file HTML/JSX artifacts' creates a sharp boundary that reduces conflict with simpler artifact-creation 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 building artifacts with concrete shell commands for initialization and bundling, but falls short on actionability for the actual development step (Step 2) which is the core of the task. It references a 'Common Development Tasks' section that doesn't exist, leaving a significant gap. The workflow lacks validation checkpoints for what is essentially a multi-step build pipeline.
Suggestions
Add concrete code examples for Step 2 (e.g., a minimal App.tsx showing shadcn/ui component usage, typical file structure, or how to add a new component)
Either include the referenced 'Common Development Tasks' section or remove the reference to it
Add validation/error recovery guidance after the bundle step (e.g., 'If bundling fails, check that index.html exists in root and all imports resolve')
Trim the ✅ checklist and internal script explanation to save tokens - Claude doesn't need to know the internals of what the script does
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Mostly efficient but includes some unnecessary padding like the checklist of features after init (✅ bullets), explanations of what the bundle script does internally, and the 'AI slop' design note that could be more concise. The optional testing step explanation is also somewhat verbose. | 2 / 3 |
Actionability | Provides concrete bash commands for init and bundling, but Step 2 ('edit the generated files') is vague with no concrete code examples. References 'Common Development Tasks' section that doesn't exist in the content. No example of actual artifact code, component usage, or typical file structure to edit. | 2 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced, but 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 feedback loop for error recovery. For a multi-step build process, this lack of validation caps the score. | 2 / 3 |
Progressive Disclosure | References external scripts and a shadcn/ui docs link, but mentions 'Common Development Tasks below' which doesn't exist in the content. The reference section is minimal with only one link. Content structure is reasonable but the missing referenced section is a significant gap. | 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
- majiayu000/claude-skill-registry-data
- Commit
3dd3ac0
- 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.