Does it support TypeScript?

Yes, the skill generates type-safe components with TypeScript interface definitions for props and state management.

Which frontend frameworks are supported?

This skill supports React, Vue, and Svelte, adapting its output to follow the specific patterns and best practices of each framework.

Can I use this with Tailwind CSS?

Absolutely. The skill is designed to work with various styling approaches including Tailwind CSS, CSS Modules, and styled-components.

Are the generated components accessible?

Yes, accessibility is a core priority. The skill includes ARIA labels, keyboard navigation roles, and semantic HTML by default.

What types of components can this skill create?

It can generate a wide range of components including basic inputs, complex forms, layout containers, navigation menus, and feedback elements like modals or alerts.

Component Templates

Name: Component Templates
Author: vanman2024

byvanman2024

デザインツール

Generates production-grade, accessible UI components for React, Vue, and Svelte using standardized design patterns.

概要

The Component Templates skill empowers Claude to act as a senior frontend engineer by providing a robust library of UI patterns. It covers everything from basic elements like buttons and inputs to complex layout structures such as modals, data tables, and navigation systems. By following an accessibility-first approach, the skill ensures that every generated component includes proper ARIA labels and keyboard navigation. It automatically adapts to your project's specific framework and styling preferences, including Tailwind CSS or CSS Modules, while managing various component states and responsive breakpoints.

主な機能

Framework-specific generation for React, Vue, and Svelte
Automated variant handling for sizes, colors, and states
Support for modern styling systems like Tailwind and CSS Modules
Accessibility-first design with built-in ARIA roles and labels
Responsive, mobile-first layout and grid patterns
0 GitHub stars

ユースケース

Rapidly prototyping a design system with consistent UI primitives
Generating complex, validated form structures with feedback components
Building responsive dashboard layouts with cards, modals, and data tables

概要

主な機能

Framework-specific generation for React, Vue, and Svelte
Automated variant handling for sizes, colors, and states
Support for modern styling systems like Tailwind and CSS Modules
Accessibility-first design with built-in ARIA roles and labels
Responsive, mobile-first layout and grid patterns
0 GitHub stars

ユースケース

Rapidly prototyping a design system with consistent UI primitives
Generating complex, validated form structures with feedback components
Building responsive dashboard layouts with cards, modals, and data tables