-> ื—ื–ืจื” ืœืืชืจ

Skills ืœ-Claude Code

ื›ืœื™ื ื—ื›ืžื™ื ืฉืžืจื—ื™ื‘ื™ื ืืช ื”ื™ื›ื•ืœื•ืช ืฉืœ Claude Code ื•ืžืืคืฉืจื™ื ืœื• ืœื‘ืฆืข ืžืฉื™ืžื•ืช ืžืชืงื“ืžื•ืช.
ืคืฉื•ื˜ ืชื’ื™ื“ื• ืœ-Claude ืžื” ืืชื ืฆืจื™ื›ื™ื - ื•ื”ื•ื ื™ืคืขื™ืœ ืื•ื˜ื•ืžื˜ื™ืช ืืช ื”-Skill ื”ืžืชืื™ื!

๐Ÿค” ืžื” ื–ื” Claude Code?

Claude Code ื”ื•ื ื›ืœื™ ืฉื•ืจืช ืคืงื•ื“ื” (CLI) ืฉืœ Anthropic ืฉืžืืคืฉืจ ืœืขื‘ื•ื“ ืขื Claude ื™ืฉื™ืจื•ืช ืžื”ืžื—ืฉื‘ ืฉืœื›ื. ื‘ืžืงื•ื ืœื›ืชื•ื‘ ืงื•ื“ ืœื‘ื“, ืืชื ืžืชืืจื™ื ืžื” ืืชื ืฆืจื™ื›ื™ื - ื•-Claude ื›ื•ืชื‘, ืžืชืงืŸ ื•ืžืฉืคืจ ืืช ื”ืงื•ื“ ืขื‘ื•ืจื›ื.

Skills ื”ื ืชื•ืกืคื™ื ืฉืžืจื—ื™ื‘ื™ื ืืช ื”ื™ื›ื•ืœื•ืช ืฉืœ Claude Code. ื›ืœ Skill ืžื›ื™ืœ ื”ื•ืจืื•ืช ืžื™ื•ื—ื“ื•ืช ืฉืžืืคืฉืจื•ืช ืœ-Claude ืœื‘ืฆืข ืžืฉื™ืžื•ืช ืกืคืฆื™ืคื™ื•ืช ื›ืžื• ืฉื™ืคื•ืจ ื‘ื™ืฆื•ืขื™ื, ื™ืฆื™ืจืช ืžืฆื’ื•ืช ืื• ืขื™ืฆื•ื‘ ืชืžื•ื ื•ืช.

๐Ÿ’ก ืœื ืฆืจื™ืš ืœื–ื›ื•ืจ ืคืงื•ื“ื•ืช - ืคืฉื•ื˜ ืชื’ื™ื“ื• ืžื” ืืชื ืจื•ืฆื™ื ื‘ืฉืคื” ื˜ื‘ืขื™ืช!
13
Skills ื–ืžื™ื ื™ื
4
ืงื˜ื’ื•ืจื™ื•ืช
100%
ืชืžื™ื›ื” ื‘ืขื‘ืจื™ืช
๐Ÿš€

ืื•ืคื˜ื™ืžื™ื–ืฆื™ื” ื•-SEO

7 skills
๐Ÿ’ฏ

Lighthouse Optimizer

lighthouse-optimizer

ืื•ืคื˜ื™ืžื™ื–ืฆื™ื” ืžืœืื” ืœื”ืฉื’ืช ืฆื™ื•ืŸ 100 ื‘-Lighthouse ืฉืœ ื’ื•ื’ืœ. ื›ื•ืœืœ ื‘ื™ืฆื•ืขื™ื, ื ื’ื™ืฉื•ืช, SEO ื•-Best Practices.

ืžื™ืœื•ืช ื”ืคืขืœื”
lighthouse page speed performance score ื‘ื“ื•ืง ื‘ื™ืฆื•ืขื™ื ืฆื™ื•ืŸ ื”ืืชืจ
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืž-Claude ืœื‘ื“ื•ืง ืืช ืฆื™ื•ืŸ ื”-Lighthouse ืฉืœ ื”ืืชืจ ืื• ืœืฉืคืจ ืืช ื”ื‘ื™ืฆื•ืขื™ื
ืชื‘ื“ื•ืง ืืช ืฆื™ื•ืŸ ื”Lighthouse ืฉืœ ื”ืืชืจ ืฉืœื™ ื•ืชืฉืคืจ ืœ-100
ื”ื•ืจื“ื”
๐Ÿ“Š

