Skills
.Work. You
Rest

component-template-generator

Official

Generate starter component code.

Design & Creative#accessibility#react#vue#design tokens#svelte#component generation#ui development
Authorcuriositech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of boilerplate code for UI components, ensuring consistency and adherence to design token standards across different frameworks.

Core Features & Use Cases

  • Framework-Specific Templates: Generates components for React, Vue, and Svelte.
  • Design Token Integration: Ensures components use semantic design tokens instead of hardcoded values.
  • Accessibility Baked-In: Includes accessibility patterns like focus management and ARIA attributes from the start.
  • Trend-Specific Styles: Supports generating components in various aesthetic trends like Neobrutalism, Glassmorphism, and Terminal.
  • Use Case: When starting a new project or adding a new component to an existing design system, use this Skill to quickly generate a well-structured, accessible, and token-aware component template.

Quick Start

Generate a React Button component using Tailwind CSS and neobrutalism styles.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-template-generator
Download link: https://github.com/curiositech/some_claude_skills/archive/main.zip#component-template-generator

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.