Skills formik-patterns
📦

formik-patterns

Content revision r1 Safe ⚙️ External commands

Build Reliable Formik Forms

Formik forms often repeat validation, error display, and submit-state logic. This skill provides concise patterns for reusable fields, Yup schemas, GraphQL submissions, edit forms, and multi-step flows.

Supports: Claude Codex Code(CC)
🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
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.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/chriswiles-formik-patterns.md Signed manifest GET /api/skills/chriswiles-formik-patterns/manifest Signed lockfile GET /api/skills/chriswiles-formik-patterns/lockfile

Test it

Using "formik-patterns". Request for a new login form with validation.

Expected outcome:

A Formik implementation plan with initial values, a Yup schema, field wiring, touched-field error display, and submit button state.

Using "formik-patterns". Request to improve a create-item form that submits through GraphQL.

Expected outcome:

A revised form approach with mutation success handling, error toasts, submitting cleanup, and disabled loading states.

Using "formik-patterns". Request for a checkout flow with personal, address, and payment steps.

Expected outcome:

A multi-step form structure with step-specific validation, back and next controls, and final submit behavior.

Security Audit

Safe
v8 • 7/6/2026 Open versioned report

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
Files scanned
363
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (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
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

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

Markdown badge

[![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 badge

<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>

Embed card

<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>
Academic citations (APA · BibTeX · CFF)

APA citation

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

BibTeX citation

@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 Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
71
Community
91
Spec Compliance

What You Can Build

Create a New Form

Use the basic setup and validation examples to create a new login, signup, or item creation form.

Standardize Form Validation

Apply shared Yup patterns for common fields so validation behavior stays consistent across screens.

Improve Existing Form UX

Use submit-state, touched-field errors, dirty checks, and mutation error handling to improve existing forms.

Try These Prompts

Create a Basic Form 
Use the formik-patterns skill to create a Formik form for email and password login. Include Yup validation, touched-field errors, and a disabled submit state.
Add Reusable Field Helpers 
Use the formik-patterns skill to refactor this form with reusable input and select helpers. Preserve existing validation and error display behavior.
Build a GraphQL Edit Form 
Use the formik-patterns skill to build an edit form with initial values, enableReinitialize, dirty-state submit control, and GraphQL mutation error handling.
Design a Multi-Step Form Flow 
Use the formik-patterns skill to design a multi-step Formik flow. Include per-step Yup schemas, navigation between steps, submit-state handling, and final submission behavior.

Best Practices

  • Show validation errors only after a field has been touched.
  • Disable submit controls when the form is invalid, unchanged, or already submitting.
  • Handle mutation errors and always clear submitting state after async work.

Avoid

  • Do not hide validation errors from users after interaction.
  • Do not leave submit buttons enabled during invalid or pending states.
  • Do not submit mutations without visible error handling.

Frequently Asked Questions

What does this skill help build?
It helps build Formik forms with validation, field helpers, submission handling, edit flows, and multi-step flows.
Does it generate a complete application?
No. It provides implementation patterns that fit into an existing React or React Native project.
Which validation library does it use?
The examples use Yup for validation schemas and conditional validation.
Can it help with GraphQL submissions?
Yes. It includes patterns for GraphQL mutations, success handling, error handling, and loading states.
Can it handle edit forms?
Yes. It covers initial values, enableReinitialize, dirty-state tracking, and save button state.
Does it cover testing?
No. It references testing as an integration area but does not include test examples.

Developer Details

Author

ChrisWiles

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

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

Ref

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

Maintenance freshness

7/18/2026

Usage

9 downloads · 246 views

File structure

📄 SKILL.md

More from ChrisWiles

View all

Related Skills

View all