Skills การพัฒนา

Framework (OSS). สร้างหน้าจอ Expo ที่สวยงามและให้ความรู้สึกเป็นเนทีฟ ครอบคลุมการจัดสไตล์ตาม Apple HIG, สีเชิงความหมาย, ตัวควบคุมเนทีฟ, SF Symbols, สื่อ, แอนิเมชัน, เอฟเฟกต์ภาพ, การไล่สี, การจัดเก็บข้อมูล และเลย์เอาต์ที่ตอบสนอง สำหรับการกำหนดเส้นทางและการนำทาง ให้ใช้สกิล expo-router

เฟรมเวิร์ก (โอเพนซอร์ส) การนำทางและการกำหนดเส้นทางสำหรับ Expo Router ครอบคลุมเส้นทางแบบไฟล์ กลุ่มและเส้นทางไดนามิก การจัดระเบียบโฟลเดอร์ ลิงก์พร้อมตัวอย่างและเมนูบริบท สแต็กเนทีฟ ชื่อหน้า โมดอลและฟอร์มชีต NativeTabs ส่วนหัวและแถบเครื่องมือ และแถบค้นหาส่วนหัว

Framework (OSS). สร้าง UI ดั้งเดิมด้วยแพ็คเกจ @expo/ui: SwiftUI จริงบน iOS และ Jetpack Compose บน Android ที่เรนเดอร์จาก React ในแอป Expo หรือ React Native ครอบคลุมคอมโพเนนต์ข้ามแพลตฟอร์มสากล (Host, Column, Row, Button, Text, List และอื่นๆ ที่นำเข้าจาก @expo/ui), การแทนที่แบบดรอปอินสำหรับไลบรารีชุมชน React Native ยอดนิยม (BottomSheet, DateTimePicker, Slider, Menu ฯลฯ) และ SwiftUI เฉพาะแพลตฟอร์ม (@expo/ui/swift-ui, iOS เท่านั้น) และ Jetpack Compose...

เฟรมเวิร์ก (โอเพนซอร์ส) แนวทางการอัปเกรดเวอร์ชัน Expo SDK และแก้ไขปัญหาการพึ่งพา

ระบบการอนุญาตที่มีการควบคุมการเข้าถึงตามบทบาท จำเป็นสำหรับทุกแอปที่จัดการข้อมูลส่วนบุคคลหรือข้อมูลที่จำกัดการเข้าถึง

โครงสร้างพื้นฐานหลักที่ให้การกำหนดค่าการเชื่อมต่อแบ็กเอนด์ ไคลเอนต์พื้นที่จัดเก็บ และจุดเริ่มต้นแอปพลิเคชัน React

Admin-only paginated viewer for stable canister state. Use whenever the user asks for a viewer, dashboard, debug panel, or admin browse over backend data — users, items, orders, logs, or any stable Map/Set/Array/VarArray/List/Stack/Queue. Pre-installed in every Caffeine app via the `caffeineai-data-viewer` mops package; this skill explains what it does and how to keep using it correctly.

HTTP outcalls ที่ดำเนินการโดย backend canister (ไม่ใช่ใน frontend)

การจัดเก็บไฟล์/ออบเจกต์ทั่วไป เช่น สำหรับรูปภาพ วิดีโอ ไฟล์ เอกสาร และข้อมูลปริมาณมากอื่นๆ เหมาะอย่างยิ่งสำหรับแกลเลอรีรูปภาพ แกลเลอรีวิดีโอ และการจัดการไฟล์หรือออบเจกต์อื่นๆ รองรับไฟล์ขนาดใหญ่เกินขีดจำกัดของ IC พร้อมการเข้าถึง URL HTTP ที่แคชโดยเบราว์เซอร์

MANDATORY recipe for every Caffeine build that calls OpenAI (ChatGPT, GPT-4o, an LLM, a chatbot, embeddings). The ONLY supported path is the `openai-client` mops package with a canister-side API-key bearer. Hand-rolling `ic.http_request` to `api.openai.com/v1/...` is a FORBIDDEN anti-pattern — it leaks the bearer across replicated outcalls (security + 13× billing impact), bypasses the typed request/response bindings, and forces hand-rolled JSON on a language with poor JSON support. Load this...

