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:ComposioHQ/awesome-claude-skills --skill artifacts-builderOverall
score
73%
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 concrete actions (what specific things can be created?) and natural user language (users might say 'build me a dashboard' rather than 'create an artifact with state management').
Suggestions
Add concrete examples of what can be created: 'dashboards, multi-page apps, interactive forms, data visualization tools'
Include more natural user trigger phrases: 'Use when user asks to build a dashboard, create an interactive app, or needs complex UI components'
| 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 - 'creating' is the only verb describing what it does. | 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'), plus includes explicit exclusion criteria ('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 phrases like 'build a dashboard', 'create an app', 'interactive UI', or 'web component'. | 2 / 3 |
Distinctiveness Conflict Risk | Clear niche targeting complex multi-component artifacts with specific technology stack, and explicitly distinguishes itself from simple HTML/JSX artifacts, reducing conflict risk with basic HTML skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
65%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a clear, concise workflow for building React artifacts with good token efficiency and a logical step sequence. However, it suffers from an incomplete reference to 'Common Development Tasks' that is mentioned but never defined, and lacks validation steps for the bundling process. The actionability is weakened by the vague Step 2 guidance.
Suggestions
Add the missing 'Common Development Tasks' section with concrete code examples for common artifact development patterns
Include validation steps after bundling (e.g., check bundle.html exists, verify file size is reasonable, optionally open in browser)
Add error handling guidance for when init-artifact.sh or bundle-artifact.sh fails
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, assuming Claude's competence with React, TypeScript, and modern frontend tooling. No unnecessary explanations of what these technologies are or how they work. | 3 / 3 |
Actionability | Provides concrete bash commands for initialization and bundling, but Step 2 'Develop Your Artifact' is vague with only a reference to 'Common Development Tasks' that doesn't appear in the document. Missing actual code examples for development. | 2 / 3 |
Workflow Clarity | Clear 5-step sequence is provided, but lacks validation checkpoints. No guidance on what to do if bundling fails, no verification that the bundle works correctly before sharing, and the 'Common Development Tasks' section referenced in Step 2 is missing. | 2 / 3 |
Progressive Disclosure | Good structure with clear sections, but references a 'Common Development Tasks' section that doesn't exist. The external reference to shadcn/ui docs is appropriate, but the skill would benefit from linking to additional internal documentation for development patterns. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 13 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
body_output_format | No obvious output/return/format terms detected; consider specifying expected outputs | Warning |
Total | 13 / 16 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.