Can it help with native HTML element attributes?

Absolutely. It provides patterns for extending React.ButtonHTMLAttributes and ComponentPropsWithoutRef to ensure components support all standard HTML props.

Why does the skill recommend interfaces over types for props?

This skill follows the industry standard of using interfaces for component props to support better extensibility and provide more readable error messages in many IDEs.

Does this skill support Tailwind CSS and CVA?

Yes, it includes specific implementation patterns for class-variance-authority (cva) to create type-safe style variants often used with Tailwind CSS.

How does it handle component documentation?

It enforces the use of JSDoc comments for every prop, which ensures that developers see helpful descriptions via IntelliSense when consuming the component.

TypeScript Prop Architect

Name: TypeScript Prop Architect
Author: Agentient

byAgentient

Design Tools

Standardizes React component prop definitions with JSDoc documentation, utility types, and type-safe variant patterns.

About

TypeScript Prop Architect is a specialized skill designed to elevate frontend development standards by enforcing best-practice TypeScript conventions for React component props. It proactively assists developers in defining structured interfaces, implementing detailed JSDoc documentation for enhanced IDE tooltips, and leveraging advanced utility types like Pick, Omit, and ComponentPropsWithoutRef. This skill is essential for teams building scalable design systems, as it includes built-in patterns for class-variance-authority (cva) integration and polymorphic component structures, ensuring your UI library remains type-safe, maintainable, and developer-friendly.

Key Features

Advanced utility type patterns for extending native HTML attributes
0 GitHub stars
Automated JSDoc documentation for enhanced IDE prop descriptions
Type-safe variant management using cva and VariantProps
Implementation patterns for complex polymorphic 'as' components
Reusable generic component definitions for flexible data handling

Use Cases

Building a professional-grade internal UI design system from scratch
Creating complex, reusable library components that require polymorphic element support
Refactoring legacy JavaScript or loosely typed components to strict TypeScript

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit typescript-prop-definition

For use in Claude.ai and ChatGPT

Download Skill

GitHub