By name: add-external-skills description: Adds curated external skills from GitHub into Cursor via AI DevKit. Use when the user wants to install frontend-design, tailwindcss-advanced-layouts, next-best-practices, marketing-psychology, or seo-content-brief in Cursor.
Add External Skills (Cursor)
Install curated skills into Cursor using AI DevKit. Skills are symlinked into .cursor/skills/. Requires Node.js and network.
One-time setup
Run once in the project root (may be interactive):
npx ai-devkit init -e cursor
Answer the prompts (or select phases). This creates .ai-devkit.json and prepares .cursor/skills/.
Install skills
AI DevKit only installs repos that are in its registry. These work:
Frontend design (Anthropic):
npx ai-devkit skill add anthropics/skills frontend-design
Next.js best practices (Vercel):
npx ai-devkit skill add vercel-labs/next-skills next-best-practices
Marketing psychology:
npx ai-devkit skill add coreyhaines31/marketingskills marketing-psychology
Not in AI DevKit registry (Registry not found — use manual install if needed):
- tailwindcss-advanced-layouts —
josiahsiegel/claude-plugin-marketplace - seo-content-brief —
inference-sh-4/skills
For those two: clone the repo and copy the skill folder (e.g. the folder containing SKILL.md) into .cursor/skills/<skill-name>/.
When to suggest which skill
| User need | Skill to add |
|---|---|
| UI/UX, design systems, frontend patterns | frontend-design |
| Tailwind layouts, responsive, components | tailwindcss-advanced-layouts |
| Next.js app/router, performance, patterns | next-best-practices |
| Copy, persuasion, marketing angles | marketing-psychology |
| SEO briefs, content outlines, search intent | seo-content-brief |
Workflow
- If
.ai-devkit.jsonis missing, runnpx ai-devkit init -e cursor(user may need to complete prompts in terminal). - Run the matching
npx ai-devkit skill add <repo> <skill-name>for each requested skill. - If a command fails, suggest the user run it in their terminal with Node.js and network available.
How to use installed skills in Cursor
- ไม่ต้องพิมพ์ @ หรือชื่อสกิล — เปิด Agent (Cmd+I / Ctrl+I) แล้วพิมพ์คำขอเป็นประโยคปกติ
- Agent เลือกสกิลเอง — ถ้าคำขอตรงกับ
descriptionใน SKILL.md ของสกิลใด Cursor จะโหลดสกิลนั้นให้อัตโนมัติ (Dynamic Context Discovery) - ดูสกิลที่มี: Settings (Cmd+Shift+J) → Rules → ส่วน Agent Decides
ตัวอย่างคำขอให้ตรงสกิล:
- frontend-design: "ออกแบบ landing page ให้สวย ไม่ generic" / "สร้าง React component หน้า dashboard โทน minimal"
- next-best-practices: "ทำ loading state ใน Next.js ยังไง" / "ใช้ Server Components กับ client ยังไง"
- marketing-psychology: "อธิบาย mental model เรื่อง persuasion" / "ทำไมคนถึงซื้อ จิตวิทยาการตลาด"
How to verify a skill was used
- ดูจากคำตอบ: สกิลมีแนวทางชัดเจนใน SKILL.md ถ้า Agent ใช้ สกิล คำตอบจะสอดคล้องกับแนวทางนั้น (เช่น frontend-design จะหลีกเลี่ยง Inter/purple gradient, มี aesthetic direction; marketing-psychology จะอ้างอิง First Principles, Jobs to Be Done ฯลฯ)
- ลองถามซ้ำแบบเจาะจง: เช่น "ใช้แนวทางจาก frontend-design skill ทำหน้านี้" แล้วเปรียบเทียบผลลัพธ์กับเนื้อใน
.cursor/skills/frontend-design/SKILL.md
Notes
- Cursor: use
npx ai-devkit skill add <owner/repo> <skill-name>. Only repos in AI DevKit's registry work; others show "Registry not found". - Codex:
npx skills add <github-url> --skill <name>installs to$CODEX_HOME/skills.