Make a canister's data queryable by the Caffeine Data Intelligence agent. Use whenever an app stores structured data (Maps/Lists/arrays of records) that should be answerable in natural language — "top customers", "revenue by region", "active projects". Adds a discoverable `schema()` and a JSON `execute()` query endpoint via the `caffeineai-oql` mops package's `Expose` mixin.

MANDATORY recipe for every Caffeine build that posts to X (Twitter). The ONLY supported path is the `x-client` mops package with OAuth 2.0 PKCE. Hand-rolling `ic.http_request` or `icBooking.http_request` calls to `api.x.com/2/tweets`, `api.x.com/2/oauth2/token`, or any other X endpoint is a FORBIDDEN anti-pattern — it bypasses bearer auth, replication-cost safeguards, and `x-client`'s null-field handling. Load this skill whenever the user, spec, or any prior task mentions tweeting,...

Quick reference for the Caffeine Data Intelligence agent to query an OQL-exposing canister (schema() + execute()) through the `icp` CLI against the project's `backend` canister: read the schema, form JSON queries (filter / order / paginate / aggregate / dotted-path edges), and parse the Candid result rows.

สร้าง FastAPI routers พร้อม CRUD operations, authentication dependencies และ response models ที่เหมาะสม ใช้เมื่อสร้าง REST API endpoints, สร้าง routes ใหม่, ใช้งาน CRUD operations หรือเพิ่ม endpoints ที่ต้องมีการยืนยันตัวตนในแอปพลิเคชัน FastAPI

