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

0•

Design Tools

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

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

01Advanced utility type patterns for extending native HTML attributes

020 GitHub stars

03Automated JSDoc documentation for enhanced IDE prop descriptions

04Type-safe variant management using cva and VariantProps

05Implementation patterns for complex polymorphic 'as' components

06Reusable generic component definitions for flexible data handling

Use Cases

01Building a professional-grade internal UI design system from scratch

02Creating complex, reusable library components that require polymorphic element support

03Refactoring 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

Key Features

01Advanced utility type patterns for extending native HTML attributes

020 GitHub stars

03Automated JSDoc documentation for enhanced IDE prop descriptions

04Type-safe variant management using cva and VariantProps

05Implementation patterns for complex polymorphic 'as' components

06Reusable generic component definitions for flexible data handling

Use Cases

01Building a professional-grade internal UI design system from scratch

02Creating complex, reusable library components that require polymorphic element support

03Refactoring 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