Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/ChonSong/skill-retriever --skill formik-patternsDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository
Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketing, HR, and customer success. Takes PRD to fully deployed, revenue-generating product with zero human intervention. Features Task tool for subagent dispatch, parallel code review with 3 specialized reviewers, severity-based issue triage, distributed task queue with dead letter handling, automatic deployment to cloud providers, A/B testing, customer feedback loops, incident response, circuit breakers, and self-healing. Handles rate limits via distributed state checkpoints and auto-resume with exponential backoff. Requires --dangerously-skip-permissions flag.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this,"...
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name formik-patterns description Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission. risk unknown source https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/formik-patterns source_repo ChrisWiles/claude-code-showcase source_type community date_added 2026-07-01T00:00:00.000Z license MIT license_source https://github.com/ChrisWiles/claude-code-showcase/blob/main/LICENSE
Formik Patterns
When to Use
Use this skill when you need formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.
Basic Form Setup
import { useFormik } from 'formik' ;
import * as yup from 'yup' ;
const validationSchema = yup.object ({
email : yup.string ().email ('Invalid email' ).required ('Email is required' ),
password : yup.string ().min (8 , 'Min 8 characters' ).required ('Password is required' ),
});
const LoginForm = (const formik = useFormik ({
initialValues : {
email : '' ,
password : '' ,
},
validationSchema,
onSubmit : async (values) => {
await loginMutation ({ variables : { input : values } });
},
});
return (
<VStack gap ="$4" >
<Input
label ="Email"
value
{formik.values.email}
onChangeText
{formik.handleChange(
email
onBlur
{formik.handleBlur(
email
error
{formik.touched.email
formik.errors.email
:
undefined
keyboardType
"email-address"
autoCapitalize
"none"
<Input
label ="Password"
value ={formik.values.password}
onChangeText ={formik.handleChange( 'password ')}
onBlur ={formik.handleBlur( 'password ')}
error ={formik.touched.password ? formik.errors.password : undefined }
secureTextEntry
/>
<Button
onPress ={formik.handleSubmit}
isDisabled ={!formik.isValid || formik.isSubmitting }
isLoading ={formik.isSubmitting}
>
</Button >
</VStack >
Validation Schemas
Common Patterns import * as yup from 'yup' ;
email : yup.string ()
.email ('Invalid email address' )
.required ('Email is required' )
password : yup.string ()
.min (8 , 'Must be at least 8 characters' )
.matches (/[a-z]/ , 'Must contain lowercase letter' )
.matches (/[A-Z]/ , 'Must contain uppercase letter' )
.matches (/[0-9]/ , 'Must contain number' )
.required ('Password is required' )
confirmPassword : yup.string ()
.oneOf ([yup.ref ('password' )], 'Passwords must match' )
.required ('Please confirm password' )
phone : yup.string ()
.matches (/^\+?[1-9]\d{1,14}$/ , 'Invalid phone number' )
.required ('Phone is required' )
website : yup.string ()
.url ('Must be a valid URL' )
.nullable ()
quantity : yup.number ()
.min (1 , 'Minimum 1' )
.max (100 , 'Maximum 100' )
.required ('Quantity required' )
tags : yup.array ()
.of (yup.string ())
.min (1 , 'Select at least one tag' )
Conditional Validation const schema = yup.object ({
hasCompany : yup.boolean (),
companyName : yup.string ().when ('hasCompany' , {
is : true ,
then : (schema ) => schema.required ('Company name required' ),
otherwise : (schema ) => schema.nullable (),
}),
});
Form Field Helpers
Input Helper const getFieldProps = (name : keyof typeof formik.valuesvalue : formik.values [name],
onChangeText : formik.handleChange (name),
onBlur : formik.handleBlur (name),
error : formik.touched [name] ? formik.errors [name] : undefined ,
});
<Input label ="Email" {...getFieldProps ('email ')} />
Select/Picker Helper <Select
label="Country"
value={formik.values .country }
onValueChange={(value ) => formik.setFieldValue ('country' , value)}
error={formik.touched .country ? formik.errors .country : undefined }
options={countryOptions}
/>
Form Submission with GraphQL const CreateItemForm = (const [createItem] = useCreateItemMutation ({
onCompleted : () => {
toast.success ({ title : 'Item created' });
navigation.goBack ();
},
onError : (error ) => {
console .error ('createItem failed:' , error);
toast.error ({ title : 'Failed to create item' });
},
});
const formik = useFormik ({
initialValues : { name : '' , description : '' },
validationSchema,
onSubmit : async (values, { setSubmitting }) => {
try {
await createItem ({ variables : { input : values } });
} finally {
setSubmitting (false );
}
},
});
return (
<VStack gap ="$4" >
{/* Form fields */}
<Button
onPress ={formik.handleSubmit}
isDisabled ={!formik.isValid || formik.isSubmitting }
isLoading ={formik.isSubmitting}
>
Create
</Button >
</VStack >
Edit Form with Initial Values const EditItemForm = ({ item }: { item: Item } ) => {
const [updateItem] = useUpdateItemMutation ({
onCompleted : () => toast.success ({ title : 'Saved' }),
onError : (error ) => {
console .error ('updateItem failed:' , error);
toast.error ({ title : 'Save failed' });
},
});
const formik = useFormik ({
initialValues : {
name : item.name ,
description : item.description ?? '' ,
},
enableReinitialize : true ,
validationSchema,
onSubmit : async (values) => {
await updateItem ({
variables : { id : item.id , input : values },
});
},
});
const hasChanges = formik.dirty ;
return (
<VStack gap ="$4" >
{/* Form fields */}
<Button
onPress ={formik.handleSubmit}
isDisabled ={!hasChanges || !formik.isValid || formik.isSubmitting }
isLoading ={formik.isSubmitting}
>
Save Changes
</Button >
</VStack >
Form State Helpers const {
values,
errors,
touched,
isValid,
isSubmitting,
dirty,
handleSubmit,
handleChange,
handleBlur,
setFieldValue,
setFieldTouched,
resetForm,
setSubmitting,
} = formik;
Multi-Step Forms const MultiStepForm = (const [step, setStep] = useState (0 );
const formik = useFormik ({
initialValues : {
name : '' ,
email : '' ,
address : '' ,
city : '' ,
cardNumber : '' ,
},
validationSchema : stepSchemas[step],
onSubmit : async (values) => {
if (step < steps.length - 1 ) {
setStep (step + 1 );
} else {
await submitOrder (values);
}
},
});
return (
<VStack >
{step === 0 && <PersonalInfoStep formik ={formik} /> }
{step === 1 && <AddressStep formik ={formik} /> }
{step === 2 && <PaymentStep formik ={formik} /> }
<HStack gap ="$4" >
{step > 0 && (
<Button variant ="outline" onPress ={() => setStep(step - 1)}>
Back
</Button >
)}
<Button
onPress ={formik.handleSubmit}
isDisabled ={!formik.isValid}
isLoading ={formik.isSubmitting}
>
{step < steps.length - 1 ? 'Next' : 'Submit'}
</Button >
</HStack >
</VStack >
Anti-Patterns
<Input
value={formik.values .email }
onChangeText={formik.handleChange ('email' )}
/>
<Input
value ={formik.values.email}
onChangeText ={formik.handleChange( 'email ')}
onBlur ={formik.handleBlur( 'email ')}
error ={formik.touched.email ? formik.errors.email : undefined }
/> <Button onPress ={formik.handleSubmit} > Submit</Button > <Button
onPress ={formik.handleSubmit}
isDisabled ={!formik.isValid || formik.isSubmitting }
isLoading ={formik.isSubmitting}
>
Submit
</Button > onSubmit : async (values) => {
await createItem ({ variables : { input : values } });
}
onSubmit : async (values, { setSubmitting }) => {
try {
await createItem ({ variables : { input : values } });
} catch (error) {
toast.error ({ title : 'Failed to save' });
} finally {
setSubmitting (false );
}
}
Integration with Other Skills
graphql-schema : Mutation submission patternsreact-ui-patterns : Loading/error statestesting-patterns : Test form validation and submission
Limitations
Use this skill only when the task clearly matches its upstream source and local project context.
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
