[claude] 클로드 웹버전에서 skill 등록하기

claude 웹버전 skill 등록

클로드는 웹환경에서도 skills를 제한적으로 등록하여 사용할 수 있다. 특히, 진행하던 프롬프트를 skill로 등록하고 싶으면 skill로 등록해줘라는 프롬프트로 skill-creator를 실행할 수 있다.

1. 프롬프트로 카드뉴스 만들기

https://v.daum.net/v/20260319184104827
카드뉴스 만들어줘

최상단에는 원본 링크를 연결해준다.

를 실행하면 다음과 같은 카드뉴스를 html로 만들어준다.

참고로 클로드는+ 를 누르면 web검색 기능을 제공하고 있다. 그러나 웹에서는 CORS와 같은 보안문제가 발생하므로 완벽하게 수행할 수는 없다.웹검색은 클로드 웹버전에서 http 통신을 제공한다는 의미로 받아들이면 안된다.단지, 웹검색을 통해서 클로드가 컨텐츠를 해석 해준다는 의미로 받아들어야 한다. 아래는 http 통신을 통해 HTML내의 xpath를 가져오라는 프롬프트이다. 당연히 보안(기능제한)문제로 실행될 수 없다.

2. skill 등록 요청

프롬프트로 생성된 결과가 마음에 든다면, skill로 등록하여 간편하게 같은 기능으로 재사용 가능하다. 다음과 같은 간단한 프롬프트만 요청하면 된다.

위의 프롬프트를 skills에 등록해줘. 
카드뉴스요약이라는 이름으로 등록해줘.

이곳에서 내 스킬에 복사를 선택하면 스킬로 등록할 수 있다.

2. 생성된 skill

스킬을 확인하는 방법은 다음과 같다.

• 클로드의 좌측 메뉴에서 사용자 지정을 선택한다.
  

  

• 사용자 지정에서 스킬을 선택한다.

• 그러면 다음과 같은 스킬 리스트가 나오고 지금 생성한 스킬을 선택해서 볼 수 있다.

3. 생성된 명세

스킬의 명세는 markdown 형식으로 저장되어 있다. 우측상단의 눈표시를 누르면 마크다운 문법을 눈으로 확인할 수 잇고 </> 를 누르면 마크다운 소스로 수정이 가능하다.

• 아래는 지침명세 내용이다.

---
name: card-news-summary
description: 뉴스 기사 URL이나 텍스트를 받아 시각적으로 매력적인 카드뉴스 HTML 위젯으로 변환합니다. 사용자가 "카드뉴스 만들어줘", "카드뉴스로 요약해줘", "뉴스를 카드뉴스로", "기사 정리해줘" 등을 요청할 때 반드시 이 스킬을 사용하세요. URL이 포함된 기사 요약 요청, 뉴스 시각화, 인포그래픽 형태의 기사 정리 요청에도 항상 이 스킬을 활용하세요.
---

# 카드뉴스요약 스킬

뉴스 기사를 시각적으로 매력적인 카드뉴스 형식의 HTML 위젯으로 변환합니다.

## 워크플로우

1. **기사 수집**: URL이 제공되면 `web_fetch`로 본문을 가져옵니다. 텍스트가 직접 주어지면 그것을 사용합니다.
2. **내용 분석**: 핵심 수치, 주요 인물/장소, 배경, 전망 등을 추출합니다.
3. **카드뉴스 생성**: `visualize:show_widget`을 사용해 HTML 위젯으로 렌더링합니다.

## 카드 구성 (6장 기본)

| 카드 | 역할 | 내용 |
|------|------|------|
| 1 | 히어로 | 제목, 핵심 메시지, 태그 |
| 2 | 핵심 수치 | 가장 중요한 숫자/통계 (대형 타이포) |
| 3 | 상세 목록 | 세부 항목, 지역/인물/사건 나열 |
| 4 | 데이터 시각화 | 막대/비율 등 수치 비교 (기사에 수치가 있을 때) |
| 5 | 현장 목소리 | 인용구, 인터뷰, 전문가 의견 |
| 6 | 전망/요약 | 향후 변화, 시사점 3가지 |

기사 성격에 따라 카드 수와 구성을 유연하게 조정하세요.

## 디자인 원칙

### 색상 시스템
- **메인 컬러**: `#e63946` (강조 빨강) — 태그, 포인트, 히어로 강조
- **서브 컬러**: `#f4a261` (따뜻한 오렌지) — 2차 강조
- **다크 배경**: `#1a1a2e` (딥 네이비) — 히어로 카드, 어두운 데이터 카드
- **라이트 배경**: `var(--color-background-primary)` — 목록, 인용 카드
- **테마 적응**: CSS 변수 사용으로 라이트/다크 모드 자동 대응

### 타이포그래피
```html
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
  font-family: 'Noto Sans KR', sans-serif;
</style>
```
- 히어로 제목: `font-size: 26px; font-weight: 900; letter-spacing: -0.02em`
- 대형 수치: `font-size: 56px; font-weight: 900; letter-spacing: -0.03em`
- 본문: `font-size: 13px; line-height: 1.75`

### 레이아웃
- 최대 너비: `max-width: 560px; margin: 0 auto`
- 카드 간격: `gap: 12px`
- 카드 모서리: `border-radius: 16px`
- 전체를 `display: flex; flex-direction: column`으로 쌓기

## 필수 요소

### 원본 링크 (최상단)
URL이 제공된 경우 항상 카드뉴스 최상단에 원본 링크를 추가합니다:
```html
<a href="[원본URL]" target="_blank" class="source-link">
  📰 원문 기사 보기 — [언론사명] / [날짜]
</a>
```

