CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

74

1.25x
Quality

66%

Does it follow best practices?

Impact

78%

1.25x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/data/03-developer-artifactsbuilder/SKILL.md
SKILL.md
Quality
Evals
Security

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 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'.

DimensionReasoningScore

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 React artifacts with concrete shell commands for initialization and bundling. However, it has significant gaps: the referenced 'Common Development Tasks' section is missing, there are no code examples for actual component development (the core activity), and there are no validation/error-recovery steps in the build workflow. The skill describes the scaffolding well but leaves the most important part—actually building the artifact—almost entirely unaddressed.

Suggestions

Add the missing 'Common Development Tasks' section with concrete React/TypeScript code examples showing component creation, state management, and shadcn/ui usage patterns.

Add validation checkpoints after bundling (e.g., check bundle.html file size, verify it opens correctly) and error recovery guidance for common build failures.

Either provide bundle files for the referenced scripts (init-artifact.sh, bundle-artifact.sh) or include inline documentation of their expected behavior and error modes.

Remove or condense the internal details of what the bundle script does (the bullet list under 'What the script does') since Claude doesn't need to know implementation details to use it.

DimensionReasoningScore

Conciseness

Mostly efficient but includes some unnecessary padding like the checklist of features after init (✅ bullets), explanations of what the bundle script does internally, and the verbose optional testing section. The 'AI slop' design guideline is useful but could be tighter.

2 / 3

Actionability

Provides concrete bash commands for init and bundling, but the core development step ('edit the generated files, see Common Development Tasks below') references a section that doesn't exist in the content. No executable code examples for actual React/TypeScript development patterns, component usage, or state management are provided despite the skill being about building complex multi-component artifacts.

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.html is valid, and no feedback loop for error recovery during the build process. For a multi-step build process, this is a notable gap.

2 / 3

Progressive Disclosure

References 'Common Development Tasks below' which doesn't exist in the content. The only external reference is a URL to shadcn/ui docs. No bundle files are provided, and the skill references scripts (init-artifact.sh, bundle-artifact.sh) without any supporting documentation. Critical development guidance is missing entirely rather than being split into referenced files.

1 / 3

Total

7

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
majiayu000/claude-skill-registry
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.