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.
81
Quality
77%
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
75%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 description effectively communicates when to use the skill versus simpler alternatives, with good explicit trigger guidance and clear scope boundaries. However, it could be stronger on specific concrete actions (what exactly does it do - scaffold components? manage state? create layouts?) and could include more natural user language variations beyond technical terminology.
Suggestions
Add specific concrete actions like 'scaffold multi-page layouts', 'implement component libraries', 'configure routing between views' to improve specificity
Include natural user trigger terms like 'dashboard', 'web app', 'interactive UI', 'multi-step form' that users might say when needing this skill
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (HTML artifacts) and technologies (React, Tailwind CSS, shadcn/ui), mentions some capabilities like 'state management, routing, or shadcn/ui components', but doesn't list multiple concrete actions - it describes what it's for rather than specific actions it performs. | 2 / 3 |
Completeness | Clearly answers both what ('Suite of tools for 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 - not for simple single-file HTML/JSX artifacts'). | 3 / 3 |
Trigger Term Quality | Includes relevant technical terms like 'React', 'Tailwind CSS', 'shadcn/ui', 'HTML artifacts', 'state management', 'routing', but missing common user variations like 'web app', 'dashboard', 'interactive UI', 'multi-page', or 'complex component'. | 2 / 3 |
Distinctiveness Conflict Risk | Clearly distinguishes itself by specifying 'elaborate, multi-component' artifacts and explicitly excluding 'simple single-file HTML/JSX artifacts', creating a clear niche that reduces conflict with basic HTML/artifact skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
79%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, concise skill that provides clear actionable steps for building React artifacts. The main weaknesses are missing validation/error handling in the workflow and a reference to a 'Common Development Tasks' section that appears to be missing from the content.
Suggestions
Add validation checkpoint after Step 3 (e.g., 'Verify bundle.html exists and is non-empty before proceeding')
Include error recovery guidance for common bundling failures (e.g., missing dependencies, path alias issues)
Either add the referenced 'Common Development Tasks' section or remove the reference to it
Consider adding a brief troubleshooting section or link to one for when artifacts don't render correctly
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, assuming Claude's competence with React/TypeScript/Vite. No unnecessary explanations of what these technologies are or how they work - just actionable steps and commands. | 3 / 3 |
Actionability | Provides concrete, executable bash commands for each step. The scripts are copy-paste ready with clear parameters, and the workflow is immediately actionable without needing additional context. | 3 / 3 |
Workflow Clarity | Steps are clearly numbered and sequenced, but lacks explicit validation checkpoints. No guidance on what to do if bundling fails, no verification step to confirm the bundle.html is valid before sharing with user. | 2 / 3 |
Progressive Disclosure | References 'Common Development Tasks' section that doesn't exist in the content, and links to external shadcn/ui docs. The structure is reasonable but the missing internal reference and lack of clear navigation to development guidance is a gap. | 2 / 3 |
Total | 10 / 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
2bbaa03
- 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.