這個技能和其他 2,500+ 個，都在你的聊天裡
$9/月 隨時可取消，或每年 $59
- 全部 2,500+ 個技能、提示詞包和代理，一開口就載入
- 不用下載也不用貼上：在 Claude、ChatGPT、Claude Code 或 Cursor 連接一次即可
- 每週新增技能，每月可下載 10 個目錄檔案
Yuna - 前端工程師 AI Skill
$19
跳至產品資訊
Yuna - 前端工程師 AI Skill
建構前端：React 和 TypeScript、效能、無障礙功能、響應式 CSS 與測試。
$19
這個技能
一次付清
永久擁有
適用於 Claude 的技能套件 立即下載yuna-前端工程師技能
Library 方案
取得這個技能，以及其他 2,500+ 個
$9/月 或每年 $59
取得 Library · $9/月取得 Library- 透過一個連接器，在 Claude、ChatGPT、Claude Code、Codex 和 Cursor 中使用
- 所有技能、提示詞包和代理，試用期間還有 AI CRM 和工具
- 隨時可取消
只需要這個技能嗎？
一個檔案，一次付清。不含更新，不含連接器。
價格約等於 2 個月的 Library。
$19
Pay once, keep foreverInstant download30-day money-back guarantee
由 Stripe 提供安全結帳
各商標均屬其各自所有者。KissMySkills 與其無關聯，亦未獲其背書。
運作方式
Ask Yuna something hard.
React 套件大小為 2.8MB，在 4G 上的 LCP 為 6.1 秒。PM 想要功能，而不是效能衝刺。最快能帶來明顯改善的是什麼？
CLAUDE · AS YUNA, 前端工程師
2.8MB 不需要一個 sprint，而是需要一個下午來進行依路由的程式碼分割 - 對 5 個最龐大的路由使用 React.lazy，通常可將初始 JavaScript 大小降低 60%。先執行套件分析：幾乎總會發現包含所有地區設定的 moment.js、完整匯入的 lodash，以及為了一個管理畫面而載入到每個頁面的圖表函式庫。透過分割程式碼並預先載入主要視覺素材，LCP 通常可降至 3 秒以內。向 PM 推銷時，將其說成一個下午的工作，並附上前後對比的實際使用者資料，而不是一個 sprint。貼上分析器列出的前 20 個模組，我會標記可以刪減的部分。
或者，把所有技能都放進你的 AI。
購買前有疑問嗎？由真人回覆，通常當天就會回覆： hello@kissmyskills.com
// 檔案本身
購買前先讀讀看。
你的 AI 會讀到的檔案開頭，與交付內容完全相同，沒有為頁面改寫任何文字。
用名字稱呼它
載入檔案後，直接用名字和它對話：「Serge，看一下這個頁面。」名字就是為此而設的，也能讓同一個對話裡的多個技能各司其職。
載入檔案後，直接用名字和它對話：「Serge，看一下這個頁面。」名字就是為此而設的，也能讓同一個對話裡的多個技能各司其職。
// 驅動你的 AI 的 skill
你是 Yuna，一位資深前端工程師，會優先使用語意化 HTML 而不是 ARIA，從資料結構向下為 props 定義型別，並測量 LCP、INP 和 CLS。你已被啟用來交付一個可透過鍵盤操作的 UI。
// 內容
這個技能包含什麼
- React（Hooks、狀態、組合）與 TypeScript
- 效能：套件大小、程式碼分割、Core Web Vitals
- 無障礙功能：語意化 HTML、ARIA、鍵盤操作、WCAG
- 響應式 CSS、狀態管理與 React Testing Library
想要快速、易於存取的元件、簡潔且經過測試的 TypeScript 程式碼的前端工程師。
// 兩種取得方式
直接在 AI 裡使用，或一次下載。
只買這個技能，以檔案形式
$19 一次付清
- 結帳後下載，貼到任何 AI 聊天中
- 單一檔案，不含更新，不需連接器
- 30 天退款保證
已經訂閱 Library 或 Both？這個已包含在內，不必另外購買檔案。
// 交給你的助理
或者，讓你的 AI 幫你設定這個技能。
前往 kissmyskills.com/pages/connector，幫我設定「Yuna - 前端工程師 AI Skill」技能（handle：yuna-frontend-engineer）
貼到 Claude、ChatGPT、Claude Code、Cursor 或 Codex。你的 AI 會引導你連接 KissMySkills（約 3 分鐘，7 天免費試用），並載入這個技能。 你的 AI 會讀到什麼 →
你實際買到的是什麼
將 Yuna 加入 Claude，即可獲得一位資深前端工程師，使用簡潔的 TypeScript 和實際測試，快速建立具備無障礙功能的 React 元件。
Yuna 建立前端：React（hooks、狀態、組合）、TypeScript、效能（套件大小、程式碼分割、記憶化、Core Web Vitals）、無障礙（語意化 HTML、ARIA、鍵盤操作、WCAG）、響應式 CSS、狀態管理、表單和測試（React Testing Library）。始終在分支上開發，進行測試（單元測試和無障礙測試）、審查，並在合併前於預覽版本中驗證。
您將獲得
- →React（hooks、狀態、組合）和 TypeScript
- →效能：套件大小、程式碼分割、Core Web Vitals
- →無障礙：語意化 HTML、ARIA、鍵盤操作、WCAG
- →響應式 CSS、狀態管理和 React Testing Library
📄 yuna-frontend-engineer.skill
安裝不到 2 分鐘
適用於 Claude、ChatGPT 及任何 AI 聊天工具
如何安裝
下載 .skill 套件 → 開啟 Claude → 將 SKILL.md 貼到您的專案指示或 system prompt → 描述您的需求 → Yuna 建立答案。包含完整的實作範例，讓您確切了解會得到什麼。
// 安裝方式
不到 2 分鐘
四個步驟。任何 AI 聊天。
- 01下載檔案
結帳後，下載連結會寄到你的信箱。請儲存 .skill 檔案：Claude 可以直接使用。
- 02開啟你的 AI 聊天功能
任何你已在使用的 AI 聊天：Claude、ChatGPT、Gemini、Grok、Copilot 或其他。
- 03加入你的 AI
Claude：在 Settings → Capabilities → Skills 上傳 .skill 檔案。ChatGPT、Gemini 等：將 .skill 檔案當作 .zip 壓縮檔開啟，再將 SKILL.md 貼到自訂指令或專案指令中。
- 04開始工作
您的 AI 現已設定為專業助手。您可以詢問它任何與其專業領域相關的問題。
不需要技術知識。不需訂閱。一次付費，永久使用。.
使用 Library，無需下載任何檔案。 只要連接一次 AI，之後直接說：「從 KissMySkills 載入 Yuna。」
// faq
關於此產品的問題
Yuna skill 能做什麼？+
建置前端：React 和 TypeScript、效能、無障礙、響應式 CSS 與測試。將它載入 Claude Projects 一次，你就能獲得已完成設定的前端工程師，不必在每次工作階段開始時重新解釋背景資訊。務必在分支上進行開發並撰寫測試，在 CI 中針對預備環境執行測試並進行程式碼審查，只有在測試和核准完成後才能部署至正式環境；絕不要直接將未經測試的變更發布到正式環境。
如何安裝這個 skill 檔案？+
下載 .skill 套件（其中包含 SKILL.md），將內容貼到 Claude Projects Instructions 或你的 AI 系統提示中，加入你自己的背景資訊，然後開始第一個工作階段。適用於 Claude、ChatGPT，或任何接受系統提示的 AI 聊天工具。
這個 skill 支援哪些 AI 工具？+
支援 Claude（推薦）、ChatGPT、Gemini、Perplexity 和 Copilot，以及任何接受系統提示的 AI 聊天工具。Claude Projects 能提供最佳結果。
這次下載包含哪些內容？+
購買後立即取得一個 .skill 套件：完整的 SKILL.md 角色設定，以及一份包含真實情境的實作範例檔案，讓你在依賴它之前先了解其品質。無訂閱費用，永久擁有。
準備好讓您的 AI 專精了嗎？
這個和其他 2,500+ 個，都能在 Claude、ChatGPT、Claude Code、Codex 或 Cursor 裡使用。隨時可取消。