Core Web Vitals

core-web-vitals

ืฉื™ืคื•ืจ 3 ื”ืžื“ื“ื™ื ื”ืงืจื™ื˜ื™ื™ื ืฉืœ ื’ื•ื’ืœ: LCP (ื˜ืขื™ื ื”), INP (ืชื’ื•ื‘ืชื™ื•ืช) ื•-CLS (ื™ืฆื™ื‘ื•ืช). ืžืฉืคื™ืข ื™ืฉื™ืจื•ืช ืขืœ ื“ื™ืจื•ื’ SEO.

ืžื™ืœื•ืช ื”ืคืขืœื”
web vitals LCP CLS INP ืžื“ื“ื™ ื’ื•ื’ืœ
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืชื™ืงื•ืŸ ืฉืœ ื‘ืขื™ื•ืช Web Vitals ืื• ืฉื™ืคื•ืจ ืžื”ื™ืจื•ืช ื”ื˜ืขื™ื ื”
ื™ืฉ ืœื™ ื‘ืขื™ื” ื‘-CLS, ื”ืืชืจ ืงื•ืคืฅ ื‘ื˜ืขื™ื ื” - ืชืชืงืŸ
ื”ื•ืจื“ื”
๐Ÿ”

ื‘ื“ื™ืงืช ื‘ื™ืฆื•ืขื™ื

website-performance-audit

ื ื™ืชื•ื— ืžืขืžื™ืง ืฉืœ ืžื”ื™ืจื•ืช ื”ืืชืจ, ื–ื™ื”ื•ื™ ืฆื•ื•ืืจื™ ื‘ืงื‘ื•ืง ื•ื”ืžืœืฆื•ืช ืžื•ืชืืžื•ืช ืœืฉื™ืคื•ืจ.

ืžื™ืœื•ืช ื”ืคืขืœื”
performance audit slow website ื”ืืชืจ ืื™ื˜ื™ ื‘ื“ื™ืงืช ืžื”ื™ืจื•ืช
ืื™ืš ืœื”ืคืขื™ืœ
ืชืืจื• ื‘ืขื™ื” ื‘ืžื”ื™ืจื•ืช ื”ืืชืจ ืื• ื‘ืงืฉื• ื‘ื“ื™ืงื” ื›ืœืœื™ืช
ื”ืืชืจ ืฉืœื™ ื ื˜ืขืŸ ืœืื˜, ืชืขืฉื” ื‘ื“ื™ืงื” ื•ืชืžืฆื ืืช ื”ื‘ืขื™ื•ืช
ื”ื•ืจื“ื”
๐ŸŽจ

ืื•ืคื˜ื™ืžื™ื–ืฆื™ื™ืช CSS

css-optimization

ื”ืงื˜ื ืช ืงื‘ืฆื™ CSS, ื”ืกืจืช ืงื•ื“ ืžื™ื•ืชืจ, Critical CSS ื•ืืจื’ื•ืŸ ื ื›ื•ืŸ ืฉืœ ืกื’ื ื•ื ื•ืช.

ืžื™ืœื•ืช ื”ืคืขืœื”
CSS optimization unused CSS minify CSS ื™ื™ืขื•ืœ CSS
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ื™ืขืœ ืืช ื”-CSS ืื• ืœื”ืกื™ืจ ืงื•ื“ ืžื™ื•ืชืจ
ื™ืฉ ืœื™ ื”ืจื‘ื” CSS ืฉืœื ื‘ืฉื™ืžื•ืฉ, ืชื ืงื” ื•ืชื™ื™ืขืœ
ื”ื•ืจื“ื”
๐Ÿ–ผ๏ธ

ืื•ืคื˜ื™ืžื™ื–ืฆื™ื™ืช ืชืžื•ื ื•ืช

