Toolverse
All skills
Frontend

formik-patterns

by ChrisWiles

Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
ChrisWiles
Category
Frontend
Views
3
GitHub repo

About this skill

Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.

How to use

  1. Zainstaluj umiejętność w swoim projekcie Claude, wskazując repozytorium ChrisWiles/claude-code-showcase i ścieżkę .claude/skills/formik-patterns.

  2. Zaimportuj useFormik z biblioteki Formik oraz yup do definiowania schematów walidacji – będą one podstawą każdego formularza.

  3. Zdefiniuj schemat walidacji za pomocą yup.object(), określając reguły dla każdego pola (np. email musi być poprawnym adresem, hasło minimum 8 znaków z wymogami na znaki).

  4. Utwórz komponent formularza, inicjalizując useFormik z wartościami początkowymi, schematem walidacji oraz funkcją onSubmit do obsługi wysyłania danych.

  5. Połącz pola input z metodami formik.handleChange, formik.handleBlur oraz wyświetlaj błędy z formik.errors tylko po dotknięciu pola (formik.touched).

  6. Dodaj przycisk submit, który wyłącza się gdy formularz nie jest poprawny (!formik.isValid) lub trwa wysyłanie (formik.isSubmitting), a wyświetla stan ładowania podczas przetwarzania.

Related skills

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107