create-component

Scaffold React components with TypeScript interfaces and security patterns.

Updated Dec 15, 2025
One-click install
npx skills add https://github.com/jhlee0409/sidedish --skill create-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/jhlee0409/sidedish/tree/main/.claude/skills/create-component
Command: npx skills add https://github.com/jhlee0409/sidedish --skill create-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI 컴포넌트를 빠르게 생성하고 표준 템플릿과 보안 고려사항을 함께 제공합니다.

Core Features & Use Cases

  • Component templates: TypeScript 인터페이스와 스타일링 패턴 포함
  • Korean Text Guidelines: 버튼/레이블/오류 텍스트 표준화
  • Security Considerations: 콘텐츠 렌더링 시 XSS 주의점 반영

Quick Start

'Button'과 같은 새 컴포넌트의 골격과 기본 props를 생성합니다.

Frequently Asked Questions about create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I auto-generate React components with TypeScript interfaces?

This Skill auto-generates React components for SideDish UI development with TypeScript interfaces, styling patterns, and security-conscious structures. It scaffolds components with a 'use client' directive, Props interface, React.FC type, and reusable templates for forms and modals.

Can I use this to create component templates with security patterns built in?

Yes. The Skill generates component scaffolds that include XSS prevention patterns and security considerations for content rendering, applying project conventions and best practices for forms and modal components.

What's included in the generated React component structure?

Generated components include a 'use client' directive, TypeScript Props interface, React.FC implementation, default export, styling patterns, and security-aware templates for forms and modals with standardized Korean text guidelines for buttons, labels, and error messages.

How does component scaffolding speed up React UI development?

Instead of manually writing boilerplate for each component, scaffolding generates the full structure—TypeScript types, styling setup, security patterns, and component templates—so you start coding logic immediately rather than repeating structural setup.

Does this work for interactive elements like modals and forms?

Yes. The Skill provides reusable templates specifically for form and modal components, including security patterns, standard text conventions, and props structure tailored for interactive SideDish UI elements.