แนะนำการพัฒนาเซิร์ฟเวอร์แบ็กเอนด์ Fastify Node.js และ REST API โดยใช้ TypeScript หรือ JavaScript ใช้เมื่อสร้าง กำหนดค่า หรือดีบักแอปพลิเคชัน Fastify รวมถึงการกำหนดเส้นทาง การใช้งานปลั๊กอิน การตั้งค่าการตรวจสอบ JSON Schema การจัดการข้อผิดพลาด การเพิ่มประสิทธิภาพ การจัดการการยืนยันตัวตน การกำหนดค่า CORS และส่วนหัวความปลอดภัย การเชื่อมต่อฐานข้อมูล การทำงานกับ WebSockets และการปรับใช้สู่ระบบผลิต ครอบคลุมวงจรการร้องขอ Fastify ทั้งหมด (hooks,...

ทักษะ Feature-Sliced Design (FSD) v2.1 อย่างเป็นทางการสำหรับการนำวิธีการไปใช้กับโปรเจกต์ฟร้อนท์เอนด์ ใช้เมื่องานเกี่ยวข้องกับการจัดโครงสร้างโปรเจกต์ด้วยเลเยอร์ FSD การตัดสินใจว่าโค้ดควรอยู่ที่ไหน การวางทรัพยากรแบบคงที่ (รูปภาพ ไอคอน ฟอนต์ PDF) การจัดกลุ่มสไลซ์ที่เกี่ยวข้องกันอย่างใกล้ชิด การกำหนด API สาธารณะและขอบเขตการนำเข้า การแก้ไขการนำเข้าข้ามหรือประเมินรูปแบบ @x การตัดสินใจว่าจะสร้างหรือลบเอนทิตี การประเมินว่าเลเยอร์เอนทิตีจำเป็นหรือไม่ การตัดสินใจ...

ช่วยให้ Claude Code สามารถดำเนินการฟัซซิ่งเว็บอย่างชาญฉลาดโดยใช้ ffuf ทำให้ค้นหาไดเรกทอรี ไฟล์ ซับโดเมน และจุดสิ้นสุด API ที่ซ่อนอยู่ได้ง่ายขึ้น

ค้นหาโค้ดเบสหรือ UI เพื่อหาจุดที่ควรมีแอนิเมชันแต่ไม่มี และปฏิเสธทุกอย่างที่ไม่ควรมี อ่านอย่างเดียวเท่านั้น เสนอการเคลื่อนไหวพร้อมค่าที่แม่นยำ แต่ไม่ได้ลงมือปรับใช้ ใช้เมื่อผู้ใช้ถามว่า "ตรงไหนที่ควรทำแอนิเมชันได้บ้าง?" หรือต้องการ "ทำให้ดูมีชีวิตชีวามากขึ้น" สำหรับการแก้แอนิเมชันที่มีอยู่ ให้ใช้ improve-animations หรือ review-animations แทน

ค้นหา ตรวจสอบ และติดตั้งสกิลเอเจนต์โดยการค้นหาทั่วทุกทะเบียนหลักพร้อมกัน — skills.sh, clawhub.ai และ GitHub — นำเสนอบอร์ดแต่ละอันด้วยเมตริกดั้งเดิมของตัวเอง (จำนวนติดตั้ง / ดาว) พร้อมรายการสูงสุดต่อบอร์ด สแกนความปลอดภัยของ SKILL.md จริงของผู้สมัครอันดับต้นๆ เพื่อหารูปแบบที่เสี่ยง และแจ้งเตือนสิ่งที่ติดตั้งไปแล้ว ใช้เมื่อผู้ใช้ถามว่า "ฉันจะทำ X ได้อย่างไร" "หาสกิลสำหรับ X" "มีสกิลที่..." "ควรติดตั้งสกิลอะไรสำหรับ..." หรือต้องการขยายเอเจนต์ด้วย...

ใช้เมื่อการดำเนินการเสร็จสมบูรณ์ การทดสอบทั้งหมดผ่าน และคุณต้องตัดสินใจว่าจะรวมงานอย่างไร - แนะนำการทำงานพัฒนาให้เสร็จสมบูรณ์โดยนำเสนอตัวเลือกที่มีโครงสร้างสำหรับการรวมโค้ด การส่ง Pull Request หรือการทำความสะอาด

คู่มือที่ครอบคลุมสำหรับ Firebase Remote Config รวมถึงการจัดการเทมเพลตและการใช้งาน SDK ใช้ทักษะนี้เมื่อผู้ใช้ต้องการความช่วยเหลือในการตั้งค่า Remote Config จัดการฟีเจอร์แฟล็ก หรืออัปเดตพฤติกรรมของแอปแบบไดนามิก

แก้ไขข้อผิดพลาดในการคอมไพล์ ปัญหาการตรวจสอบโค้ด และความล้มเหลวในการทดสอบในโค้ดเบส Rust ของ warp ครอบคลุมการตรวจสอบก่อนส่งโค้ด ข้อผิดพลาดเฉพาะ WASM และการรันการทดสอบเฉพาะ ใช้เมื่อผู้ใช้พบข้อผิดพลาดในการ build ความล้มเหลวของ clippy หรือ fmt ความล้มเหลวในการทดสอบ หรือจำเป็นต้องรันหรือตีความการตรวจสอบก่อนส่งโค้ดก่อนทำ PR

เมื่อผู้ใช้ต้องการวางแผน ประเมิน หรือสร้างเครื่องมือฟรีเพื่อการตลาด — การสร้างลีด คุณค่า SEO หรือการรับรู้แบรนด์ รวมถึงเมื่อผู้ใช้พูดถึง "วิศวกรรมคือการตลาด" "เครื่องมือฟรี" "เครื่องมือการตลาด" "เครื่องคิดเลข" "ตัวสร้าง" "เครื่องมือแบบโต้ตอบ" "เครื่องมือสร้างลีด" "สร้างเครื่องมือเพื่อลีด" "ทรัพยากรฟรี" "เครื่องคำนวณ ROI" "เครื่องมือให้คะแนน" "เครื่องมือตรวจสอบ" "ฉันควรสร้างเครื่องมือฟรีหรือไม่" หรือ "เครื่องมือสำหรับสร้างลีด" ใช้สิ่งนี้เมื่อใดก็ตามที่มีคนต้องการสร้างสิ่งที่มีประโยชน์และ...

สร้างส่วนติดต่อผู้ใช้ส่วนหน้าที่โดดเด่นและมีคุณภาพระดับการผลิต ซึ่งหลีกเลี่ยงความสวยงามแบบ AI ทั่วไป

สร้าง UI และแอปพลิเคชันดีไซน์ที่โดดเด่น ไม่ซ้ำใคร โดยทำงานแบบเน้นกลยุทธ์ก่อน ระบุโปรเจกต์ (แลนดิ้งเพจ, แอป SaaS, แดชบอร์ด, อีคอมเมิร์ซ, พรีเซนเทชัน, เอกสาร, พอร์ตโฟลิโอ...) รวมถึงตำแหน่งและบุคลิกภาพของโปรเจกต์ ยึดมั่นในคำคุณศัพท์ของแบรนด์ แปลงเป็นระบบตัวอักษรและสี จากนั้นใช้เลเยอร์งานฝีมือ (เลย์เอาต์ คอมโพเนนต์และสถานะ การเคลื่อนไหว ไอคอน ภาพ โหมดมืดและการธีม การเข้าถึง) หลีกเลี่ยงรูปแบบเริ่มต้นแบบ AI-slop หรือสไตล์คล็อด นี่เป็นทั้ง...

ตรวจสอบและสร้างอินเทอร์เฟซ frontend ที่โดดเด่นและมีคุณภาพระดับโปรดักชัน พร้อมความสวยงามด้านการออกแบบสูงและสอดคล้องกับ design system ประเมินโดยใช้สามเสาหลัก: การเปลี่ยนข้อมูลเชิงลึกไปสู่การกระทำที่ราบรื่น งานฝีมือที่มีคุณภาพ และการสร้างความน่าเชื่อถือ ใช้สำหรับ: การตรวจสอบ PR, การตรวจสอบการออกแบบ, การตรวจสอบการเข้าถึง, การตรวจสอบความสอดคล้องกับ design system, การออกแบบ frontend เชิงสร้างสรรค์, การตรวจสอบโค้ด UI, การตรวจสอบคอมโพเนนต์, การตรวจสอบการตอบสนอง, การทดสอบธีม และการสร้าง UI ที่น่าจดจำ ห้ามใช้สำหรับ: การตรวจสอบ API ฝั่ง backend, การตรวจสอบ schema ฐานข้อมูล, งานโครงสร้างพื้นฐานหรือ DevOps, ตรรกะธุรกิจล้วนๆ ที่ไม่มี UI หรือโค้ดที่ไม่ใช่ frontend

สร้างแอปพลิเคชัน React ในธีมมืดโดยใช้ Tailwind CSS พร้อมการปรับแต่งธีม เอฟเฟกต์แก้ว และแอนิเมชัน Framer Motion ใช้เมื่อสร้างแดชบอร์ด แผงผู้ดูแลระบบ หรืออินเทอร์เฟซที่เต็มไปด้วยข้อมูลพร้อมความสวยงามแบบมืดที่ประณีต

สร้าง UI ที่มีคุณภาพระดับโปรดักชัน เข้าถึงได้ และตอบสนองต่อผู้ใช้ ใช้เมื่อสร้างหรือปรับเปลี่ยนอินเทอร์เฟซและหน้าเว็บ สร้างคอมโพเนนต์ จัดวางเลย์เอาต์ ตรงตามข้อกำหนดการเข้าถึง WCAG จัดการสถานะ หรือเมื่อผลลัพธ์ต้องดูและให้ความรู้สึกเหมือนของจริงมากกว่าที่สร้างโดย AI

แทนที่พฤติกรรมการตัดทอนเริ่มต้นของ LLM บังคับให้สร้างโค้ดที่สมบูรณ์ ห้ามรูปแบบตัวยึดตำแหน่ง และจัดการการแบ่งตามขีดจำกัดโทเค็นอย่างสะอาด ใช้กับงานใดๆ ที่ต้องการผลลัพธ์ที่ละเอียดถี่ถ้วนและไม่ถูกตัดทอน

ตั้งค่า Claude Code hooks เพื่อบล็อกคำสั่ง git ที่อันตราย (push, reset --hard, clean, branch -D ฯลฯ) ก่อนที่จะทำงาน ใช้เมื่อผู้ใช้ต้องการป้องกันการดำเนินการ git ที่ทำลายล้าง เพิ่ม hooks ความปลอดภัยของ git หรือบล็อก git push/reset ใน Claude Code