Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/ChonSong/skill-retriever --skill formik-patternsO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... 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,"...
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
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.
