New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Formik Form Patterns

by ChrisWiles in ChrisWiles/claude-code-showcase

Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

No licenceAuto-check passedFrontend & Design

Install Formik Form Patterns

skills CLI
$ npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ChrisWiles/claude-code-showcase formik-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ChrisWiles/claude-code-showcase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/formik-patterns .claude/skills/formik-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
formik-patterns
GitHub stars
6.1k
Used in
3 other repos
Token cost
~2.1k tokens
SKILL.md length
50 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
None found

At a glance

Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

  • Building a form with Formik and Yup validation
  • SKILL.md covers Basic Form Setup, Validation Schemas, Form Field Helpers and Form Submission with GraphQL, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Adding conditional validation that depends on another field

What it does

The skill is a set of code patterns for Formik forms in React and TypeScript. It starts with a basic `useFormik` setup paired with Yup schemas, then shows common validation patterns, conditional validation with `when`, and small helpers that turn Formik state into props for inputs and select pickers.

Further sections cover submitting a form through a GraphQL mutation, editing existing items with initial values, reading form state such as values and errors, and multi-step forms. An anti-patterns section shows mistakes such as not displaying validation errors, and the skill points to companion skills for GraphQL schemas, React loading and error states, and testing of form validation and submission.

When your agent uses it

  • Building a form with Formik and Yup validation
  • Adding conditional validation that depends on another field
  • Wiring a form submit to a GraphQL mutation
  • Creating an edit form pre-filled with existing values
  • Splitting a long form into steps

Example prompts

  • “Build a signup form with Formik that validates email and password with Yup.”
  • “Only require the company name when the has-company checkbox is ticked.”
  • “Make the create-item form submit through the GraphQL mutation and show a success toast.”
  • “Turn this long profile form into a three-step wizard.”

What it can do on your machine

Read from SKILL.md and the folder at commit a95518f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Formik Form Patterns loads about 2.1k tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 50 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~35
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 50 words (~2,139 tokens).

name
formik-patterns

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/formik-patterns of ChrisWiles/claude-code-showcase.

Open the folder on GitHubat commit a95518f

Used in 3 other repositories

We found 7 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in ChrisWiles/claude-code-showcase, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Formik Form Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Formik Form Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Formik Form Patterns this skillChrisWiles/claude-code-showcase6.1k3 repos~2.1kAutomated safety check: PassNone
Hooks Patternzosmaai/zosma-cowork123—~5.1kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence

Similar skills

  • Hooks Pattern

    zosmaai/zosma-cowork

    Teaches React Hooks for reusing stateful logic across components.

    123 GitHub stars~5.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Dify Component Writing Guide

    langgenius/dify

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    260 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Fast Typescript Check

    internet-development/www-sacred

    Keep www-sacred's TypeScript fast to type-check and fast to run.

    1.6k GitHub stars~4.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from ChrisWiles/claude-code-showcase

  • Core Component Library Patterns

    ChrisWiles/claude-code-showcase

    Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.

    6.1k GitHub starsUsed in 7 repos~1.2k tokens
    Auto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 7 repos~1.6k tokens
    Auto-check passed

  • Jest Testing Patterns

    ChrisWiles/claude-code-showcase

    Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.

    6.1k GitHub starsUsed in 7 repos~1.5k tokens
    Auto-check passed

  • GraphQL Operations with Codegen

    ChrisWiles/claude-code-showcase

    Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling.

    6.1k GitHub starsUsed in 3 repos~1.5k tokens
    Auto-check passed

  • Systematic Debugging

    ChrisWiles/claude-code-showcase

    Applies a four-phase debugging routine that finds the root cause of a bug or failing test before any fix is written.

    6.1k GitHub starsUsed in 3 repos~1.2k tokens
    Auto-check passed

Works with

Categories

Questions about Formik Form Patterns

What does Formik Form Patterns do?

Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows. The skill is a set of code patterns for Formik forms in React and TypeScript. It starts with a basic `useFormik` setup paired with Yup schemas, then shows common validation patterns, conditional validation with `when`, and small helpers that turn Formik state into props for inputs and select pickers.

When should I use Formik Form Patterns?

Formik Form Patterns fits situations like: building a form with Formik and Yup validation; adding conditional validation that depends on another field; wiring a form submit to a GraphQL mutation; creating an edit form pre-filled with existing values.

How do I install Formik Form Patterns in Claude Code?

Run `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -a claude-code`. Or copy the skill folder (.claude/skills/formik-patterns in ChrisWiles/claude-code-showcase) into .claude/skills/formik-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Formik Form Patterns in Codex?

Run `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -a codex`. Or copy the skill folder (.claude/skills/formik-patterns in ChrisWiles/claude-code-showcase) into .agents/skills/formik-patterns in your project. Codex loads it when a task matches its description.

Can I use Formik Form Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/formik-patterns, .gemini/skills/formik-patterns, .github/skills/formik-patterns and .opencode/skills/formik-patterns in your project.

What does Formik Form Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Formik Form Patterns is instructions for the agent only.

Does Formik Form Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Formik Form Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Formik Form Patterns use?

No licence was found for Formik Form Patterns or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Formik Form Patterns use?

About 2.1k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Formik Form Patterns?

Skills that share tags, products or a category with Formik Form Patterns: Hooks Pattern (zosmaai/zosma-cowork, 123 stars), Web Artifacts Builder (anthropics/skills, 180k stars), Dify Component Writing Guide (langgenius/dify, 158k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Formik Form Patterns?

ChrisWiles (a GitHub user) maintains it in ChrisWiles/claude-code-showcase, which has 6,072 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on January 6, 2026.

Source: ChrisWiles/claude-code-showcase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.