image-optimization

ื”ืžืจื” ืœืคื•ืจืžื˜ื™ื ืžื•ื“ืจื ื™ื™ื (WebP, AVIF), ื“ื—ื™ืกื” ื—ื›ืžื”, responsive images ื•-lazy loading.

ืžื™ืœื•ืช ื”ืคืขืœื”
image optimization WebP compress images ืชืžื•ื ื•ืช ื›ื‘ื“ื•ืช
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ื™ืขืœ ืชืžื•ื ื•ืช ืื• ืœื”ืžื™ืจ ืœืคื•ืจืžื˜ ืžื•ื“ืจื ื™
ื”ืชืžื•ื ื•ืช ื‘ืืชืจ ื›ื‘ื“ื•ืช ืžื“ื™, ืชืžื™ืจ ืœ-WebP ื•ืชื•ืกื™ืฃ lazy loading
ื”ื•ืจื“ื”
๐Ÿ“ฑ

ืขื™ืฆื•ื‘ ืจืกืคื•ื ืกื™ื‘ื™

responsive-design-patterns

Mobile-first, breakpoints ื—ื›ืžื™ื, fluid typography ื•ื”ืชืืžื” ืžื•ืฉืœืžืช ืœื›ืœ ื’ื•ื“ืœ ืžืกืš.

ืžื™ืœื•ืช ื”ืคืขืœื”
responsive mobile friendly ื”ืชืืžื” ืœืžื•ื‘ื™ื™ืœ ืจืกืคื•ื ืกื™ื‘ื™
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœืชืงืŸ ืชืฆื•ื’ื” ื‘ืžื•ื‘ื™ื™ืœ ืื• ืœื”ืคื•ืš ืืช ื”ืืชืจ ืœืจืกืคื•ื ืกื™ื‘ื™
ื”ืืชืจ ืœื ื ืจืื” ื˜ื•ื‘ ื‘ื˜ืœืคื•ืŸ, ืชืชืงืŸ ืืช ื”ืจืกืคื•ื ืกื™ื‘ื™ื•ืช
ื”ื•ืจื“ื”
โ™ฟ

ื•ื•ื™ื“ื’'ื˜ ื ื’ื™ืฉื•ืช

accessibility-widget

ืชื•ืกืฃ ื ื’ื™ืฉื•ืช ืžืœื ื‘ืขื‘ืจื™ืช - ื ื™ื’ื•ื“ื™ื•ืช, ื’ื•ื“ืœ ื˜ืงืกื˜, ืกืจื’ืœ ืงืจื™ืื” ื•ืขื•ื“.

ืžื™ืœื•ืช ื”ืคืขืœื”
accessibility a11y ื ื’ื™ืฉื•ืช ืชื•ืกืฃ ื ื’ื™ืฉื•ืช
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื”ื•ืกื™ืฃ ื ื’ื™ืฉื•ืช ืœืืชืจ ืื• ื•ื•ื™ื“ื’'ื˜ ื ื’ื™ืฉื•ืช
ืชื•ืกื™ืฃ ื ื’ื™ืฉื•ืช ืœืืชืจ ืฉืœื™ ื‘ืขื‘ืจื™ืช
ื”ื•ืจื“ื”
๐ŸŽฌ

ืžืฆื’ื•ืช ื•ืชื•ื›ืŸ

2 skills
๐Ÿ“‘

HTML ืœ-PowerPoint

html-to-pptx

ื”ืžืจืช HTML ืœืžืฆื’ืช PowerPoint ืขื ืชืžื™ื›ื” ืžืœืื” ื‘ืขื‘ืจื™ืช ื•-RTL. ืžื•ืฉืœื ืœื”ืคืงืช ืžืฆื’ื•ืช ืื•ื˜ื•ืžื˜ื™ื•ืช.

