create-component

星标0

分支0

更新时间2025年12月21日 12:03

Creates React components for SideDish. Use when adding new UI components, modals, forms, or interactive elements. Includes TypeScript interfaces, styling patterns, and security considerations.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

jhlee0409

jhlee0409/sidedish

打开 GitHub 仓库查看创作者相关仓库

下载

Create Component Skill

Instructions

Create in src/components/ComponentName.tsx
Add 'use client' for interactive components
Define props interface above component
Use React.FC<Props> pattern
Export as default

Component Template

'use client'

import { useState } from 'react'

interface ComponentNameProps {
  title: string
  onClick?: () => void
  children?: React.ReactNode
}

const ComponentName: React.FC<ComponentNameProps> = ({ title, onClick, children }) => {
  const [isLoading, setIsLoading] = useState(false)

  return (
    <div className="bg-white rounded-xl p-6 shadow-lg">
      <h2 className="text-lg font-bold text-slate-900">{title}</h2>
      {children}
    </div>
  )
}

export default ComponentName

Korean Text

Buttons: 등록하기, 저장하기, 취소, 삭제
Labels: 제목, 설명, 태그
Errors: 오류가 발생했습니다

Security

import SafeMarkdown from '@/components/SafeMarkdown'
<SafeMarkdown>{userContent}</SafeMarkdown>

For form components, modal template, and complete patterns, see reference.md.

同仓库更多 Skills

同仓库

custom-hook

jhlee0409/sidedish

Creates custom React hooks for SideDish. Use when the user asks to create a new hook, extract shared logic into a hook, or refactor component logic into reusable hooks. Includes TypeScript interfaces, memoization patterns, and index.ts export.

2025-12-250

api-architecture

jhlee0409/sidedish

API 아키텍처 설계 원칙과 패턴을 적용합니다. RESTful API 설계, 버저닝, 응답 표준화, 미들웨어 패턴 구현 시 사용하세요. Next.js App Router 기반 서버리스 아키텍처에 최적화되어 있습니다.

2025-12-210

api-endpoint

jhlee0409/sidedish

Creates Next.js API routes with Firebase. Use when adding GET/POST/PATCH/DELETE endpoints, implementing pagination, adding auth checks, or handling file uploads. Includes route templates and error handling.

2025-12-210

data-modeling

jhlee0409/sidedish

Firestore 데이터 모델링과 스키마 설계 패턴을 적용합니다. 새 컬렉션 추가, 관계 설계, 인덱스 최적화, 데이터 마이그레이션 시 사용하세요. NoSQL 특성에 맞는 비정규화 전략을 포함합니다.

2025-12-210

debugging

jhlee0409/sidedish

Debugs common issues in SideDish. Use when fixing errors, investigating bugs, troubleshooting API failures, or resolving build issues. Includes common error patterns, logging strategies, and debugging tools.

2025-12-210

error-handling

jhlee0409/sidedish

일관된 에러 처리와 로깅 패턴을 구현합니다. API 에러 응답, 예외 처리, 에러 바운더리, 사용자 친화적 메시지 작성 시 사용하세요. 서버와 클라이언트 양쪽의 에러 처리 전략을 포함합니다.

2025-12-210

name	create-component
description	Creates React components for SideDish. Use when adding new UI components, modals, forms, or interactive elements. Includes TypeScript interfaces, styling patterns, and security considerations.

Create Component Skill

Instructions

Create in src/components/ComponentName.tsx
Add 'use client' for interactive components
Define props interface above component
Use React.FC<Props> pattern
Export as default

Component Template

'use client'

import { useState } from 'react'

interface ComponentNameProps {
  title: string
  onClick?: () => void
  children?: React.ReactNode
}

const ComponentName: React.FC<ComponentNameProps> = ({ title, onClick, children }) => {
  const [isLoading, setIsLoading] = useState(false)

  return (
    <div className="bg-white rounded-xl p-6 shadow-lg">
      <h2 className="text-lg font-bold text-slate-900">{title}</h2>
      {children}
    </div>
  )
}

export default ComponentName

Korean Text

Buttons: 등록하기, 저장하기, 취소, 삭제
Labels: 제목, 설명, 태그
Errors: 오류가 발생했습니다

Security

import SafeMarkdown from '@/components/SafeMarkdown'
<SafeMarkdown>{userContent}</SafeMarkdown>

For form components, modal template, and complete patterns, see reference.md.