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.
Install with Tessl CLI
npx tessl i github:boisenoise/skills-collections --skill web-artifacts-builder91
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/skillEvaluation — 93%
↑ 1.72xAgent success when using this skill
Validation 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 actionable steps for building React artifacts. The main weaknesses are a missing 'Common Development Tasks' section that is referenced but not included, and lack of validation/error handling guidance in the workflow. The design guidelines callout about 'AI slop' is a nice touch for quality output.
Suggestions
Add the referenced 'Common Development Tasks' section or remove the reference to it
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
| 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 workflow is clear with specific file outputs (bundle.html) mentioned. | 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 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 only provides one external reference (shadcn/ui docs). The content is well-structured but the missing referenced section is problematic. | 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.
- 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.