CtrlK
BlogDocsLog inGet started
Tessl Logo

ai-elements

AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.

67

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

65%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable with complete, executable code and specific breakage fixes, but it is verbose and repetitive, lacks explicit validation checkpoints in its fix workflows, and keeps a large component catalog inline rather than deferring it to a one-level-deep reference file.

Suggestions

Deduplicate install and stream-format guidance (the install commands and 'toUIMessageStreamResponse()' rule each recur across Type Errors, Installation, and Common Gotchas) — state each rule once and cross-reference.

Add an explicit validation checkpoint to the type-error fix workflow, e.g. after reinstalling a component run the build/typecheck and only proceed when it passes (validate → fix → retry).

Move the full component catalog table and the per-component Voice/Code Elements install lines into a referenced file (e.g. COMPONENTS.md) signaled from the body, leaving the overview lean.

DimensionReasoningScore

Conciseness

The body carries genuine density (executable code, breakage tables) but repeats guidance — install instructions and 'toUIMessageStreamResponse()' appear across Type Errors, Installation, and Common Gotchas, and the 'never render raw JSX' rule recurs — and explains points that could be tightened; not a 3 due to repetition and padded prose, not a 1 because it avoids explaining basic concepts Claude already knows.

2 / 3

Actionability

Fully executable guidance throughout — copy-paste install commands ('npx ai-elements@latest add message', the registry-URL form) and complete React/server code (useChat + DefaultChatTransport, MessageResponse, streamText route), plus specific problem→fix breakage pairs; not a 2 because the code is real, complete, and specific rather than pseudocode.

3 / 3

Workflow Clarity

Sequences exist (the 3-step type-error fix '1. Reinstall → 2. update conflicting dep → 3. delete if unused', the breakage table's problem→cause→fix), but there are no explicit validation checkpoints or validate→fix→retry loops for fragile operations; not a 3 because no explicit build/verify checkpoint follows reinstall, not a 1 because steps are present and ordered.

2 / 3

Progressive Disclosure

No bundle files exist and all content is inline in one ~390-line body, including a 40-component catalog table and full Voice/Code Elements sections that are natural candidates for separate reference files; well-organized into clear sections, but reference-like content that should be one level deep is kept monolithically inline — matching the anchor-2 case rather than a 3.

2 / 3

Total

9

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is strong: it states concrete capabilities, includes a clear explicit 'Use when...' trigger clause, and carves out a distinct, well-bounded niche. It answers both what and when without fluff or over-claims.

DimensionReasoningScore

Specificity

Names the domain and lists multiple concrete actions — 'pre-built React components for AI interfaces built on shadcn/ui', 'building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels' — matching the multiple-specific-actions anchor; not a 2 because it covers several concrete use-cases rather than a single action.

3 / 3

Completeness

Explicitly answers both what ('pre-built React components for AI interfaces built on shadcn/ui') and when (explicit 'Use when building chat UIs... or any AI-native interface with the AI SDK'); not a 2 because the when clause is present and explicit, not merely implied.

3 / 3

Trigger Term Quality

Natural terms users would actually say are well covered — 'chat UIs', 'message displays', 'tool call rendering', 'streaming responses', 'reasoning panels', 'AI-native interface'; not a 2 because coverage is broad across the AI-UI space rather than one term with missing variations.

3 / 3

Distinctiveness Conflict Risk

Clear niche — AI-native UI components on shadcn/ui with the AI SDK — with distinct triggers unlikely to conflict with generic skills; not a 2 because it is a specific, well-bounded domain rather than a broad overlap.

3 / 3

Total

12

/

12

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

Repository
openai/plugins
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.