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
66%
Does it follow best practices?
Impact
95%
2.50xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/all-skills/skills/artifacts-builder/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) with good technology-specific trigger terms and an explicit negative boundary that aids skill selection. The main weakness is that the 'what' portion describes the domain and technologies rather than listing specific concrete actions the skill enables. Overall it would perform well in a multi-skill selection scenario.
Suggestions
Add 2-3 specific concrete actions to improve specificity, e.g., 'Creates multi-page dashboards, builds interactive forms with validation, implements tabbed layouts with shared state'.
| 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 specific 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'), which is excellent for disambiguation. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms users would say: 'React', 'Tailwind CSS', 'shadcn/ui', 'HTML artifacts', 'state management', 'routing', 'multi-component', 'complex artifacts', 'claude.ai'. These cover the key terms a user would naturally mention when needing this skill. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear boundaries: specifically targets multi-component, complex claude.ai HTML artifacts with named technologies, and explicitly excludes simple single-file artifacts. The negative boundary ('not for simple single-file HTML/JSX artifacts') significantly reduces conflict risk with simpler artifact-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 clear high-level workflow for creating artifacts but falls short on the most critical aspect: actual development guidance. Step 2 references 'Common Development Tasks' that don't exist, leaving a significant gap in actionability. The init and bundle steps are concrete, but the lack of validation/error recovery steps and missing referenced content significantly reduce the skill's effectiveness.
Suggestions
Add the missing 'Common Development Tasks' section with concrete code examples for React components, state management, routing, and shadcn/ui usage patterns
Add validation checkpoints: e.g., 'Run npm run dev to verify the app compiles before bundling' and error recovery guidance if bundling fails
Add progressive disclosure by referencing actual bundle files or creating separate docs for component patterns, troubleshooting, and advanced features
Trim the ✅ checklist and bundle script internals explanation—Claude doesn't need to know what the script does internally, just how to use it and what to expect
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Generally efficient but includes some unnecessary padding like the checklist of features created by init (✅ bullets), the detailed explanation of what the bundle script does internally, and the verbose testing step. The 'AI slop' design guideline is useful but could be more concise. | 2 / 3 |
Actionability | Provides concrete bash commands for init and bundling, but Step 2 ('edit the generated files, see Common Development Tasks below') references a section that doesn't exist in the content. The actual development guidance—the core of what makes this skill useful—is missing. No code examples for React components, state management, routing, or shadcn/ui usage are provided. | 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. If the init script fails (e.g., wrong Node version), there's no troubleshooting. The mention of 'Node 18+ compatibility (auto-detects and pins Vite version)' hints at potential issues but doesn't address them. | 2 / 3 |
Progressive Disclosure | The content references 'Common Development Tasks below' which doesn't exist, and references bundle files (scripts/init-artifact.sh, scripts/bundle-artifact.sh) that aren't provided in the bundle. The only external reference is the shadcn/ui docs URL. There's no structured navigation to deeper content, and the skill is missing the most important content (how to actually develop artifacts). | 1 / 3 |
Total | 7 / 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 | |
- Repository
- davepoon/buildwithclaude
- Commit
d065ead
- 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.