ืžื™ืœื•ืช ื”ืคืขืœื”
HTML to PowerPoint create PPTX generate slides ืฆื•ืจ ืžืฆื’ืช ื”ืžืจ ืœืคืื•ื•ืจืคื•ื™ื ื˜
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื”ืžื™ืจ HTML ืœืžืฆื’ืช ืื• ืœื™ืฆื•ืจ ืงื•ื‘ืฅ PPTX
ืชืžื™ืจ ืืช ื”ื“ืฃ ื”ื–ื” ืœืžืฆื’ืช PowerPoint ื‘ืขื‘ืจื™ืช
ื”ื•ืจื“ื”
๐Ÿ—๏ธ

ืื“ืจื™ื›ืœ ืžืฆื’ื•ืช

presentation-architect

ื”ืคื™ื›ืช ืจืขื™ื•ื ื•ืช ืœืชืกืจื™ื˜ื™ ืžืฆื’ื•ืช ืžืคื•ืจื˜ื™ื - ืฉืงื•ืคื™ืช ืื—ืจ ืฉืงื•ืคื™ืช ืขื ื›ืœ ื”ืคืจื˜ื™ื ืœืขื™ืฆื•ื‘.

ืžื™ืœื•ืช ื”ืคืขืœื”
presentation blueprint slide script ืชืกืจื™ื˜ ืžืฆื’ืช ืชื›ื ืŸ ืžืฆื’ืช
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœืชื›ื ืŸ ืžืฆื’ืช ืื• ืœื™ืฆื•ืจ ืชืกืจื™ื˜ ืžืคื•ืจื˜ ืœืฉืงื•ืคื™ื•ืช
ืชื›ื ืŸ ืœื™ ืžืฆื’ืช ืฉืœ 10 ืฉืงื•ืคื™ื•ืช ืขืœ ื”ื—ื‘ืจื” ืฉืœื ื•
ื”ื•ืจื“ื”
๐Ÿค–

ื™ืฆื™ืจืช ืชืžื•ื ื•ืช AI

1 skill
๐ŸŽจ

ืžื—ื•ืœืœ ืคื•ืกื˜ืจื™ื AI

nano-banana-poster

ื™ืฆื™ืจืช ืชืžื•ื ื•ืช ื•ืคื•ืกื˜ืจื™ื ืขื Google Gemini. ืชืžื™ื›ื” ื‘ื™ื—ืกื™ ื’ื•ื‘ื”-ืจื•ื—ื‘ ืฉื•ื ื™ื ื•ืชื•ื›ืŸ ื‘ืขื‘ืจื™ืช.

ืžื™ืœื•ืช ื”ืคืขืœื”
generate image create poster AI image ืฆื•ืจ ืชืžื•ื ื” ืขื™ืฆื•ื‘ ืคื•ืกื˜ืจ
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ืฆื•ืจ ืชืžื•ื ื” ืื• ืคื•ืกื˜ืจ ืขื ืชื™ืื•ืจ ืžืคื•ืจื˜
ืฆื•ืจ ืœื™ ืคื•ืกื˜ืจ ืฉื™ื•ื•ืงื™ ืœืงืžืคื™ื™ืŸ ื”ื—ื“ืฉ ืฉืœื ื•
ื”ื•ืจื“ื”
๐Ÿ“Š

ืžืกืžื›ื™ื ื•ื ืชื•ื ื™ื

3 skills
๐Ÿ“„

ื›ืœื™ ืžืกืžื›ื™ื

document-tools

ื™ืฆื™ืจืช ืžืกืžื›ื™ื ืžืงืฆื•ืขื™ื™ื - Word, PDF, Excel ืขื ื’ืจืคื™ื ืžื—ื•ื‘ืจื™ื ืœื ืชื•ื ื™ื, ื•-PowerPoint ืขื ืชืจืฉื™ืžื™ื ืื™ื ื˜ืจืืงื˜ื™ื‘ื™ื™ื.

ืžื™ืœื•ืช ื”ืคืขืœื”
Excel PowerPoint Word PDF ืฆื•ืจ ืžืกืžืš ืฆื•ืจ ืžืฆื’ืช ื“ื•ื— ืขื ื’ืจืคื™ื
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ืฆื•ืจ ืžืกืžืš, ื“ื•ื— ืื• ืžืฆื’ืช ืขื ื’ืจืคื™ื
ืฆื•ืจ ืœื™ Excel ืขื ื’ืจืคื™ื ืžื—ื•ื‘ืจื™ื ืœื ืชื•ื ื™ื ืฉื™ืชืขื“ื›ื ื• ืื•ื˜ื•ืžื˜ื™ืช
ื”ื•ืจื“ื”
๐Ÿ“ˆ

