Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From expo-rn-plugin
Generate a type-safe form from a zod schema using react-hook-form, @hookform/resolvers, and Tamagui field components. Use when building any user input form — login, registration, payments, profile edits.
npx claudepluginhub ksairi-org/claude --plugin expo-rn-pluginHow this skill is triggered — by the user, by Claude, or both
Slash command
/expo-rn-plugin:form <feature_or_schema_description><feature_or_schema_description>The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a validated form for `$ARGUMENTS`.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
Share bugs, ideas, or general feedback.
Generate a validated form for $ARGUMENTS.
Check existing components — call get_components and look for existing form field primitives before creating new ones
Define the zod schema — write a z.object() schema in a dedicated <feature>.schema.ts file; derive the TypeScript type with z.infer
Wire the form — use useForm<FormValues> with zodResolver(schema) and explicit defaultValues for every field
Render with Controller — always use Controller (never register) for React Native compatibility; use project form field components or Tamagui Input + Label as fallback
Handle submission — handleSubmit(onSubmit) where onSubmit receives the fully-typed payload; use setError("root", ...) for server-returned errors
i18n — every label, placeholder, and error string wrapped with Trans / t`…`
Type-check — run tsc --noEmit and fix all errors before reporting done
// <feature>.schema.ts
import { z } from "zod";
export const mySchema = z.object({ ... });
export type MyFormValues = z.infer<typeof mySchema>;
// <Feature>Form.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, Controller } from "react-hook-form";
import { mySchema, type MyFormValues } from "./<feature>.schema";
export function MyForm({ onSuccess }: { onSuccess: () => void }) {
const { t } = useLingui();
const { control, handleSubmit, formState: { errors, isSubmitting } } = useForm<MyFormValues>({
resolver: zodResolver(mySchema),
defaultValues: { ... },
});
const onSubmit = async (data: MyFormValues) => { ... };
return (
<YStack gap="$md">
<Controller
control={control}
name="fieldName"
render={({ field }) => (
<FormField label={t`Label`} error={errors.fieldName} {...field} />
)}
/>
<Button onPress={handleSubmit(onSubmit)} disabled={isSubmitting}>
<Trans>Submit</Trans>
</Button>
</YStack>
);
}
defaultValues must cover every field — no uncontrolled → controlled warnings.optional() to silence TS errors — fix the type at the sourcereact-hooks/exhaustive-deps — fix the dependencytsc --noEmit after generation; zero errors before reporting done