AI Component Metadata

Name: AI Component Metadata
Brand: AgentVolt
Availability: InStock

Generates AI-ready metadata for existing design system components.

Design / Frontenddesignfrontend

by AgentVoltv1.0.0Published 1y ago1 install

Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Generate AI-readable metadata for our 40-component design system so Claude understands when to use each.”

Beforegeneric AI agent

Component libraries need documentation so people know when and how to use each component. You could write descriptions of what each component does and when to use it. Including information about props, variants, and state helps developers understand the API. Some teams create interactive storybooks that let you see components in different states. Automating this documentation from code comments can save work. However, the documentation needs to stay in sync with actual component implementations as they change.

Afterwith AI Component Metadata

AI COMPONENT METADATA OUTPUT:

METADATA GENERATION (sample 3 components)

   COMPONENT: Button
   Purpose: "User-initiated action triggering immediate response (submit form, toggle feature)"
   When_to_use: [
     "Primary action on a page or dialog",
     "Form submission",
     "Dismissible modal confirmations"
   ]
   When_NOT_to_use: [
     "Navigation within app (use Link instead)",
     "Opening menus or dropdowns (use MenuButton)",
     "Toggling binary state (use Toggle or Checkbox)"
   ]
   Props: {
     variant: "primary|secondary|danger (default: primary)",
     size: "sm|md|lg (default: md)",
     disabled: "boolean (prevents interaction, grays out)",
     loading: "boolean (shows spinner, disables click)"
   }
   
   COMPONENT: Card
   Purpose: "Self-contained content container with optional actions"
   Common_patterns: [
     "Card(title, description, action_button) for list items",
     "Card(metric, trend_arrow, footer) for dashboard widgets"
   ]
   Anti_patterns: [
     "Never nest Card inside Card",
     "Never put scrollable content directly inside Card (use CardContent wrapper)"
   ]
   Nesting_rules: "Can contain Button, Badge, Link. Cannot contain Dialog, Modal, or Drawer."
   
   COMPONENT: Modal
   Purpose: "Center overlay blocking background interaction until closed"
   Accessibility: "Traps focus, auto-focused on first interactive element, ESC key closes"
   Key_props: {
     isOpen: "boolean (controls visibility)",
     onClose: "function (must be called on ESC, backdrop click, or close button)",
     title: "string (announced to screen readers)"
   }
   Gotchas: [
     "onClose MUST close the modal (component doesn't auto-close)",
     "Backdrop click closes by default (set closeOnBackdropClick=false to disable)"
   ]

AI-READINESS COMPLIANCE REPORT
   Total components: 40
   Fully documented: 38 (95percent)
   Needs revision: 2 (Breadcrumb: missing a11y labels, Tabs: unclear active indicator logic)
   Metadata coverage: 98percent (all components have purpose, props, when_to_use)

DELIVERABLE FORMAT
   Output: components.ai.json (machine-readable schema)
   Size: 145KB
   Consumable by: Claude Code, code generation agents

About this skill

name: ai-component-metadata description: Use when Generates AI-ready metadata for existing design system components.

AI Component Metadata

Analyzes component structure and produces structured metadata so an agent knows when and how to use each component correctly.

What you get

A metadata file describing each component's purpose, props, and valid usage.

Customize your output

Which components to document
metadata format.

Example output

Structured metadata for a component library.

Best for

Teams whose design system is consumed by AI coding agents.

SKILL.md preview

SKILL.md

---
name: ai-component-metadata
description: Analyze existing design system components and generate structured, AI-readable metadata so an agent knows when and how to use each component correctly.
version: 1.0.0
category: Design / Frontend
author: AgentVolt
license: proprietary
tags:
  - design
  - frontend
  - standard
---

# AI Component Metadata

Analyze existing design system components and generate structured, AI-readable metadata so an agent knows when and how to use each component correctly.

## When to use

… (sign up to view the full skill)