ื•ื™ื–ื•ืืœื™ื–ืฆื™ื™ืช ื ืชื•ื ื™ื

data-visualization

ื™ืฆื™ืจืช ื’ืจืคื™ื ื•ืชืจืฉื™ืžื™ื ืื™ื ื˜ืจืืงื˜ื™ื‘ื™ื™ื ืขื D3.js - ืขื™ื’ื•ืœื™ ื”ืชืงื“ืžื•ืช, ื’ืจืคื™ ืขืžื•ื“ื•ืช, ื“ื•ื ืื˜ื™ื ื•ื“ืฉื‘ื•ืจื“ื™ื ืžืจืฉื™ืžื™ื.

ืžื™ืœื•ืช ื”ืคืขืœื”
D3.js chart graph dashboard ืฆื•ืจ ื’ืจืฃ ืชืจืฉื™ื ื“ืฉื‘ื•ืจื“
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ืฆื•ืจ ื’ืจืฃ ืื• ื•ื™ื–ื•ืืœื™ื–ืฆื™ื” ืžื ืชื•ื ื™ื
ืฆื•ืจ ืœื™ ื“ืฉื‘ื•ืจื“ ืขื ืขื™ื’ื•ืœื™ ื”ืชืงื“ืžื•ืช ืœื™ืขื“ ืžื•ืœ ื‘ื™ืฆื•ืข
ื”ื•ืจื“ื”
๐ŸŽจ

ื›ืœื™ื ื™ืฆื™ืจืชื™ื™ื

creative-tools

ื™ืฆื™ืจืช ืื™ื™ืงื•ื ื™ื, favicon ื•ืื•ืžื ื•ืช ืืœื’ื•ืจื™ืชืžื™ืช. SVG ืžื•ืชืื ืื™ืฉื™ืช, ืื ื™ืžืฆื™ื•ืช CSS ื•ืขื™ืฆื•ื‘ื™ื ื™ื™ื—ื•ื“ื™ื™ื - ืœืœื API.

ืžื™ืœื•ืช ื”ืคืขืœื”
favicon icon SVG generative art ืื™ื™ืงื•ืŸ ืื•ืžื ื•ืช ืขื™ืฆื•ื‘ ืœื•ื’ื•
ืื™ืš ืœื”ืคืขื™ืœ
ื‘ืงืฉื• ืœื™ืฆื•ืจ ืื™ื™ืงื•ืŸ, favicon ืื• ืขื™ืฆื•ื‘ ื’ืจืคื™
ืฆื•ืจ ืœื™ favicon ืžืขื•ืฆื‘ ืœืืชืจ ืฉืœื™ ื‘ืกื’ื ื•ืŸ ืžื™ื ื™ืžืœื™ืกื˜ื™
ื”ื•ืจื“ื”

๐Ÿ› ๏ธ ืื™ืš ื–ื” ืขื•ื‘ื“?

1
ืคืชื—ื• ืฉื™ื—ื” ืขื Claude
ื‘-Claude Code ืื• ื‘ืžืžืฉืง ืื—ืจ ืฉืชื•ืžืš ื‘-Skills
2
ืชืืจื• ืžื” ืืชื ืฆืจื™ื›ื™ื
ื”ืฉืชืžืฉื• ื‘ืžื™ืœื•ืช ื”ื”ืคืขืœื” ืื• ืคืฉื•ื˜ ืชืืจื• ืืช ื”ื‘ืขื™ื” ื‘ืฉืคื” ื—ื•ืคืฉื™ืช
3
Claude ื™ื–ื”ื” ืืช ื”-Skill
ืื•ื˜ื•ืžื˜ื™ืช! ื”ื•ื ื™ืคืขื™ืœ ืืช ื”ื›ืœื™ ื”ืžืชืื™ื ื•ื™ืฉืœื™ื ืืช ื”ืžืฉื™ืžื”

