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
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
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 beyond technical jargon.
Suggestions
Add specific concrete actions like 'scaffold multi-page layouts', 'implement component hierarchies', 'configure routing between views' to improve specificity
Include more natural user trigger terms like 'dashboard', 'web app', 'interactive UI', 'multi-step form' that users might actually say when requesting complex artifacts
| 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 executable commands for the artifact building workflow. The main weaknesses are a missing 'Common Development Tasks' section that's referenced in Step 2, and lack of validation/error handling guidance for the bundling process. The design guidelines section adds value but could be expanded or linked to a separate style guide.
Suggestions
Add the referenced 'Common Development Tasks' section or remove the reference to it in Step 2
Add validation checkpoint after bundling (e.g., 'Verify bundle.html exists and is non-empty before sharing')
Include brief troubleshooting guidance for common bundling failures (e.g., missing index.html, path alias issues)
| 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 init and bundle scripts are copy-paste ready, and the project structure output clearly shows what gets created. | 3 / 3 |
Workflow Clarity | Steps are clearly numbered and sequenced, but lacks validation checkpoints. No guidance on what to do if bundling fails, no verification that the bundle.html is valid before sharing, and Step 2 'Develop Your Artifact' references 'Common Development Tasks' that doesn't exist in the content. | 2 / 3 |
Progressive Disclosure | Good structure with Quick Start overview and Reference section, but references a non-existent 'Common Development Tasks' section. The external shadcn/ui link is appropriate, but the skill could benefit from clearer internal organization or links to additional documentation files. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- 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.