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.

2.50x

Quality

70%

Does it follow best practices?

Impact

95%

2.50x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.trae/skills/artifacts-builder/SKILL.md

Quality

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 solid description that clearly defines its scope, includes good trigger terms, and explicitly states both when to use it and when not to use it. The main weakness is that the specific capabilities could be more concrete—listing actual actions rather than technology categories. The negative boundary ('not for simple single-file HTML/JSX artifacts') is a strong differentiator.

Suggestions

Add more concrete action verbs describing what the skill does, e.g., 'Builds dashboards, implements multi-page navigation, creates interactive forms with validation' rather than 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 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 HTML artifacts using React/Tailwind/shadcn) and 'when' ('Use for complex artifacts requiring state management, routing, or shadcn/ui components') with an explicit negative boundary ('not for simple single-file HTML/JSX artifacts').	3 / 3
Trigger Term Quality	Includes strong natural trigger terms users would say: 'HTML artifacts', 'React', 'Tailwind CSS', 'shadcn/ui', 'state management', 'routing', 'multi-component', 'complex artifacts', 'claude.ai'. These cover a good range of terms a user would naturally use when requesting this type of work.	3 / 3
Distinctiveness Conflict Risk	The description carves out a clear niche by specifying 'elaborate, multi-component claude.ai HTML artifacts' and explicitly distinguishing itself from simple single-file artifacts. The combination of shadcn/ui, routing, and state management creates a distinct trigger profile unlikely to conflict with basic HTML or simple artifact 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 creating bundled HTML artifacts with concrete shell commands for initialization and bundling. However, it suffers from a missing 'Common Development Tasks' section that Step 2 references, lacks validation/error-recovery steps in the build pipeline, and includes some unnecessary detail about internal script mechanics while omitting the actual development guidance that would make this skill complete.

Suggestions

Add the referenced 'Common Development Tasks' section or link to a separate file - Step 2 currently points to content that doesn't exist

Add validation checkpoints: e.g., verify the bundle was created successfully, check file size, or open in browser before sharing

Make Step 4 concrete - show the actual mechanism for sharing bundle.html as an artifact (e.g., reading the file and outputting it)

Remove the internal details of what the bundle script does (parcel config, html-inline) since Claude just needs to run the command, not understand its internals

Dimension	Reasoning	Score
Conciseness	Mostly efficient but includes some unnecessary padding like the checklist of what the init script creates (✅ bullets) and explanations of what the bundle script does internally, which Claude doesn't need to know to use it. The 'AI slop' design guideline is useful but could be more concise.	2 / 3
Actionability	The init and bundle commands are concrete and executable, but Step 2 ('edit the generated files, see Common Development Tasks below') references a section that doesn't exist in the content. Step 4 ('share the bundled HTML file') is vague with no concrete mechanism shown. The actual development guidance is missing.	2 / 3
Workflow Clarity	The 5-step workflow is clearly sequenced and easy to follow. However, 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 error recovery steps for a process that involves multiple build tools.	2 / 3
Progressive Disclosure	References shadcn/ui docs externally and mentions 'Common Development Tasks' as a section that should exist but doesn't. The content is reasonably structured with clear sections, but the missing referenced content and lack of links to any supplementary files (e.g., script documentation, examples) weakens navigation.	2 / 3
	Total	8 / 12 Passed

Validation

90%

Warnings & errors only

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: Lingjie-chen/MT5
Commit: 3069d33

Reviewed: 26 days ago

Table of Contents

Discovery Implementation Validation

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.