๐Ÿ“ฅ ื”ืชืงื ืช Skills

๐Ÿ“ ื”ืชืงื ื” ื™ื“ื ื™ืช
ื”ื•ืจื™ื“ื• ืืช ืงื•ื‘ืฅ ื”-ZIP ืฉืœ ื”-Skill ื•ื”ืขืชื™ืงื• ืืช ื”ืชื™ืงื™ื™ื” ืœื ืชื™ื‘ ื”-Skills
# Windows C:\Users\{username}\.claude\skills\ # Mac / Linux ~/.claude/skills/
๐Ÿ”— Clone ืž-GitHub
ืฉื›ืคืœื• ืืช ื›ืœ ื”-Skills ื™ืฉื™ืจื•ืช ืžื”ืžืื’ืจ
cd ~/.claude/skills git clone https://github.com/Oriazaria/azria-claude-skills.git
โฌ‡๏ธ ื”ื•ืจื“ืช ZIP
ืœื—ืฆื• ืขืœ ื›ืคืชื•ืจ "ื”ื•ืจื“ื”" ื‘ื›ืจื˜ื™ืก ื”-Skill, ื—ืœืฆื• ืืช ื”ืงื•ื‘ืฅ ื•ื”ืขืชื™ืงื• ืœืชื™ืงื™ื™ื”
# ืžื‘ื ื” ื”ืชื™ืงื™ื™ื” ื”ื ื›ื•ืŸ: ~/.claude/skills/ โ”œโ”€โ”€ lighthouse-optimizer/ โ”‚ โ””โ”€โ”€ SKILL.md โ”œโ”€โ”€ document-tools/ โ”‚ โ””โ”€โ”€ SKILL.md โ””โ”€โ”€ ...
๐Ÿ’ก ื—ืฉื•ื‘ ืœื“ืขืช
ื›ืœ Skill ื—ื™ื™ื‘ ืœื”ื›ื™ืœ ืงื•ื‘ืฅ SKILL.md ื‘ืชื™ืงื™ื™ื” ืฉืœื•.
Claude Code ืžื–ื”ื” ืื•ื˜ื•ืžื˜ื™ืช ืืช ื›ืœ ื”-Skills ื‘ืชื™ืงื™ื™ื” ื•ืžืคืขื™ืœ ืื•ืชื ืœืคื™ ืžื™ืœื•ืช ื”ืžืคืชื—.

๐Ÿ”Œ ืฉื™ืœื•ื‘ ืขื MCP (Model Context Protocol)

MCP ื”ื•ื ืคืจื•ื˜ื•ืงื•ืœ ืฉืžืืคืฉืจ ืœ-Claude ืœื”ืชื—ื‘ืจ ืœืฉื™ืจื•ืชื™ื ื—ื™ืฆื•ื ื™ื™ื ื•ืœื”ืจื—ื™ื‘ ืืช ื”ื™ื›ื•ืœื•ืช ืฉืœื•. ื‘ืฉื™ืœื•ื‘ ืขื Skills, ืชื•ื›ืœื• ืœื™ืฆื•ืจ ืื•ื˜ื•ืžืฆื™ื•ืช ืžืชืงื“ืžื•ืช ืฉืžืฉืœื‘ื•ืช ื›ืœื™ื ื—ื™ืฆื•ื ื™ื™ื.

