skills.rest
cris-achiardi
cris-achiardiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/cris-achiardi/claude-skills --skill ai-component-metadata-cris-achiardi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
okgoogle13okgoogle13
1

react-component-scaffolder

Generate a React component directory with TypeScript files and MUI Box.

Community
Basic
falconntfalconnt
3

designing-frontends

Generate structured design guidance for HTML/CSS/JS or React/Vue frontends.

Community
Advanced
hulusi-tunchulusi-tunc
3

component-spec

Generate component specifications with anatomy, variants, states, and accessibility guidelines.

Community
Advanced
GDSDNGDSDN
3

gotcha

Add known issues with titles, descriptions, categories, and severity to project memory.

Community
Intermediate