[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71HX1RYQA09RSV9KA4BJ9EH":3,"skill-same:01M71HX1RYQA09RSV9KA4BJ9EH":133},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":30,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":74,"commitSha":75,"skillDirectory":76,"forksCount":77,"repositoryHtmlUrl":78,"repositoryHomepageUrl":6,"ownerHtmlUrl":79,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":80,"install":81,"resources":94},"01M71HX1RYQA09RSV9KA4BJ9EH","form-validation-architect",null,"End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards. Use for complex forms, validation architecture, autosave, field dependencies. Activate on \"form validation\", \"react-hook-form\", \"Zod\", \"form error\", \"multi-step form\", \"wizard\". NOT for simple HTML forms, backend validation only, or non-React frameworks.","JSGforever\u002Fskillguard","JSGforever","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85541948?v=4","01M71FQD3E132VMR5F4TAYX3YS","01M71FQD4DYW0XJ4XQ4YQH75Y9",2,"GPL-3.0","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],"form validation architect","form validation","validation","form","architect","write","react-hook-form","leverage","arrays","activate","usability","edit","testing","read","zod","wizard","messaging","architecture","react","design","2026-11-10 10:12:30",false,"---\nname: form-validation-architect\ndescription: End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards. Use for complex forms, validation architecture, autosave,\n  field dependencies. Activate on \"form validation\", \"react-hook-form\", \"Zod\", \"form error\", \"multi-step form\", \"wizard\". NOT for simple HTML forms, backend validation only, or non-React frameworks.\nallowed-tools: Read,Write,Edit,Bash(npm:*)\nmetadata:\n  category: Code Quality & Testing\n  tags:\n  - form\n  - validation\n  - architect\n  - form-validation\n  - react-hook-form\n  pairs-with:\n  - skill: typescript-advanced-patterns\n    reason: Zod schemas and generic form types leverage advanced TypeScript patterns\n  - skill: rest-api-design\n    reason: Form validation schemas should match API endpoint request validation for consistency\n  - skill: ux-friction-analyzer\n    reason: Form UX friction (error messages, field ordering) is a primary usability concern\n  - skill: react-performance-optimizer\n    reason: Large forms with field arrays require React render optimization for responsiveness\n---\n\n# Form Validation Architect\n\nExpert in building production-grade form systems with client-side validation, type safety, and excellent UX.\n\n## When to Use\n\n✅ **Use for**:\n- Complex forms with multiple fields and validation rules\n- Multi-step wizards with progress tracking\n- Dynamic field arrays (add\u002Fremove items)\n- Form state persistence across sessions\n- Async validation (check username availability, validate address)\n- Dependent fields (enable B when A is checked)\n- File uploads with progress and validation\n- Autosave and optimistic updates\n\n❌ **NOT for**:\n- Simple contact forms (HTML + basic JS is fine)\n- Backend-only validation (use Joi, Yup on server)\n- Non-React frameworks (use Formik alternatives)\n- Read-only displays (no form needed)\n\n## Quick Decision Tree\n\n```\nDoes your form:\n├── Have >5 fields? → Use react-hook-form\n├── Need type safety? → Add Zod schemas\n├── Have dynamic fields? → Use field arrays\n├── Span multiple steps? → Use wizard pattern\n├── Need async validation? → Use resolver + async rules\n└── Just email\u002Fmessage? → Use native HTML validation\n```\n\n---\n\n## Technology Selection (2024+)\n\n### React Hook Form (Recommended)\n\n**Why RHF over Formik**:\n- **Performance**: Uncontrolled inputs → fewer re-renders\n- **Bundle size**: 8KB vs 30KB (Formik)\n- **DevEx**: Better TypeScript support\n- **Adoption**: 40k+ stars, industry standard 2023+\n\n**Timeline**:\n- 2015-2019: Formik dominated\n- 2019: React Hook Form released\n- 2022+: RHF became standard\n- 2024: Formik in maintenance mode\n\n### Zod for Schema Validation\n\n**Why Zod over Yup**:\n- **TypeScript-first**: Infer types from schemas\n- **Composability**: Better schema reuse\n- **Error messages**: More customizable\n- **Modern**: Active development, latest features\n\n**Timeline**:\n- 2017-2020: Yup standard\n- 2020: Zod released\n- 2023+: Zod preferred for new projects\n\n---\n\n## Common Anti-Patterns\n\n### Anti-Pattern 1: Controlled Inputs Everywhere\n\n**Novice thinking**: \"All form inputs should be controlled with useState\"\n\n**Problem**: Causes re-render on every keystroke\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Re-renders entire component on every keystroke\nconst [email, setEmail] = useState('');\nconst [password, setPassword] = useState('');\nconst [name, setName] = useState('');\n\u002F\u002F ... 20 more useState calls\n\n\u003Cinput value={email} onChange={(e) => setEmail(e.target.value)} \u002F>\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Uncontrolled with react-hook-form (minimal re-renders)\nconst { register, handleSubmit } = useForm();\n\n\u003Cinput {...register('email')} \u002F>\n\u003Cinput {...register('password')} \u002F>\n\u003Cinput {...register('name')} \u002F>\n```\n\n**Why it matters**: Forms with 10+ fields become sluggish with controlled inputs.\n\n---\n\n### Anti-Pattern 2: String-Based Validation\n\n**Problem**: No type safety, easy to make mistakes\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ String validation, no types\nconst validate = (values) => {\n  if (!values.email.includes('@')) return 'Invalid email';\n  if (values.age \u003C 18) return 'Must be 18+';\n  \u002F\u002F Typo in field name? Runtime error!\n};\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Zod schema with type inference\nconst schema = z.object({\n  email: z.string().email('Invalid email'),\n  age: z.number().min(18, 'Must be 18+'),\n  username: z.string()\n    .min(3, 'Too short')\n    .regex(\u002F^[a-z0-9_]+$\u002F, 'Lowercase, numbers, underscores only')\n});\n\ntype FormData = z.infer\u003Ctypeof schema>; \u002F\u002F Automatic TypeScript type!\n```\n\n**Timeline**:\n- Pre-2020: String-based validation common\n- 2020+: Schema-first validation standard\n- 2024: Type inference from schemas expected\n\n---\n\n### Anti-Pattern 3: No Error State Management\n\n**Problem**: Errors shown before user interacts\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Shows errors immediately on page load\n{errors.email && \u003Cspan>{errors.email}\u003C\u002Fspan>}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Show errors only after field is touched\nconst { formState: { errors, touchedFields } } = useForm();\n\n{touchedFields.email && errors.email && (\n  \u003Cspan className=\"error\">{errors.email.message}\u003C\u002Fspan>\n)}\n\n\u002F\u002F Or: Use mode=\"onBlur\" to validate on blur\nconst form = useForm({\n  mode: 'onBlur' \u002F\u002F Validate when user leaves field\n});\n```\n\n**Why it matters**: Better UX → user isn't yelled at before typing\n\n---\n\n### Anti-Pattern 4: No Async Validation\n\n**Problem**: Can't check username availability, validate addresses, etc.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Async validation with debounce\nconst schema = z.object({\n  username: z.string().refine(\n    async (username) => {\n      \u002F\u002F Debounced API call\n      const available = await checkUsernameAvailability(username);\n      return available;\n    },\n    { message: 'Username already taken' }\n  )\n});\n\n\u002F\u002F Or: Custom async validation in RHF\nregister('username', {\n  validate: {\n    checkAvailable: async (value) => {\n      const response = await fetch(`\u002Fapi\u002Fcheck-username?q=${value}`);\n      return response.ok || 'Username taken';\n    }\n  }\n});\n```\n\n**Best practice**: Debounce async validation to avoid API spam\n\n---\n\n### Anti-Pattern 5: No Loading States\n\n**Problem**: User doesn't know validation is happening\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Show loading state during async validation\nconst { formState: { isValidating, isSubmitting } } = useForm();\n\n\u003Cbutton disabled={isValidating || isSubmitting}>\n  {isSubmitting ? 'Submitting...' :\n   isValidating ? 'Checking...' :\n   'Submit'}\n\u003C\u002Fbutton>\n```\n\n---\n\n## Implementation Patterns\n\n### Pattern 1: Basic Form with Zod\n\n```typescript\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\n\u002F\u002F Define schema\nconst loginSchema = z.object({\n  email: z.string().email('Invalid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n  rememberMe: z.boolean().optional()\n});\n\ntype LoginForm = z.infer\u003Ctypeof loginSchema>;\n\nfunction LoginForm() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors, isSubmitting }\n  } = useForm\u003CLoginForm>({\n    resolver: zodResolver(loginSchema),\n    defaultValues: {\n      rememberMe: false\n    }\n  });\n\n  const onSubmit = async (data: LoginForm) => {\n    await api.login(data);\n  };\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      \u003Cdiv>\n        \u003Cinput\n          {...register('email')}\n          type=\"email\"\n          placeholder=\"Email\"\n        \u002F>\n        {errors.email && \u003Cspan className=\"error\">{errors.email.message}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003Cinput\n          {...register('password')}\n          type=\"password\"\n          placeholder=\"Password\"\n        \u002F>\n        {errors.password && \u003Cspan className=\"error\">{errors.password.message}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003Clabel>\n          \u003Cinput {...register('rememberMe')} type=\"checkbox\" \u002F>\n          Remember me\n        \u003C\u002Flabel>\n      \u003C\u002Fdiv>\n\n      \u003Cbutton type=\"submit\" disabled={isSubmitting}>\n        {isSubmitting ? 'Logging in...' : 'Login'}\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 2: Multi-Step Wizard\n\n```typescript\nconst stepSchemas = [\n  \u002F\u002F Step 1: Personal Info\n  z.object({\n    firstName: z.string().min(1, 'Required'),\n    lastName: z.string().min(1, 'Required'),\n    email: z.string().email()\n  }),\n  \u002F\u002F Step 2: Address\n  z.object({\n    street: z.string().min(1, 'Required'),\n    city: z.string().min(1, 'Required'),\n    zipCode: z.string().regex(\u002F^\\d{5}$\u002F, 'Invalid ZIP')\n  }),\n  \u002F\u002F Step 3: Payment\n  z.object({\n    cardNumber: z.string().regex(\u002F^\\d{16}$\u002F, 'Invalid card'),\n    expiry: z.string().regex(\u002F^\\d{2}\\\u002F\\d{2}$\u002F, 'MM\u002FYY format'),\n    cvv: z.string().regex(\u002F^\\d{3}$\u002F, '3 digits')\n  })\n];\n\nfunction MultiStepForm() {\n  const [step, setStep] = useState(0);\n  const [formData, setFormData] = useState({});\n\n  const form = useForm({\n    resolver: zodResolver(stepSchemas[step])\n  });\n\n  const nextStep = async () => {\n    const isValid = await form.trigger(); \u002F\u002F Validate current step\n\n    if (isValid) {\n      setFormData({ ...formData, ...form.getValues() });\n      setStep(step + 1);\n    }\n  };\n\n  const prevStep = () => {\n    setFormData({ ...formData, ...form.getValues() });\n    setStep(step - 1);\n  };\n\n  const onSubmit = async (data) => {\n    const finalData = { ...formData, ...data };\n    await api.submitApplication(finalData);\n  };\n\n  return (\n    \u003Cdiv>\n      \u003Cprogress value={step + 1} max={stepSchemas.length} \u002F>\n\n      \u003Cform onSubmit={form.handleSubmit(step === 2 ? onSubmit : nextStep)}>\n        {step === 0 && \u003CPersonalInfoStep register={form.register} errors={form.formState.errors} \u002F>}\n        {step === 1 && \u003CAddressStep register={form.register} errors={form.formState.errors} \u002F>}\n        {step === 2 && \u003CPaymentStep register={form.register} errors={form.formState.errors} \u002F>}\n\n        \u003Cdiv>\n          {step > 0 && \u003Cbutton type=\"button\" onClick={prevStep}>Back\u003C\u002Fbutton>}\n          \u003Cbutton type=\"submit\">\n            {step === 2 ? 'Submit' : 'Next'}\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Pattern 3: Dynamic Field Arrays\n\n```typescript\nconst schema = z.object({\n  items: z.array(z.object({\n    name: z.string().min(1, 'Required'),\n    quantity: z.number().min(1, 'At least 1'),\n    price: z.number().min(0, 'Must be positive')\n  })).min(1, 'Add at least one item')\n});\n\nfunction OrderForm() {\n  const { register, control, handleSubmit, formState: { errors } } = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: {\n      items: [{ name: '', quantity: 1, price: 0 }]\n    }\n  });\n\n  const { fields, append, remove } = useFieldArray({\n    control,\n    name: 'items'\n  });\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      {fields.map((field, index) => (\n        \u003Cdiv key={field.id}>\n          \u003Cinput\n            {...register(`items.${index}.name`)}\n            placeholder=\"Item name\"\n          \u002F>\n          \u003Cinput\n            {...register(`items.${index}.quantity`, { valueAsNumber: true })}\n            type=\"number\"\n          \u002F>\n          \u003Cinput\n            {...register(`items.${index}.price`, { valueAsNumber: true })}\n            type=\"number\"\n            step=\"0.01\"\n          \u002F>\n          \u003Cbutton type=\"button\" onClick={() => remove(index)}>\n            Remove\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      ))}\n\n      \u003Cbutton type=\"button\" onClick={() => append({ name: '', quantity: 1, price: 0 })}>\n        Add Item\n      \u003C\u002Fbutton>\n\n      \u003Cbutton type=\"submit\">Submit Order\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 4: Autosave (Debounced)\n\n```typescript\nimport { useDebounce } from 'use-debounce';\nimport { useEffect } from 'react';\n\nfunction AutosaveForm() {\n  const { watch, register } = useForm();\n  const formValues = watch(); \u002F\u002F Watch all fields\n\n  \u002F\u002F Debounce to avoid saving on every keystroke\n  const [debouncedValues] = useDebounce(formValues, 1000);\n\n  useEffect(() => {\n    \u002F\u002F Save to localStorage or API\n    localStorage.setItem('draft', JSON.stringify(debouncedValues));\n    \u002F\u002F Or: await api.saveDraft(debouncedValues);\n  }, [debouncedValues]);\n\n  return (\n    \u003Cform>\n      \u003Cinput {...register('title')} placeholder=\"Title\" \u002F>\n      \u003Ctextarea {...register('content')} placeholder=\"Content\" \u002F>\n      \u003Csmall>Autosaved\u003C\u002Fsmall>\n    \u003C\u002Fform>\n  );\n}\n```\n\n---\n\n## Form UX Best Practices\n\n### 1. Validate on Blur (Not on Change)\n\n```typescript\nconst form = useForm({\n  mode: 'onBlur' \u002F\u002F Validate when user leaves field\n  \u002F\u002F NOT 'onChange' - too aggressive\n});\n```\n\n### 2. Disable Submit While Invalid\n\n```typescript\n\u003Cbutton\n  type=\"submit\"\n  disabled={!form.formState.isValid || form.formState.isSubmitting}\n>\n  Submit\n\u003C\u002Fbutton>\n```\n\n### 3. Focus First Error on Submit\n\n```typescript\nconst onSubmit = async (data) => {\n  try {\n    await api.submit(data);\n  } catch (error) {\n    \u002F\u002F Focus first error field\n    const firstError = Object.keys(errors)[0];\n    form.setFocus(firstError);\n  }\n};\n```\n\n### 4. Optimistic UI Updates\n\n```typescript\nconst onSubmit = async (data) => {\n  \u002F\u002F Optimistically update UI\n  setItems([...items, data]);\n\n  try {\n    await api.createItem(data);\n  } catch (error) {\n    \u002F\u002F Rollback on error\n    setItems(items);\n    toast.error('Failed to save');\n  }\n};\n```\n\n---\n\n## Production Checklist\n\n```\n□ Zod schemas for all forms\n□ Type inference used (z.infer\u003Ctypeof schema>)\n□ Validation mode set appropriately (onBlur\u002FonSubmit)\n□ Error messages clear and actionable\n□ Loading states for async operations\n□ Focus management on errors\n□ Autosave for long forms\n□ Form state persisted (localStorage\u002Fsession)\n□ File upload progress indicators\n□ Keyboard navigation tested\n□ Accessibility (ARIA labels, error announcements)\n□ Mobile-friendly (large touch targets)\n```\n\n---\n\n## When to Use vs Avoid\n\n| Scenario | Use This Skill? |\n|----------|-----------------|\n| User registration with validation | ✅ Yes |\n| Multi-step checkout flow | ✅ Yes |\n| Dynamic form builder | ✅ Yes |\n| Simple newsletter signup | ❌ No - use native HTML |\n| Backend-only validation | ❌ No - use Joi\u002FYup on server |\n| Non-React framework | ❌ No - use framework-specific solution |\n\n---\n\n## Technology Comparison\n\n| Feature | RHF + Zod | Formik + Yup | Native HTML5 |\n|---------|-----------|--------------|--------------|\n| Performance | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |\n| Type Safety | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ❌ |\n| Bundle Size | 8KB | 30KB | 0KB |\n| DevEx | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |\n| Field Arrays | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ❌ |\n| Async Validation | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ❌ |\n\n---\n\n## References\n\n- `\u002Freferences\u002Fzod-patterns.md` - Advanced Zod schema patterns\n- `\u002Freferences\u002Faccessibility.md` - Form accessibility guidelines\n- `\u002Freferences\u002Ffile-upload.md` - File upload with progress tracking\n\n## Scripts\n\n- `scripts\u002Fgenerate_form.ts` - Generate form from Zod schema\n- `scripts\u002Fvalidate_schemas.ts` - Lint Zod schemas for common issues\n\n## Assets\n\n- `assets\u002Fform-templates\u002F` - Ready-to-use form components\n\n---\n\n**This skill guides**: Form validation architecture | react-hook-form patterns | Zod schema design | Multi-step wizards | Field arrays | Autosave | Async validation\n","# Form Validation Architect\n\nExpert in building production-grade form systems with client-side validation, type safety, and excellent UX.\n\n## When to Use\n\n✅ **Use for**:\n- Complex forms with multiple fields and validation rules\n- Multi-step wizards with progress tracking\n- Dynamic field arrays (add\u002Fremove items)\n- Form state persistence across sessions\n- Async validation (check username availability, validate address)\n- Dependent fields (enable B when A is checked)\n- File uploads with progress and validation\n- Autosave and optimistic updates\n\n❌ **NOT for**:\n- Simple contact forms (HTML + basic JS is fine)\n- Backend-only validation (use Joi, Yup on server)\n- Non-React frameworks (use Formik alternatives)\n- Read-only displays (no form needed)\n\n## Quick Decision Tree\n\n```\nDoes your form:\n├── Have >5 fields? → Use react-hook-form\n├── Need type safety? → Add Zod schemas\n├── Have dynamic fields? → Use field arrays\n├── Span multiple steps? → Use wizard pattern\n├── Need async validation? → Use resolver + async rules\n└── Just email\u002Fmessage? → Use native HTML validation\n```\n\n---\n\n## Technology Selection (2024+)\n\n### React Hook Form (Recommended)\n\n**Why RHF over Formik**:\n- **Performance**: Uncontrolled inputs → fewer re-renders\n- **Bundle size**: 8KB vs 30KB (Formik)\n- **DevEx**: Better TypeScript support\n- **Adoption**: 40k+ stars, industry standard 2023+\n\n**Timeline**:\n- 2015-2019: Formik dominated\n- 2019: React Hook Form released\n- 2022+: RHF became standard\n- 2024: Formik in maintenance mode\n\n### Zod for Schema Validation\n\n**Why Zod over Yup**:\n- **TypeScript-first**: Infer types from schemas\n- **Composability**: Better schema reuse\n- **Error messages**: More customizable\n- **Modern**: Active development, latest features\n\n**Timeline**:\n- 2017-2020: Yup standard\n- 2020: Zod released\n- 2023+: Zod preferred for new projects\n\n---\n\n## Common Anti-Patterns\n\n### Anti-Pattern 1: Controlled Inputs Everywhere\n\n**Novice thinking**: \"All form inputs should be controlled with useState\"\n\n**Problem**: Causes re-render on every keystroke\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Re-renders entire component on every keystroke\nconst [email, setEmail] = useState('');\nconst [password, setPassword] = useState('');\nconst [name, setName] = useState('');\n\u002F\u002F ... 20 more useState calls\n\n\u003Cinput value={email} onChange={(e) => setEmail(e.target.value)} \u002F>\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Uncontrolled with react-hook-form (minimal re-renders)\nconst { register, handleSubmit } = useForm();\n\n\u003Cinput {...register('email')} \u002F>\n\u003Cinput {...register('password')} \u002F>\n\u003Cinput {...register('name')} \u002F>\n```\n\n**Why it matters**: Forms with 10+ fields become sluggish with controlled inputs.\n\n---\n\n### Anti-Pattern 2: String-Based Validation\n\n**Problem**: No type safety, easy to make mistakes\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ String validation, no types\nconst validate = (values) => {\n  if (!values.email.includes('@')) return 'Invalid email';\n  if (values.age \u003C 18) return 'Must be 18+';\n  \u002F\u002F Typo in field name? Runtime error!\n};\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Zod schema with type inference\nconst schema = z.object({\n  email: z.string().email('Invalid email'),\n  age: z.number().min(18, 'Must be 18+'),\n  username: z.string()\n    .min(3, 'Too short')\n    .regex(\u002F^[a-z0-9_]+$\u002F, 'Lowercase, numbers, underscores only')\n});\n\ntype FormData = z.infer\u003Ctypeof schema>; \u002F\u002F Automatic TypeScript type!\n```\n\n**Timeline**:\n- Pre-2020: String-based validation common\n- 2020+: Schema-first validation standard\n- 2024: Type inference from schemas expected\n\n---\n\n### Anti-Pattern 3: No Error State Management\n\n**Problem**: Errors shown before user interacts\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Shows errors immediately on page load\n{errors.email && \u003Cspan>{errors.email}\u003C\u002Fspan>}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Show errors only after field is touched\nconst { formState: { errors, touchedFields } } = useForm();\n\n{touchedFields.email && errors.email && (\n  \u003Cspan className=\"error\">{errors.email.message}\u003C\u002Fspan>\n)}\n\n\u002F\u002F Or: Use mode=\"onBlur\" to validate on blur\nconst form = useForm({\n  mode: 'onBlur' \u002F\u002F Validate when user leaves field\n});\n```\n\n**Why it matters**: Better UX → user isn't yelled at before typing\n\n---\n\n### Anti-Pattern 4: No Async Validation\n\n**Problem**: Can't check username availability, validate addresses, etc.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Async validation with debounce\nconst schema = z.object({\n  username: z.string().refine(\n    async (username) => {\n      \u002F\u002F Debounced API call\n      const available = await checkUsernameAvailability(username);\n      return available;\n    },\n    { message: 'Username already taken' }\n  )\n});\n\n\u002F\u002F Or: Custom async validation in RHF\nregister('username', {\n  validate: {\n    checkAvailable: async (value) => {\n      const response = await fetch(`\u002Fapi\u002Fcheck-username?q=${value}`);\n      return response.ok || 'Username taken';\n    }\n  }\n});\n```\n\n**Best practice**: Debounce async validation to avoid API spam\n\n---\n\n### Anti-Pattern 5: No Loading States\n\n**Problem**: User doesn't know validation is happening\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Show loading state during async validation\nconst { formState: { isValidating, isSubmitting } } = useForm();\n\n\u003Cbutton disabled={isValidating || isSubmitting}>\n  {isSubmitting ? 'Submitting...' :\n   isValidating ? 'Checking...' :\n   'Submit'}\n\u003C\u002Fbutton>\n```\n\n---\n\n## Implementation Patterns\n\n### Pattern 1: Basic Form with Zod\n\n```typescript\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\n\u002F\u002F Define schema\nconst loginSchema = z.object({\n  email: z.string().email('Invalid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n  rememberMe: z.boolean().optional()\n});\n\ntype LoginForm = z.infer\u003Ctypeof loginSchema>;\n\nfunction LoginForm() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors, isSubmitting }\n  } = useForm\u003CLoginForm>({\n    resolver: zodResolver(loginSchema),\n    defaultValues: {\n      rememberMe: false\n    }\n  });\n\n  const onSubmit = async (data: LoginForm) => {\n    await api.login(data);\n  };\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      \u003Cdiv>\n        \u003Cinput\n          {...register('email')}\n          type=\"email\"\n          placeholder=\"Email\"\n        \u002F>\n        {errors.email && \u003Cspan className=\"error\">{errors.email.message}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003Cinput\n          {...register('password')}\n          type=\"password\"\n          placeholder=\"Password\"\n        \u002F>\n        {errors.password && \u003Cspan className=\"error\">{errors.password.message}\u003C\u002Fspan>}\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003Clabel>\n          \u003Cinput {...register('rememberMe')} type=\"checkbox\" \u002F>\n          Remember me\n        \u003C\u002Flabel>\n      \u003C\u002Fdiv>\n\n      \u003Cbutton type=\"submit\" disabled={isSubmitting}>\n        {isSubmitting ? 'Logging in...' : 'Login'}\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 2: Multi-Step Wizard\n\n```typescript\nconst stepSchemas = [\n  \u002F\u002F Step 1: Personal Info\n  z.object({\n    firstName: z.string().min(1, 'Required'),\n    lastName: z.string().min(1, 'Required'),\n    email: z.string().email()\n  }),\n  \u002F\u002F Step 2: Address\n  z.object({\n    street: z.string().min(1, 'Required'),\n    city: z.string().min(1, 'Required'),\n    zipCode: z.string().regex(\u002F^\\d{5}$\u002F, 'Invalid ZIP')\n  }),\n  \u002F\u002F Step 3: Payment\n  z.object({\n    cardNumber: z.string().regex(\u002F^\\d{16}$\u002F, 'Invalid card'),\n    expiry: z.string().regex(\u002F^\\d{2}\\\u002F\\d{2}$\u002F, 'MM\u002FYY format'),\n    cvv: z.string().regex(\u002F^\\d{3}$\u002F, '3 digits')\n  })\n];\n\nfunction MultiStepForm() {\n  const [step, setStep] = useState(0);\n  const [formData, setFormData] = useState({});\n\n  const form = useForm({\n    resolver: zodResolver(stepSchemas[step])\n  });\n\n  const nextStep = async () => {\n    const isValid = await form.trigger(); \u002F\u002F Validate current step\n\n    if (isValid) {\n      setFormData({ ...formData, ...form.getValues() });\n      setStep(step + 1);\n    }\n  };\n\n  const prevStep = () => {\n    setFormData({ ...formData, ...form.getValues() });\n    setStep(step - 1);\n  };\n\n  const onSubmit = async (data) => {\n    const finalData = { ...formData, ...data };\n    await api.submitApplication(finalData);\n  };\n\n  return (\n    \u003Cdiv>\n      \u003Cprogress value={step + 1} max={stepSchemas.length} \u002F>\n\n      \u003Cform onSubmit={form.handleSubmit(step === 2 ? onSubmit : nextStep)}>\n        {step === 0 && \u003CPersonalInfoStep register={form.register} errors={form.formState.errors} \u002F>}\n        {step === 1 && \u003CAddressStep register={form.register} errors={form.formState.errors} \u002F>}\n        {step === 2 && \u003CPaymentStep register={form.register} errors={form.formState.errors} \u002F>}\n\n        \u003Cdiv>\n          {step > 0 && \u003Cbutton type=\"button\" onClick={prevStep}>Back\u003C\u002Fbutton>}\n          \u003Cbutton type=\"submit\">\n            {step === 2 ? 'Submit' : 'Next'}\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Pattern 3: Dynamic Field Arrays\n\n```typescript\nconst schema = z.object({\n  items: z.array(z.object({\n    name: z.string().min(1, 'Required'),\n    quantity: z.number().min(1, 'At least 1'),\n    price: z.number().min(0, 'Must be positive')\n  })).min(1, 'Add at least one item')\n});\n\nfunction OrderForm() {\n  const { register, control, handleSubmit, formState: { errors } } = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: {\n      items: [{ name: '', quantity: 1, price: 0 }]\n    }\n  });\n\n  const { fields, append, remove } = useFieldArray({\n    control,\n    name: 'items'\n  });\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)}>\n      {fields.map((field, index) => (\n        \u003Cdiv key={field.id}>\n          \u003Cinput\n            {...register(`items.${index}.name`)}\n            placeholder=\"Item name\"\n          \u002F>\n          \u003Cinput\n            {...register(`items.${index}.quantity`, { valueAsNumber: true })}\n            type=\"number\"\n          \u002F>\n          \u003Cinput\n            {...register(`items.${index}.price`, { valueAsNumber: true })}\n            type=\"number\"\n            step=\"0.01\"\n          \u002F>\n          \u003Cbutton type=\"button\" onClick={() => remove(index)}>\n            Remove\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      ))}\n\n      \u003Cbutton type=\"button\" onClick={() => append({ name: '', quantity: 1, price: 0 })}>\n        Add Item\n      \u003C\u002Fbutton>\n\n      \u003Cbutton type=\"submit\">Submit Order\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 4: Autosave (Debounced)\n\n```typescript\nimport { useDebounce } from 'use-debounce';\nimport { useEffect } from 'react';\n\nfunction AutosaveForm() {\n  const { watch, register } = useForm();\n  const formValues = watch(); \u002F\u002F Watch all fields\n\n  \u002F\u002F Debounce to avoid saving on every keystroke\n  const [debouncedValues] = useDebounce(formValues, 1000);\n\n  useEffect(() => {\n    \u002F\u002F Save to localStorage or API\n    localStorage.setItem('draft', JSON.stringify(debouncedValues));\n    \u002F\u002F Or: await api.saveDraft(debouncedValues);\n  }, [debouncedValues]);\n\n  return (\n    \u003Cform>\n      \u003Cinput {...register('title')} placeholder=\"Title\" \u002F>\n      \u003Ctextarea {...register('content')} placeholder=\"Content\" \u002F>\n      \u003Csmall>Autosaved\u003C\u002Fsmall>\n    \u003C\u002Fform>\n  );\n}\n```\n\n---\n\n## Form UX Best Practices\n\n### 1. Validate on Blur (Not on Change)\n\n```typescript\nconst form = useForm({\n  mode: 'onBlur' \u002F\u002F Validate when user leaves field\n  \u002F\u002F NOT 'onChange' - too aggressive\n});\n```\n\n### 2. Disable Submit While Invalid\n\n```typescript\n\u003Cbutton\n  type=\"submit\"\n  disabled={!form.formState.isValid || form.formState.isSubmitting}\n>\n  Submit\n\u003C\u002Fbutton>\n```\n\n### 3. Focus First Error on Submit\n\n```typescript\nconst onSubmit = async (data) => {\n  try {\n    await api.submit(data);\n  } catch (error) {\n    \u002F\u002F Focus first error field\n    const firstError = Object.keys(errors)[0];\n    form.setFocus(firstError);\n  }\n};\n```\n\n### 4. Optimistic UI Updates\n\n```typescript\nconst onSubmit = async (data) => {\n  \u002F\u002F Optimistically update UI\n  setItems([...items, data]);\n\n  try {\n    await api.createItem(data);\n  } catch (error) {\n    \u002F\u002F Rollback on error\n    setItems(items);\n    toast.error('Failed to save');\n  }\n};\n```\n\n---\n\n## Production Checklist\n\n```\n□ Zod schemas for all forms\n□ Type inference used (z.infer\u003Ctypeof schema>)\n□ Validation mode set appropriately (onBlur\u002FonSubmit)\n□ Error messages clear and actionable\n□ Loading states for async operations\n□ Focus management on errors\n□ Autosave for long forms\n□ Form state persisted (localStorage\u002Fsession)\n□ File upload progress indicators\n□ Keyboard navigation tested\n□ Accessibility (ARIA labels, error announcements)\n□ Mobile-friendly (large touch targets)\n```\n\n---\n\n## When to Use vs Avoid\n\n| Scenario | Use This Skill? |\n|----------|-----------------|\n| User registration with validation | ✅ Yes |\n| Multi-step checkout flow | ✅ Yes |\n| Dynamic form builder | ✅ Yes |\n| Simple newsletter signup | ❌ No - use native HTML |\n| Backend-only validation | ❌ No - use Joi\u002FYup on server |\n| Non-React framework | ❌ No - use framework-specific solution |\n\n---\n\n## Technology Comparison\n\n| Feature | RHF + Zod | Formik + Yup | Native HTML5 |\n|---------|-----------|--------------|--------------|\n| Performance | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |\n| Type Safety | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ❌ |\n| Bundle Size | 8KB | 30KB | 0KB |\n| DevEx | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |\n| Field Arrays | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ❌ |\n| Async Validation | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ❌ |\n\n---\n\n## References\n\n- `\u002Freferences\u002Fzod-patterns.md` - Advanced Zod schema patterns\n- `\u002Freferences\u002Faccessibility.md` - Form accessibility guidelines\n- `\u002Freferences\u002Ffile-upload.md` - File upload with progress tracking\n\n## Scripts\n\n- `scripts\u002Fgenerate_form.ts` - Generate form from Zod schema\n- `scripts\u002Fvalidate_schemas.ts` - Lint Zod schemas for common issues\n\n## Assets\n\n- `assets\u002Fform-templates\u002F` - Ready-to-use form components\n\n---\n\n**This skill guides**: Form validation architecture | react-hook-form patterns | Zod schema design | Multi-step wizards | Field arrays | Autosave | Async validation\n",{"name":5,"metadata":56,"description":7,"allowed-tools":73},{"tags":57,"category":59,"pairs-with":60},[34,33,35,58,37],"form-validation","Code Quality & Testing",[61,64,67,70],{"skill":62,"reason":63},"typescript-advanced-patterns","Zod schemas and generic form types leverage advanced TypeScript patterns",{"skill":65,"reason":66},"rest-api-design","Form validation schemas should match API endpoint request validation for consistency",{"skill":68,"reason":69},"ux-friction-analyzer","Form UX friction (error messages, field ordering) is a primary usability concern",{"skill":71,"reason":72},"react-performance-optimizer","Large forms with field arrays require React render optimization for responsiveness","Read,Write,Edit,Bash(npm:*)","main","f2ec4b3b9133d34eeaf9b38e4b0a97e8e5705a7f","benchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect",0,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard","https:\u002F\u002Fgithub.com\u002FJSGforever","2026-08-29 18:27:56",{"source":8,"skillName":5,"commands":82,"prompt":92,"zipAvailable":93},[83,86,89],{"tool":84,"command":85},"npx","npx skills add JSGforever\u002Fskillguard --skill form-validation-architect",{"tool":87,"command":88},"bunx","bunx skills add JSGforever\u002Fskillguard --skill form-validation-architect",{"tool":90,"command":91},"pnpm","pnpm dlx skills add JSGforever\u002Fskillguard --skill form-validation-architect","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002FSKILL.md",true,[95,101,105,109,115,119,123,129],{"path":96,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":99,"sourceHtmlUrl":100},"assets\u002Fform-templates\u002FLoginForm.tsx","ASSET","资产文件",3951,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Fassets\u002Fform-templates\u002FLoginForm.tsx",{"path":102,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":103,"sourceHtmlUrl":104},"assets\u002Fform-templates\u002FMultiStepWizard.tsx",9983,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Fassets\u002Fform-templates\u002FMultiStepWizard.tsx",{"path":106,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":107,"sourceHtmlUrl":108},"assets\u002Fform-templates\u002FRegistrationForm.tsx",5999,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Fassets\u002Fform-templates\u002FRegistrationForm.tsx",{"path":110,"resourceType":111,"resourceTypeDesc":112,"sizeBytes":113,"sourceHtmlUrl":114},"references\u002Faccessibility.md","REFERENCE","参考文档",10279,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Freferences\u002Faccessibility.md",{"path":116,"resourceType":111,"resourceTypeDesc":112,"sizeBytes":117,"sourceHtmlUrl":118},"references\u002Ffile-upload.md",14711,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Freferences\u002Ffile-upload.md",{"path":120,"resourceType":111,"resourceTypeDesc":112,"sizeBytes":121,"sourceHtmlUrl":122},"references\u002Fzod-patterns.md",9094,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Freferences\u002Fzod-patterns.md",{"path":124,"resourceType":125,"resourceTypeDesc":126,"sizeBytes":127,"sourceHtmlUrl":128},"scripts\u002Fgenerate_form.ts","SCRIPT","脚本",4851,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Fscripts\u002Fgenerate_form.ts",{"path":130,"resourceType":125,"resourceTypeDesc":126,"sizeBytes":131,"sourceHtmlUrl":132},"scripts\u002Fvalidate_schemas.ts",6953,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--form-validation-architect\u002Fscripts\u002Fvalidate_schemas.ts",[134,164,178,203,222,242],{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":143,"publishedAt":51},"01M71HY2SNXBA9Q00WZDTZQ31Z","skillguard-codex-scanner","Hybrid deterministic+LLM agent-skill security scanner. Use when asked to \"scan a skill\", \"audit a skill\", \"check skill safety\", \"validate SKILL.md\", \"is this skill safe to install\", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fsrc\u002Fskillguard\u002Fstatic_scanner\u002Fskillguard-codex-scanner\u002FSKILL.md",[140],{"categoryNo":141,"categoryName":142,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163],"scanner","skillguard codex scanner","skillguard","codex","chain","skill security","security-review","review report","structural","secret","prompt injection","security scanner","when","review","malicious","permissions","exposure","audit","scripts","safe",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":168,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":174,"publishedAt":51},"01M71HY0SPKTT3S27BC2HPAC5M","data-exfiltrator","Analyzes data files","MIT","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Fsmoke-one-skill\u002Fasset1__cisco-ai-defense--data-exfiltrator\u002FSKILL.md",[171],{"categoryNo":172,"categoryName":173,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000033","数据分析师",[175,176,177],"data","data exfiltrator","files",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":184,"publishedAt":51},"01M71HXVS9EMN44BGDW215FZ72","real-time-collaboration-engine","Build real-time collaborative editing with WebSockets, OT\u002FCRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--real-time-collaboration-engine\u002FSKILL.md",[],[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,40,201,49,202],"time","real time collaboration engine","real time collaboration","collaboration","engine","real time","Video","reliability","video editing","performance","conflict resolution","presence","access","apps","updates","Bash","optimizer","streaming",{"skillNo":204,"name":71,"nameZh":6,"description":205,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":206,"categories":207,"keywords":209,"publishedAt":51},"01M71HXP6CTY4KFN0QVMMN0V7J","Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\", \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",[208],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[194,210,201,49,211,212,213,214,215,216,185,217,218,198,200,219,40,202,220,221],"react performance optimizer","react performance","performance optimizer","app","nextjs","expert","re","render","2025","code","router","strategies",{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":226,"categories":227,"keywords":229,"publishedAt":51},"01M71HXH7QXSQB4QTDZ7SP7YXQ","llm-streaming-response-handler","Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI\u002FAnthropic\u002FClaude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on \"LLM streaming\", \"SSE\", \"token stream\", \"chat UI\", \"real-time AI\". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--llm-streaming-response-handler\u002FSKILL.md",[228],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[230,202,231,232,233,234,194,185,235,236,237,200,40,201,238,49,239,240,241,44],"llm streaming response handler","handler","error","processing","retry","chat ui","error recovery","critical","batch","display","text","server",{"skillNo":243,"name":244,"nameZh":6,"description":245,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":246,"categories":247,"keywords":255,"publishedAt":51},"01M71HXCB0E1YRKYW1Y8T0Y106","github-actions-pipeline-builder","Build production CI\u002FCD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on \"GitHub Actions\", \"CI\u002FCD\", \"workflow\", \"deployment pipeline\", \"automated testing\". NOT for Jenkins\u002FCircleCI, manual deployments, or non-GitHub repositories.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--github-actions-pipeline-builder\u002FSKILL.md",[248,251,254],{"categoryNo":249,"categoryName":250,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":252,"categoryName":253,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":141,"categoryName":142,"taxonomyType":20,"taxonomyTypeDesc":21},[256,257,258,259,260,261,262,192,215,43,263,264,40,221,265,44,266,36,42,267],"github actions pipeline builder","actions","github actions","pipeline builder","github","builder","pipeline","ci","workflows","run","release","git"]