๐ŸŒ
Fetch MCP
ื’ื™ืฉื” ืœืื™ื ื˜ืจื ื˜ - ืฉืœื™ืคืช ืชื•ื›ืŸ ืžืืชืจื™ื, API-ื™ื ื•ืžืงื•ืจื•ืช ืžื™ื“ืข ื—ื™ืฆื•ื ื™ื™ื
๐Ÿ—„๏ธ
Database MCP
ื—ื™ื‘ื•ืจ ืœืžืกื“ื™ ื ืชื•ื ื™ื - PostgreSQL, MySQL, SQLite ื•ืขื•ื“
๐Ÿ“‚
Filesystem MCP
ื’ื™ืฉื” ืžื•ืจื—ื‘ืช ืœืงื‘ืฆื™ื ื•ืชื™ืงื™ื•ืช ื‘ืžืขืจื›ืช ืฉืœื›ื
๐ŸŽญ
Playwright MCP
ืื•ื˜ื•ืžืฆื™ื” ืฉืœ ื“ืคื“ืคืŸ - ืกืงืจื™ืคื™ื ื’, ืฆื™ืœื•ืžื™ ืžืกืš ื•ื‘ื“ื™ืงื•ืช
โš™๏ธ ื”ื’ื“ืจืช MCP ื‘-Claude Code
# ืคืชื—ื• ืืช ืงื•ื‘ืฅ ื”ื”ื’ื“ืจื•ืช: ~/.claude/settings.json # ื”ื•ืกื™ืคื• ืืช ื”-MCP servers: { "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }, "fetch": { "command": "npx", "args": ["-y", "@anthropic-ai/fetch-mcp"] } } }

๐ŸŽญ ืฉื™ืœื•ื‘ Playwright ืขื Skills

Playwright MCP ืžืืคืฉืจ ืœ-Claude ืœืฉืœื•ื˜ ื‘ื“ืคื“ืคืŸ ืืžื™ืชื™. ื‘ืฉื™ืœื•ื‘ ืขื ื”-Skills ืฉืœื ื•, ืชื•ื›ืœื• ืœื‘ืฆืข ืื•ื˜ื•ืžืฆื™ื•ืช ืžืชืงื“ืžื•ืช ื›ืžื• ื‘ื“ื™ืงื•ืช Lighthouse ืืžื™ืชื™ื•ืช, ืกืงืจื™ืคื™ื ื’ ื—ื›ื ื•ื™ืฆื™ืจืช ืฆื™ืœื•ืžื™ ืžืกืš.

๐Ÿ” ื‘ื“ื™ืงืช Lighthouse ืืžื™ืชื™ืช
Playwright ืคื•ืชื— ืืช ื”ืืชืจ ื•ืžืจื™ืฅ ื‘ื“ื™ืงืช Lighthouse ืžืœืื”
๐Ÿ“ธ ืฆื™ืœื•ืžื™ ืžืกืš ืื•ื˜ื•ืžื˜ื™ื™ื
ืฆื™ืœื•ื ืžืกืš ืฉืœ ื”ืืชืจ ื‘ืžื›ืฉื™ืจื™ื ืฉื•ื ื™ื
๐Ÿ•ท๏ธ ืกืงืจื™ืคื™ื ื’ ื—ื›ื
ืฉืœื™ืคืช ื ืชื•ื ื™ื ืžืืชืจื™ื ื“ื™ื ืžื™ื™ื ืขื JavaScript
๐Ÿงช ื‘ื“ื™ืงื•ืช E2E
ื‘ื“ื™ืงื•ืช ืื•ื˜ื•ืžื˜ื™ื•ืช ืฉืœ ืชื”ืœื™ื›ื™ ืžืฉืชืžืฉ
๐Ÿš€ ื“ื•ื’ืžืช ืฉื™ืžื•ืฉ: Lighthouse + Playwright
# 1. ื”ื•ืกื™ืคื• ืœ-settings.json { "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } } # 2. ื”ืคืขื™ืœื• ืžื—ื“ืฉ ืืช Claude Code # 3. ื›ืขืช ืชื•ื›ืœื• ืœื‘ืงืฉ: "ืชืจื™ืฅ ื‘ื“ื™ืงืช Lighthouse ืขืœ ื”ืืชืจ ืฉืœื™ ื•ืฆืœื ืžืกืš"
ืชื•ืฆืื”: Claude ื™ืฉืชืžืฉ ื‘-Playwright ืœืคืชื•ื— ืืช ื”ืืชืจ, ื™ืจื™ืฅ ืืช ื”-Lighthouse Skill ืœื ื™ืชื•ื—, ื•ื™ื—ื–ื™ืจ ื“ื•ื— ืžืคื•ืจื˜ + ืฆื™ืœื•ื ืžืกืš - ื”ื›ืœ ืื•ื˜ื•ืžื˜ื™!