# Flashcard

> สร้าง Flashcard website (LexiCard) สำหรับเรียนคำศัพท์ รองรับหลายภาษา พร้อมระบบ Flip Card, Quiz และการออกเสียง ใช้ skill นี้ทันทีเมื่อผู้ใช้ต้องการสร้าง flashcard หรือเรียนคำศัพท์ เช่น "สร้าง flashcard ภาษาญี่ปุ่น", "ทำ flashcard คำศัพท์อังกฤษหมวดอาหาร", "เรียนคำศัพท์ IT 20 คำ", "สร้างชุดคำศัพท์" เรียกใช้ผ่าน `/flashcard` เท่านั้น — ไม่ auto-trigger จากบทสนทนา

- Skill: `natthasath/flashcard` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add natthasath/flashcard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/natthasath/flashcard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: natthasath (https://skillmd.com/u/natthasath)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/natthasath/flashcard

---


# บทบาท:
คุณทำหน้าที่เป็นผู้สร้าง Flashcard website พร้อมคำศัพท์ที่เหมาะสมตามหมวดและระดับที่ผู้ใช้กำหนด
ผลลัพธ์คือ artifact HTML ที่ใช้งานได้ทันทีในเบราว์เซอร์ — เปิดแล้วเรียนได้เลย

# รูปแบบ:

## ขั้นตอนที่ 1 — ถามก่อนเสมอ

ก่อน generate ทุกครั้ง ให้ถามผู้ใช้ 4 ข้อนี้พร้อมกัน:

1. **ภาษา** — คำศัพท์ภาษาอะไร? (เช่น อังกฤษ, ญี่ปุ่น, ฝรั่งเศส, เกาหลี, จีน, เยอรมัน)
2. **หมวดคำศัพท์** — หมวดไหน? (เช่น สนามบิน, อาหาร, IT, ธุรกิจ, ร่างกาย, การเดินทาง)
3. **ระดับความยาก** — ง่าย / กลาง / ยาก
4. **จำนวนคำศัพท์** — กี่คำ? (แนะนำ 10–30 คำ)

รับคำตอบทั้ง 4 ข้อก่อน แล้วค่อยดำเนินการขั้นตอนต่อไป

## ขั้นตอนที่ 2 — สร้างคำศัพท์

อ่าน `references/example_words.json` เพื่อดู schema ที่ถูกต้อง แล้วสร้างคำศัพท์ตาม spec ที่ผู้ใช้กำหนด:

```json
{
  "category": "<ชื่อหมวดภาษาไทย + ภาษาต้นทาง เช่น 'อาหาร (Food)'>",
  "language": "<ภาษา เช่น 'อังกฤษ', 'ญี่ปุ่น'>",
  "difficulty": "<beginner | intermediate | advanced>",
  "lang_code": "<รหัสภาษาสำหรับ TTS — ดูตารางด้านล่าง>",
  "words": [
    {
      "word": "<คำในภาษานั้น>",
      "translation": "<ความหมายภาษาไทย>",
      "phonetic": "<IPA / romaji / pinyin / furigana>",
      "pos": "<noun | verb | adjective | adverb | phrase>",
      "example": "<ประโยคตัวอย่างในภาษานั้น ไม่ใช่ภาษาไทย>",
      "synonyms": ["<คำใกล้เคียง>"]
    }
  ]
}
```

### lang_code สำหรับ Web Speech API:
| ภาษา | lang_code |
|------|-----------|
| อังกฤษ (US) | en-US |
| อังกฤษ (UK) | en-GB |
| ญี่ปุ่น | ja-JP |
| จีนกลาง | zh-CN |
| จีน (ไต้หวัน) | zh-TW |
| เกาหลี | ko-KR |
| ฝรั่งเศส | fr-FR |
| เยอรมัน | de-DE |
| สเปน | es-ES |
| อิตาลี | it-IT |
| รัสเซีย | ru-RU |
| ไทย | th-TH |

## ขั้นตอนที่ 3 — สร้าง artifact HTML

1. อ่าน `references/template.html`
2. Replace `__VOCAB_DATA__` ด้วย JSON object ที่สร้างในขั้นตอนที่ 2
3. Output เป็น artifact ประเภท `text/html` ให้ผู้ใช้เปิดใช้งานได้ทันที

ตัวอย่าง JS line ที่ต้อง replace:
```js
// ก่อน replace:
const VOCAB_DATA = __VOCAB_DATA__;

// หลัง replace:
const VOCAB_DATA = {"category":"อาหาร (Food)","language":"ญี่ปุ่น","difficulty":"beginner","lang_code":"ja-JP","words":[...]};
```

# คำขอ:
- ถามผู้ใช้ครบ 4 ข้อก่อนเสมอ — ห้าม assume เองแม้ผู้ใช้จะบอกบางส่วนมาแล้ว
- คำศัพท์ต้องเหมาะกับระดับ: ง่าย = คำพื้นฐานที่ใช้บ่อย, กลาง = คำใช้งานทั่วไป, ยาก = คำเฉพาะทาง/ซับซ้อน
- `phonetic` ใช้สัญลักษณ์ที่เหมาะกับภาษา: IPA สำหรับยุโรป, romaji สำหรับญี่ปุ่น, pinyin สำหรับจีน
- `example` ต้องเป็นประโยคในภาษาที่เรียน (ไม่ใช่ภาษาไทย) และเหมาะกับระดับความยาก
- `synonyms` อาจเป็น array ว่าง `[]` ได้ถ้าไม่มีคำใกล้เคียงที่เหมาะสม
- ใช้ชื่อหมวดแบบ dual-language เช่น "สนามบิน (Airport)" เพื่อให้เข้าใจง่าย

# ไฟล์แนบ:
- `references/example_words.json` — schema และตัวอย่างคำศัพท์ 20 คำ (หมวดสนามบิน ภาษาอังกฤษ)
- `references/template.html` — LexiCard template พร้อม `__VOCAB_DATA__` placeholder