技能 formik-patterns
📦

formik-patterns

內容修訂 r1 安全 ⚙️ 外部命令

建構可靠的 Formik 表單

Formik 表單經常重複驗證、錯誤顯示和提交狀態邏輯。此技能提供精簡模式，涵蓋可重用欄位、Yup schema、GraphQL 提交、編輯表單和多步驟流程。

支援: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 79 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求
Review the Skillstore skill "formik-patterns" from https://skillstore.io/skills/chriswiles-formik-patterns.md and its manifest at https://skillstore.io/api/skills/chriswiles-formik-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/chriswiles-formik-patterns.md 已簽名 manifest GET /api/skills/chriswiles-formik-patterns/manifest 已簽名 lockfile GET /api/skills/chriswiles-formik-patterns/lockfile

測試它

正在使用「formik-patterns」。 請求建立具有驗證的新登入表單。

預期結果:

一份 Formik 實作計畫，包含初始值、Yup schema、欄位接線、已觸碰欄位錯誤顯示，以及提交按鈕狀態。

正在使用「formik-patterns」。 請求改善透過 GraphQL 提交的 create-item 表單。

預期結果:

一套修訂後的表單方法，包含 mutation 成功處理、錯誤 toast、提交清理，以及停用的載入狀態。

正在使用「formik-patterns」。 請求建立包含個人、地址和付款步驟的結帳流程。

預期結果:

一個多步驟表單結構，包含步驟特定驗證、返回和下一步控制，以及最終提交行為。

安全審計

安全
v8 • 2026/7/6 開啟版本化報告

The static findings are false positives caused by Markdown code fences and form validation examples in SKILL.md. I found no executable shell commands, prompt injection, secret access, or instructions to bypass analysis. The skill is documentation-only and focuses on Formik and Yup patterns.

1
已掃描檔案
363
分析行數
0
複核項目
0
已忽略的誤報

風險因素

⚙️ 外部命令 (19)
SKILL.md:10-62 SKILL.md:62-68 SKILL.md:68-109 SKILL.md:109-113 SKILL.md:113-122 SKILL.md:122-128 SKILL.md:128-138 SKILL.md:138-142 SKILL.md:142-150 SKILL.md:150-154 SKILL.md:154-192 SKILL.md:192-196 SKILL.md:196-236 SKILL.md:236-240 SKILL.md:240-256 SKILL.md:256-260 SKILL.md:260-308 SKILL.md:308-312 SKILL.md:312-356
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告
安全評估

複製報告連結

https://skillstore.io/skills/chriswiles-formik-patterns/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/chriswiles-formik-patterns/security.svg)](https://skillstore.io/skills/chriswiles-formik-patterns?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/chriswiles-formik-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-formik-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/chriswiles-formik-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
學術引用 (APA · BibTeX · CFF)

APA 引用

ChrisWiles. (2026). formik-patterns security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-formik-patterns/audits/8

BibTeX 引用

@techreport{chriswiles-chriswiles-formik-patterns-2026, author = {ChrisWiles}, title = {formik-patterns security audit report (audit version 8)}, institution = {Skillstore}, year = {2026}, number = {8}, url = {https://skillstore.io/skills/chriswiles-formik-patterns/audits/8}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "formik-patterns security audit report (audit version 8)" version: "unspecified" type: report authors: - name: "ChrisWiles" date-released: "2026-07-06" url: "https://skillstore.io/skills/chriswiles-formik-patterns/audits/8" identifiers: - type: other value: "skillstore:chriswiles-formik-patterns:audit:8" description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據 證據置信度: 高
55
架構
85
可維護性
87
內容
71
社群
91
規範符合度

你可以打造什麼

建立新表單

使用基本設定和驗證範例來建立新的登入、註冊或項目建立表單。

標準化表單驗證

針對常見欄位套用共享的 Yup 模式，讓各畫面之間的驗證行為保持一致。

改善現有表單 UX

使用提交狀態、已觸碰欄位錯誤、dirty 檢查和 mutation 錯誤處理來改善現有表單。

試試這些提示

建立基本表單 
使用 formik-patterns 技能建立一個用於電子郵件和密碼登入的 Formik 表單。包含 Yup 驗證、已觸碰欄位錯誤，以及停用的提交狀態。
新增可重用欄位 Helper 
使用 formik-patterns 技能，透過可重用 input 和 select helper 重構此表單。保留現有驗證和錯誤顯示行為。
建構 GraphQL 編輯表單 
使用 formik-patterns 技能建立一個編輯表單，包含初始值、enableReinitialize、dirty 狀態提交控制，以及 GraphQL mutation 錯誤處理。
設計多步驟表單流程 
使用 formik-patterns 技能設計多步驟 Formik 流程。包含每個步驟的 Yup schema、步驟之間的導覽、提交狀態處理，以及最終提交行為。

最佳實務

  • 只有在欄位被觸碰後才顯示驗證錯誤。
  • 當表單無效、未變更或已在提交中時，停用提交控制項。
  • 處理 mutation 錯誤，並務必在非同步工作後清除提交狀態。

避免

  • 不要在使用者互動後隱藏驗證錯誤。
  • 不要在無效或待處理狀態期間讓提交按鈕保持啟用。
  • 不要在沒有可見錯誤處理的情況下提交 mutations。

常見問題

此技能能協助建構什麼？
它協助建立包含驗證、欄位 helper、提交處理、編輯流程和多步驟流程的 Formik 表單。
它會產生完整的應用程式嗎？
不能。它提供可套用到現有 React 或 React Native 專案中的實作模式。
它使用哪個驗證函式庫？
範例使用 Yup 進行驗證 schema 和條件式驗證。
它能協助處理 GraphQL 提交嗎？
可以。它包含 GraphQL mutations、成功處理、錯誤處理和載入狀態的模式。
它能處理編輯表單嗎？
可以。它涵蓋初始值、enableReinitialize、dirty 狀態追蹤和儲存按鈕狀態。
它涵蓋測試嗎？
不能。它將測試作為整合領域提及，但不包含測試範例。

開發者詳細資訊

作者

ChrisWiles

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/formik-patterns

引用

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

維護新鮮度

2026/7/22

使用量

9 次下載 · 246 次瀏覽

檔案結構

📄 SKILL.md

ChrisWiles 的更多技能

查看全部

相關技能

查看全部