### 애니메이션
데이터 바(막대 그래프) 등에 간단한 CSS 애니메이션 적용:
```css
@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bar-fill { animation: barGrow 1s ease-out forwards; transform-origin: left; }
```

### 푸터 카드
```html
<div class="card card-footer" style="background:#1a1a2e; padding:20px 28px; display:flex; justify-content:space-between;">
  <div style="color:rgba(255,255,255,0.4); font-size:11px;">[기자명] · [언론사]</div>
  <div style="color:rgba(255,255,255,0.4); font-size:11px;">[날짜]</div>
</div>
```

## 카드 타입별 HTML 패턴

### 히어로 카드
```html
<div style="background:#1a1a2e; padding:40px 32px 36px; border-radius:16px; min-height:240px;">
  <div style="display:inline-block; background:#e63946; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.08em; padding:4px 10px; border-radius:4px; margin-bottom:20px;">[카테고리]</div>
  <h1 style="font-size:26px; font-weight:900; color:#fff; line-height:1.35; letter-spacing:-0.02em;">
    [제목] <em style="color:#f4a261; font-style:normal;">[강조어]</em>
  </h1>
  <p style="font-size:13px; color:rgba(255,255,255,0.55); line-height:1.6; margin-top:16px;">[부제목]</p>
</div>
```

### 핵심 수치 카드
```html
<div style="background:#e63946; padding:32px; border-radius:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px;">
  <div>
    <div style="font-size:13px; color:rgba(255,255,255,0.7);">[라벨]</div>
    <div style="font-size:56px; font-weight:900; color:#fff; letter-spacing:-0.03em;">[수치]</div>
    <div style="font-size:18px; color:rgba(255,255,255,0.75);">[단위]</div>
  </div>
  <div style="display:flex; flex-direction:column; gap:10px;">
    <!-- 미니 통계 카드들 -->
    <div style="background:rgba(255,255,255,0.18); border-radius:10px; padding:10px 14px;">
      <div style="font-size:20px; font-weight:900; color:#fff;">[수치]</div>
      <div style="font-size:11px; color:rgba(255,255,255,0.7); margin-top:2px;">[설명]</div>
    </div>
  </div>
</div>
```

### 데이터 바 카드
```html
<div style="background:#0d1b2a; padding:32px; border-radius:16px;">
  <div style="font-size:11px; font-weight:700; letter-spacing:0.1em; color:#f4a261; margin-bottom:16px;">[섹션제목]</div>
  <h3 style="font-size:18px; font-weight:700; color:#fff; line-height:1.5; margin-bottom:28px;">[소제목]</h3>
  <!-- 바 아이템 반복 -->
  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:13px; color:rgba(255,255,255,0.75);">[항목명]</span>
      <span style="font-size:14px; font-weight:900; color:#f4a261;">[수치]</span>
    </div>
    <div style="height:8px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden;">
      <div style="height:100%; width:[퍼센트]%; background:#e63946; border-radius:4px; animation:barGrow 1s ease-out forwards; transform-origin:left;"></div>
    </div>
  </div>
</div>
```

### 인용구 카드
```html
<div style="background:#f8f0e3; padding:28px; border-radius:16px; border:0.5px solid #e0d4c0;">
  <div style="font-size:11px; font-weight:700; letter-spacing:0.1em; color:#b5813a; margin-bottom:16px;">현장의 목소리</div>
  <div style="border-left:3px solid #e63946; padding:14px 18px; background:#fff; border-radius:0 10px 10px 0; margin-bottom:12px;">
    <p style="font-size:13px; line-height:1.75; color:#3a3a3a;">"[인용문]"</p>
    <div style="font-size:11px; color:#888; margin-top:8px; font-style:italic;">— [발화자]</div>
  </div>
</div>
```

### 전망/요약 카드 (3열 그리드)
```html
<div style="background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); padding:28px; border-radius:16px;">
  <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;">
    <div style="background:#fff0f0; border:0.5px solid #ffd0d0; border-radius:10px; padding:14px 12px; text-align:center;">
      <span style="font-size:20px; display:block; margin-bottom:6px;">[이모지]</span>
      <div style="font-size:11px; font-weight:700; color:var(--color-text-secondary); line-height:1.4;">[항목]</div>
    </div>
    <!-- 반복 -->
  </div>
</div>
```

## 기사 유형별 조정

| 기사 유형 | 조정 사항 |
|-----------|-----------|
| 정치/사회 | 히어로 강조색 → 다크 네이비, 인용구 비중 높이기 |
| 경제/금융 | 수치 카드 확대, 차트/바 중심 구성 |
| 국제 | 지역명 목록 카드, 지도 느낌의 색상 구분 |
| 문화/연예 | 밝은 배경, 파스텔 계열 포인트 컬러 |
| 재난/긴급 | 경고색(빨강/주황) 강조, 심플하고 빠르게 읽히는 구성 |

## 주의사항

- `visualize:show_widget` 호출 전 반드시 `visualize:read_me`로 디자인 가이드 확인
- 모든 텍스트는 CSS 변수(`var(--color-text-primary)` 등) 또는 색상 명시로 다크모드 대응
- `localStorage` 사용 금지
- 외부 폰트는 Google Fonts CDN만 허용
- 카드뉴스 완성 후 별도 텍스트 설명 최소화 (위젯이 모든 것을 표현)

이것을 수동으로 추가할 경우는 스킬메뉴에서 상단의 +를 누른 후, 다음과 같은 화면에서 이름, 설명, 그리고 지침부분을 위의 내용과 같이 자세하게 기술하면된다.

4. 등록된 스킬을 이용한 예제

card news 요약으로 
https://vintageappmaker.tistory.com/608
을 만들어줘