ai-component-metadata

Generate AI-ready metadata TSX exports from React/TypeScript components.

62|8|Updated Nov 2, 2025

Search Tags:#automation #typescript #react #ai #metadata #design-system

Ready to run

npx skills add https://github.com/cris-achiardi/claude-skills --skill ai-component-metadata-cris-achiardi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ai-component-metadata
Source: https://github.com/cris-achiardi/claude-skills/tree/main/skills/ai-component-metadata
Command: npx skills add https://github.com/cris-achiardi/claude-skills --skill ai-component-metadata-cris-achiardi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Generate AI-ready metadata for design system components to enable AI-assisted UI generation and correct usage guidance for teams.

Core Features & Use Cases

Analyzes component structure, variants, props, and accessibility to produce a comprehensive metadata schema.
Supports template-based generation via the scripts/generate_metadata.py workflow and a manual process.
Provides runnable examples and validation guidance to ensure metadata quality.

Quick Start

Run the metadata generator on a component file to produce its AI-ready metadata TSX export.

Frequently Asked Questions about ai-component-metadata

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate AI-ready metadata for React design system components?▼

You can generate AI-ready metadata for React design system components by analyzing their TypeScript structure to extract props, variants, states, and accessibility data into a structured TSX export named componentMetadata.

What is AI-ready component metadata for design systems?▼

AI-ready component metadata is a deterministic structured schema that includes usage, composition, behavior, accessibility, and aiHints, enabling AI-assisted UI generation and correct usage guidance across design and development workflows.

Can I use a template to automate design system metadata generation in TypeScript?▼

Yes, you can automate design system metadata generation in TypeScript using a template-based workflow via scripts, which analyzes component structure to produce a deterministic metadata TSX export.

Does the metadata schema include accessibility data and nested component relationships?▼

Yes, the metadata schema includes comprehensive accessibility data and nested relationships alongside props, variants, and states to provide complete component usage guidance for AI workflows.

What is the best way to extract props and variants from a React component for AI workflows?▼

The best way to extract props and variants from a React component for AI workflows is to run a deterministic metadata generator that analyzes the component file and outputs a structured schema with aiHints.

Do I need manual validation after generating metadata for my design system?▼

Yes, you need manual validation to ensure metadata quality, as the generator supports both a script-based automated workflow and a manual process with runnable examples to verify the extracted component schema.