FE Dev Starter Kit for Claude Code
starter kit สาย Frontend 8 ตัว: skills อย่าง impeccable กับ Karpathy skills สอน Claude ให้คิดก่อนเขียน ส่วน MCP อย่าง context7, Playwright, Chrome DevTools, Figma ให้มันใช้ tools ตรง
19 เม.ย. 2026อ่าน ~2 นาทีดู 30,468 ครั้งบนเพจ
Claude Code
เพิ่งลง Claude Code แล้วไม่รู้จะ install อะไรก่อน?
นี่คือ starter kit สำหรับ Frontend Dev — Skills กับ MCP Servers ที่ลงแล้วรู้สึกต่างทันที
ไม่ใช่ list 100 อัน ที่ไม่มีใครใช้จริง — นี่คือชุดที่ใช้งานจริงทุกวัน
🧠 Skills (ไฟล์ .md ที่สอน Claude ให้ทำงานเฉพาะทาง)
pbakaus/impeccable★17k — 17 design skills ในชุดเดียว
→ Claude จะเขียน CSS ที่ pixel-perfect, responsive, accessible ตั้งแต่ shot แรก
→ ไม่ต้องแก้ spacing, alignment, font-size ซ้ำอีก
🔗 github.com/nicepkg/impeccablenextlevelbuilder/ui-ux-pro-max-skill— UX decision skill
→ สอน Claude ให้คิดแบบ designer ก่อน code
→ layout, hierarchy, whitespace — ไม่ใช่แค่ "ใส่ button ตรงนี้"
🔗 github.com/nicepkg/impeccable (อยู่ใน impeccable collection)multica-ai/andrej-karpathy-skills★59k — Karpathy's 4 principles
→ Think Before Coding, Simplicity First, Surgical Changes, Goal-Driven
→ CLAUDE.md ไฟล์เดียว แต่เปลี่ยนวิธี Claude เขียน code ทั้งหมด
🔗 github.com/multica-ai/andrej-karpathy-skills
🔌 MCP Servers (tools ที่ Claude เรียกใช้ได้ตรง)
upstash/context7★ — Doc grounding
→ Claude อ่าน docs ของ library ที่คุณใช้ได้ทันที
→ ไม่ hallucinate API ที่ไม่มีอีกต่อไป — ตอบจาก docs จริง
🔗 github.com/upstash/context7microsoft/playwright-mcp★ — Browser testing
→ สั่ง Claude ให้ test หน้าเว็บใน browser จริง
→ click, fill form, screenshot, assert — ทั้งหมดจาก terminal
🔗 github.com/microsoft/playwright-mcpChromeDevTools/chrome-devtools-mcp★ — DevTools bridge
→ Claude เห็น console.log, network requests, performance ของ browser คุณ
→ debug โดยไม่ต้อง copy-paste error จาก DevTools
🔗 github.com/anthropics/anthropic-cookbook (Chrome DevTools MCP)GLips/Figma-Context-MCP★14k — Figma → Code
→ อ่าน layout จาก Figma file แล้วแปลงเป็น code
→ ไม่ใช่แค่ screenshot — อ่าน component tree, spacing, color tokens จริง
🔗 github.com/nicepkg/impeccable (ใช้ GLips/Figma-Context-MCP)21st-dev/magic-mcp★4.7k — v0 ใน IDE
→ generate React component จาก prompt ตรงใน editor
→ เหมือนได้ v0.dev แต่ไม่ต้องเปิด browser
🔗 github.com/21st-dev/magic-mcp
ลงทั้งหมดนี้ใช้เวลาไม่ถึง 10 นาที — แต่ productivity เปลี่ยนทั้ง workflow
Skills = สอน Claude ให้คิดแบบ senior
MCP = ให้ Claude เข้าถึง tools ที่ senior ใช้
ลง 8 อันนี้ก่อน — แล้วคุณจะไม่อยากกลับไปเขียน code เปล่าๆ อีก
เอาอันไหนมาลงต่อ comment บอกได้