CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

65

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

71%Weight 40%Scale 1-5

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

This is a highly actionable, information-rich body: exact commands, executable code for both client and server, and excellent troubleshooting sections covering real failure modes. Its weaknesses are structural redundancy (install guidance and component listings repeated) and the absence of progressive disclosure — a ~490-line monolith whose component catalog should live in a separate reference file.

Suggestions

Consolidate the three installation sections (Type Errors, Install only what you need, Installation) into one canonical install section and cross-reference it elsewhere.

Move the 40-row Full Component List and the Voice/Code Elements catalogs into a references/components.md file, keeping only the top components inline; also deduplicate the 'agent' table entry.

Add a short ordered 'Setup' checklist at the top (shadcn init with Radix base → install specific components → render with Message) so prerequisite steps aren't scattered across Common Gotchas.

DimensionReasoningScore

Conciseness

The body is dense with genuinely useful, non-obvious guidance (no explaining of known concepts), but it repeats itself: installation instructions appear in three sections ("Type Errors", "Install only the components you need", "Installation"), the "agent" component is listed twice in the component table (lines ~265 and ~292), and the 40-row full component catalog duplicates detail restated in the Voice/Code Elements sections. This matches 'mostly efficient but could be tightened'; not 2 because there is no padded concept explanation, and not 4 because the redundancy is more than minor.

3 / 5

Actionability

Nearly every section gives copy-paste-ready material: exact install commands ("npx ai-elements@latest add message", "npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json"), complete executable React snippets (Chat with useChat/DefaultChatTransport, server route with streamText/toUIMessageStreamResponse), and per-component props examples. Specific examples cover the common cases.

5 / 5

Workflow Clarity

Sequences are clear: scaffold → init shadcn → install only needed components → render with Message/Conversation, and the type-error section gives an explicit escalation path (reinstall component → update conflicting dep → delete only if truly unused). The 'Common breakages' and 'Common Gotchas' sections supply error-recovery feedback. Not 5 because there is no upfront ordered setup checklist tying prerequisites (shadcn init, Radix base) into a single sequenced workflow — they are scattered across sections.

4 / 5

Progressive Disclosure

No bundle files exist (references/scripts/assets absent), and the skill is a single ~490-line monolith. Sections are well-headed and navigation is possible, but bulk reference material — the 40-row Full Component List and the Voice/Code Elements catalogs — is inlined in SKILL.md where the rubric expects it split into one-level-deep reference files. This matches 'some structure but content that should be separate is inline'; not 2 because headers make it navigable, and not 4 because a large catalog clearly belongs in a separate file.

3 / 5

Total

15

/

20

Passed

Description

87%Weight 40%Scale 1-5

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 well-constructed: it names the library, its foundation (shadcn/ui), and its purpose, then gives an explicit 'Use when...' clause with a strong list of natural trigger phrases. Third-person voice is maintained and there is no fluff. The only weakness is that capability coverage relies on interface categories rather than concrete component-level actions or synonyms like 'chatbot'.

Suggestions

Add a few natural synonyms users might say, e.g. 'chatbot UI', 'conversation components', or 'streaming markdown', to broaden trigger coverage.

Consider naming one or two concrete components (message, conversation, tool) to sharpen the 'what' beyond interface categories.

DimensionReasoningScore

Specificity

Quotes like "pre-built React components for AI interfaces built on shadcn/ui" and "building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels" name the domain plus several concrete capabilities. Not a 5 because it describes what the library covers rather than enumerating multiple distinct actions (extract/fill/merge style), leaving minor coverage gaps.

4 / 5

Completeness

Explicitly answers both: what ("pre-built React components for AI interfaces built on shadcn/ui") and when ("Use when building chat UIs, message displays, tool call rendering..."). Mirrors the anchor-5 example structure of capability list plus a concrete 'Use when...' clause with trigger phrases.

5 / 5

Trigger Term Quality

Natural phrases users would say are present: "chat UIs", "message displays", "tool call rendering", "streaming responses", "reasoning panels", "AI SDK". Not a 5 because common variations like "chatbot", "conversation UI", or component names (message, conversation) are missing.

4 / 5

Distinctiveness Conflict Risk

"AI Elements", "shadcn/ui", "AI SDK" carve out a clear niche with distinct triggers unlikely to fire for unrelated skills. Only minor overlap with generic React/UI-library skills, which does not rise to the anchor-4 'minor overlap risk with closely related skills' framing.

5 / 5

Total

18

/

20

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.

Validation — 14 / 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

Path

plugins/vercel/skills/ai-elements/SKILL.md

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.