devendra-skill-package 1.0.2

package/.github/skills/validation-engine-builder/scripts/generate-react-native.js

@@ -0,0 +1,217 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+
+const { readTemplate, ensureDir, relativeImportPath } = require('./shared/util.js');
+const { genMessages, genRegex }   = require('./shared/ts-messages-regex.js');
+const { genSchemas }              = require('./shared/yup-schemas.js');
+const { genHook }                 = require('./shared/rhf-hook.js');
+
+// ── ValidationError.tsx (React Native — Text + StyleSheet) ──────────────────────
+
+function genValidationError(outDir) {
+  const content = [
+    `// Auto-generated by validation-engine-builder skill. DO NOT EDIT MANUALLY.`,
+    ``,
+    `import React from 'react';`,
+    `import { Text, StyleSheet } from 'react-native';`,
+    ``,
+    `interface Props {`,
+    `  message?: string;`,
+    `}`,
+    ``,
+    `/**`,
+    ` * Displays a Yup validation error message below a TextInput.`,
+    ` * Returns null when message is undefined (no layout space consumed).`,
+    ` *`,
+    ` * Usage:`,
+    ` *   <ValidationError message={errors.email?.message} />`,
+    ` */`,
+    `export const ValidationError: React.FC<Props> = ({ message }) => {`,
+    `  if (!message) return null;`,
+    `  return <Text style={styles.error}>{message}</Text>;`,
+    `};`,
+    ``,
+    `const styles = StyleSheet.create({`,
+    `  error: {`,
+    `    color: '#DC2626',`,
+    `    fontSize: 12,`,
+    `    marginTop: 4,`,
+    `    marginLeft: 2,`,
+    `  },`,
+    `});`,
+  ].join('\n');
+
+  fs.writeFileSync(path.join(outDir, 'ValidationError.tsx'), content);
+  console.log('  ✅ ValidationError.tsx');
+}
+
+// ── Screen scaffold ───────────────────────────────────────────────────────────
+
+function getTextInputProps(fieldName, rules) {
+  const regex = rules.regex || '';
+  const props = [];
+
+  if (['password', 'confirmPassword', 'newPassword', 'currentPassword'].includes(fieldName)) {
+    props.push('secureTextEntry={true}');
+  }
+  if (regex === 'email' || fieldName === 'email') {
+    props.push('keyboardType="email-address"', 'autoCapitalize="none"');
+  } else if (regex === 'phone' || ['phone', 'phoneNumber', 'mobile'].includes(fieldName)) {
+    props.push('keyboardType="phone-pad"');
+  } else if (regex === 'otp' || fieldName === 'otp') {
+    props.push('keyboardType="number-pad"', 'maxLength={6}');
+  } else if (regex === 'numericOnly' || rules.type === 'number') {
+    props.push('keyboardType="numeric"');
+  } else if (regex === 'name' || ['name', 'fullName', 'firstName', 'lastName'].includes(fieldName)) {
+    props.push('autoCapitalize="words"');
+  } else if (regex === 'url' || fieldName === 'url' || fieldName === 'website') {
+    props.push('keyboardType="url"', 'autoCapitalize="none"');
+  }
+
+  return props.length > 0 ? '\n              ' + props.join('\n              ') : '';
+}
+
+function generateScreen(projectRoot, screenName, schemaKey, screenPath, schemasRaw) {
+  const fields = schemasRaw[schemaKey];
+  if (!fields) {
+    console.log(`\n  ⚠️  Schema "${schemaKey}" not found in schemas.json.`);
+    console.log(`  Available schemas: ${Object.keys(schemasRaw).join(', ')}`);
+    return;
+  }
+
+  const screenDir = path.join(projectRoot, screenPath, screenName);
+  ensureDir(screenDir);
+
+  const validationOutDir = path.join(projectRoot, 'src', 'validation');
+  const validationImportPath = relativeImportPath(screenDir, validationOutDir);
+
+  const controllerBlocks = Object.entries(fields).map(([fieldName, rules]) => {
+    const placeholder = rules.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
+    const extraProps = getTextInputProps(fieldName, rules);
+
+    return [
+      `      <Controller`,
+      `        control={control}`,
+      `        name="${fieldName}"`,
+      `        render={({ field: { onChange, onBlur, value } }) => (`,
+      `          <View style={styles.fieldContainer}>`,
+      `            <TextInput`,
+      `              style={[styles.input, errors.${fieldName} && styles.inputError]}`,
+      `              placeholder="${placeholder}"`,
+      `              onChangeText={onChange}`,
+      `              onBlur={onBlur}`,
+      `              value={value ?? ''}${extraProps}`,
+      `            />`,
+      `            <ValidationError message={errors.${fieldName}?.message} />`,
+      `          </View>`,
+      `        )}`,
+      `      />`,
+    ].join('\n');
+  });
+
+  const content = [
+    `import React from 'react';`,
+    `import {`,
+    `  View,`,
+    `  TextInput,`,
+    `  TouchableOpacity,`,
+    `  Text,`,
+    `  StyleSheet,`,
+    `  ScrollView,`,
+    `} from 'react-native';`,
+    `import { Controller } from 'react-hook-form';`,
+    `import { useValidatedForm } from '${validationImportPath}/useValidatedForm';`,
+    `import { ValidationError } from '${validationImportPath}/ValidationError';`,
+    `import { schemas, FormData } from '${validationImportPath}/schemas';`,
+    ``,
+    `const ${screenName} = () => {`,
+    `  const {`,
+    `    control,`,
+    `    handleSubmit,`,
+    `    formState: { errors },`,
+    `  } = useValidatedForm(schemas.${schemaKey});`,
+    ``,
+    `  const onSubmit = (data: FormData<'${schemaKey}'>) => {`,
+    `    console.log('${screenName} submit:', data);`,
+    `    // TODO: Add your submit logic here`,
+    `  };`,
+    ``,
+    `  return (`,
+    `    <ScrollView contentContainerStyle={styles.container}>`,
+    ...controllerBlocks,
+    `      <TouchableOpacity style={styles.button} onPress={handleSubmit(onSubmit)}>`,
+    `        <Text style={styles.buttonText}>Submit</Text>`,
+    `      </TouchableOpacity>`,
+    `    </ScrollView>`,
+    `  );`,
+    `};`,
+    ``,
+    `export default ${screenName};`,
+    ``,
+    `const styles = StyleSheet.create({`,
+    `  container: {`,
+    `    flexGrow: 1,`,
+    `    padding: 24,`,
+    `    backgroundColor: '#FFFFFF',`,
+    `  },`,
+    `  fieldContainer: {`,
+    `    marginBottom: 16,`,
+    `  },`,
+    `  input: {`,
+    `    borderWidth: 1,`,
+    `    borderColor: '#D1D5DB',`,
+    `    borderRadius: 8,`,
+    `    paddingHorizontal: 16,`,
+    `    paddingVertical: 12,`,
+    `    fontSize: 16,`,
+    `    color: '#111827',`,
+    `    backgroundColor: '#F9FAFB',`,
+    `  },`,
+    `  inputError: {`,
+    `    borderColor: '#DC2626',`,
+    `  },`,
+    `  button: {`,
+    `    backgroundColor: '#0EA5E9',`,
+    `    borderRadius: 8,`,
+    `    paddingVertical: 14,`,
+    `    alignItems: 'center',`,
+    `    marginTop: 8,`,
+    `  },`,
+    `  buttonText: {`,
+    `    color: '#FFFFFF',`,
+    `    fontSize: 16,`,
+    `    fontWeight: '600',`,
+    `  },`,
+    `});`,
+  ].join('\n');
+
+  const outFile = path.join(screenDir, `${screenName}.tsx`);
+  fs.writeFileSync(outFile, content);
+  console.log(`  ✅ ${screenName}.tsx → ${screenPath}/${screenName}/`);
+}
+
+// ── Main export ───────────────────────────────────────────────────────────────
+
+function generate(projectRoot) {
+  const outDir = path.join(projectRoot, 'src', 'validation');
+  ensureDir(outDir);
+
+  console.log('\n📁 Generating src/validation/ (React Native) ...');
+
+  const messages   = readTemplate('messages.json');
+  const regexMap   = readTemplate('regex.json');
+  const schemasRaw = readTemplate('schemas.json');
+
+  genMessages(messages, outDir);
+  genRegex(regexMap, outDir);
+  genSchemas(schemasRaw, outDir);
+  genHook(outDir);
+  genValidationError(outDir);
+
+  return schemasRaw;
+}
+
+module.exports = { generate, generateScreen };

package/.github/skills/validation-engine-builder/scripts/generate-react.js

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+
+const { readTemplate, ensureDir, relativeImportPath } = require('./shared/util.js');
+const { genMessages, genRegex }   = require('./shared/ts-messages-regex.js');
+const { genSchemas }              = require('./shared/yup-schemas.js');
+const { genHook }                 = require('./shared/rhf-hook.js');
+
+// ── ValidationError.tsx (React web — plain <span>, no RN import) ────────────────
+
+function genValidationError(outDir) {
+  const content = [
+    `// Auto-generated by validation-engine-builder skill. DO NOT EDIT MANUALLY.`,
+    ``,
+    `import React from 'react';`,
+    ``,
+    `interface Props {`,
+    `  message?: string;`,
+    `}`,
+    ``,
+    `const errorStyle: React.CSSProperties = {`,
+    `  color: '#DC2626',`,
+    `  fontSize: 12,`,
+    `  marginTop: 4,`,
+    `  marginLeft: 2,`,
+    `  display: 'block',`,
+    `};`,
+    ``,
+    `/**`,
+    ` * Displays a Yup validation error message below an input.`,
+    ` * Returns null when message is undefined (no layout space consumed).`,
+    ` * Uses an inline style so it works with zero assumptions about the`,
+    ` * project's CSS setup — replace with the project's own class/CSS module`,
+    ` * if one already exists.`,
+    ` *`,
+    ` * Usage:`,
+    ` *   <ValidationError message={errors.email?.message} />`,
+    ` */`,
+    `export const ValidationError: React.FC<Props> = ({ message }) => {`,
+    `  if (!message) return null;`,
+    `  return <span style={errorStyle}>{message}</span>;`,
+    `};`,
+  ].join('\n');
+
+  fs.writeFileSync(path.join(outDir, 'ValidationError.tsx'), content);
+  console.log('  ✅ ValidationError.tsx');
+}
+
+// ── Page scaffold ─────────────────────────────────────────────────────────────
+
+function getInputProps(fieldName, rules) {
+  const regex = rules.regex || '';
+  const props = [];
+
+  if (['password', 'confirmPassword', 'newPassword', 'currentPassword'].includes(fieldName)) {
+    props.push(`type="password"`);
+  } else if (regex === 'email' || fieldName === 'email') {
+    props.push(`type="email"`, `autoComplete="email"`);
+  } else if (rules.type === 'number' || regex === 'numericOnly') {
+    props.push(`type="number"`);
+  } else if (regex === 'url' || fieldName === 'url' || fieldName === 'website') {
+    props.push(`type="url"`);
+  } else {
+    props.push(`type="text"`);
+  }
+  if (fieldName === 'otp') props.push(`maxLength={6}`);
+
+  return '\n            ' + props.join('\n            ');
+}
+
+function generateScreen(projectRoot, pageName, schemaKey, pagePath, schemasRaw) {
+  const fields = schemasRaw[schemaKey];
+  if (!fields) {
+    console.log(`\n  ⚠️  Schema "${schemaKey}" not found in schemas.json.`);
+    console.log(`  Available schemas: ${Object.keys(schemasRaw).join(', ')}`);
+    return;
+  }
+
+  const pageDir = path.join(projectRoot, pagePath, pageName);
+  ensureDir(pageDir);
+
+  const validationOutDir = path.join(projectRoot, 'src', 'validation');
+  const validationImportPath = relativeImportPath(pageDir, validationOutDir);
+
+  // Native <input> elements integrate with react-hook-form via register() —
+  // Controller is only needed for custom/controlled components, unlike RN's
+  // TextInput which requires Controller. Do not port the RN Controller
+  // pattern to plain HTML inputs.
+  const fieldBlocks = Object.entries(fields).map(([fieldName, rules]) => {
+    const label = rules.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
+    const inputProps = getInputProps(fieldName, rules);
+
+    return [
+      `        <div style={{ marginBottom: 16 }}>`,
+      `          <label htmlFor="${fieldName}">${label}</label>`,
+      `          <input`,
+      `            id="${fieldName}"${inputProps}`,
+      `            {...register('${fieldName}')}`,
+      `          />`,
+      `          <ValidationError message={errors.${fieldName}?.message} />`,
+      `        </div>`,
+    ].join('\n');
+  });
+
+  const content = [
+    `import React from 'react';`,
+    `import { useValidatedForm } from '${validationImportPath}/useValidatedForm';`,
+    `import { ValidationError } from '${validationImportPath}/ValidationError';`,
+    `import { schemas, FormData } from '${validationImportPath}/schemas';`,
+    ``,
+    `const ${pageName} = () => {`,
+    `  const {`,
+    `    register,`,
+    `    handleSubmit,`,
+    `    formState: { errors },`,
+    `  } = useValidatedForm(schemas.${schemaKey});`,
+    ``,
+    `  const onSubmit = (data: FormData<'${schemaKey}'>) => {`,
+    `    console.log('${pageName} submit:', data);`,
+    `    // TODO: Add your submit logic here`,
+    `  };`,
+    ``,
+    `  return (`,
+    `    <form onSubmit={handleSubmit(onSubmit)}>`,
+    ...fieldBlocks,
+    `      <button type="submit">Submit</button>`,
+    `    </form>`,
+    `  );`,
+    `};`,
+    ``,
+    `export default ${pageName};`,
+  ].join('\n');
+
+  const outFile = path.join(pageDir, `${pageName}.tsx`);
+  fs.writeFileSync(outFile, content);
+  console.log(`  ✅ ${pageName}.tsx → ${pagePath}/${pageName}/`);
+}
+
+// ── Main export ───────────────────────────────────────────────────────────────
+
+function generate(projectRoot) {
+  const outDir = path.join(projectRoot, 'src', 'validation');
+  ensureDir(outDir);
+
+  console.log('\n📁 Generating src/validation/ (React web) ...');
+
+  const messages   = readTemplate('messages.json');
+  const regexMap   = readTemplate('regex.json');
+  const schemasRaw = readTemplate('schemas.json');
+
+  genMessages(messages, outDir);
+  genRegex(regexMap, outDir);
+  genSchemas(schemasRaw, outDir);
+  genHook(outDir);
+  genValidationError(outDir);
+
+  return schemasRaw;
+}
+
+module.exports = { generate, generateScreen };

package/.github/skills/validation-engine-builder/scripts/install-deps.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * install-deps.js
+ * Installs react-hook-form, @hookform/resolvers, yup at versions compatible
+ * with the project — React Native / React only. Angular ships Reactive Forms
+ * with the framework and Flutter needs no package at all, so this is a no-op
+ * (with an explanatory message) on those two platforms.
+ *
+ * Usage:
+ *   node .github/skills/validation-engine-builder/scripts/install-deps.js
+ *   node .github/skills/validation-engine-builder/scripts/install-deps.js --projectPath MyApp
+ *   node .github/skills/validation-engine-builder/scripts/install-deps.js --platform react
+ *   node .github/skills/validation-engine-builder/scripts/install-deps.js --dryRun
+ */
+
+const path = require('path');
+
+const { detectPlatform } = require('./shared/detect-platform.js');
+const { ensureDeps }     = require('./shared/npm-deps.js');
+
+function parseArgs(argv) {
+  const parsed = {};
+  for (let i = 0; i < argv.length; i++) {
+    const token = argv[i];
+    if (!token.startsWith('--')) continue;
+    const key  = token.slice(2);
+    const next = argv[i + 1];
+    if (!next || next.startsWith('--')) { parsed[key] = true; continue; }
+    parsed[key] = next;
+    i++;
+  }
+  return parsed;
+}
+
+function main() {
+  const args        = parseArgs(process.argv.slice(2));
+  const projectRoot = args.projectPath ? path.resolve(args.projectPath) : process.cwd();
+  const platform     = args.platform || detectPlatform(projectRoot);
+
+  if (!platform) {
+    console.error('ERROR: Could not determine the target platform.');
+    console.error('Re-run with --platform <react-native|react|angular|flutter>.');
+    process.exit(1);
+  }
+
+  console.log(`Platform: ${platform}${args.platform ? ' (explicit override)' : ' (detected)'}`);
+
+  ensureDeps(projectRoot, platform, { dryRun: !!args.dryRun });
+}
+
+main();

package/.github/skills/validation-engine-builder/scripts/shared/detect-platform.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * Detects which of the 4 supported platforms the target project is.
+ * Mirrors the detection signals used by the clean-architecture-generator skill
+ * so both skills agree on what "React Native" / "React" / "Angular" / "Flutter"
+ * mean for the same repo.
+ *
+ * Returns one of: 'react-native' | 'react' | 'angular' | 'flutter' | null
+ * Returns null when no signal matches — callers MUST ask the user rather than
+ * silently defaulting to a platform.
+ */
+
+const fs   = require('fs');
+const path = require('path');
+
+function readJsonSafe(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+  } catch {
+    return null;
+  }
+}
+
+function detectPlatform(projectRoot) {
+  // 1. Flutter — pubspec.yaml with a flutter: SDK entry under dependencies
+  const pubspecPath = path.join(projectRoot, 'pubspec.yaml');
+  if (fs.existsSync(pubspecPath)) {
+    const pubspec = fs.readFileSync(pubspecPath, 'utf-8');
+    if (/\bflutter\s*:\s*\n\s*sdk\s*:\s*flutter/m.test(pubspec) || /^\s*flutter\s*:/m.test(pubspec)) {
+      return 'flutter';
+    }
+  }
+
+  // 2. Angular — angular.json at the project root
+  if (fs.existsSync(path.join(projectRoot, 'angular.json'))) {
+    return 'angular';
+  }
+
+  // 3. React Native / React — package.json dependency inspection
+  const pkgPath = path.join(projectRoot, 'package.json');
+  const pkg = readJsonSafe(pkgPath);
+  if (pkg) {
+    const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+    if (deps['react-native']) return 'react-native';
+    if (deps['react'] && deps['react-dom']) return 'react';
+  }
+
+  return null;
+}
+
+function detectReactSubVariant(projectRoot) {
+  const pkg = readJsonSafe(path.join(projectRoot, 'package.json'));
+  if (!pkg) return null;
+  const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+  if (deps['next']) return 'nextjs';
+  if (deps['react-scripts']) return 'cra';
+  if (deps['vite']) return 'vite';
+  return null;
+}
+
+function detectAngularStandalone(projectRoot) {
+  return fs.existsSync(path.join(projectRoot, 'src', 'app', 'app.config.ts')) &&
+    !fs.existsSync(path.join(projectRoot, 'src', 'app', 'app.module.ts'));
+}
+
+module.exports = { detectPlatform, detectReactSubVariant, detectAngularStandalone };

package/.github/skills/validation-engine-builder/scripts/shared/npm-deps.js

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * react-hook-form + @hookform/resolvers + yup — the dependency set this skill
+ * installs for React Native and React (web) only. Angular ships Reactive
+ * Forms (@angular/forms) as part of the framework — nothing to install.
+ * Flutter's TextFormField.validator needs no package at all. See
+ * ensureDeps() below for how each platform is handled.
+ */
+
+const { execSync } = require('child_process');
+const fs           = require('fs');
+const path         = require('path');
+
+const REQUIRED_DEPS = ['react-hook-form', '@hookform/resolvers', 'yup'];
+
+function readPkg(projectRoot) {
+  const pkgPath = path.join(projectRoot, 'package.json');
+  if (!fs.existsSync(pkgPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+  } catch {
+    return null;
+  }
+}
+
+function getReactNativeVersion(projectRoot) {
+  const pkg = readPkg(projectRoot);
+  if (!pkg) return null;
+  const raw = pkg.dependencies?.['react-native'] || pkg.devDependencies?.['react-native'] || '';
+  const m = raw.match(/(\d+\.\d+)/);
+  return m ? parseFloat(m[1]) : null;
+}
+
+/**
+ * Version table verified against React Native compatibility only. For plain
+ * React (web), there is no RN version to gate on — this applies the same
+ * "current" tier as a reasonable default; if a long time has passed since
+ * this skill was last updated, verify against npm before installing rather
+ * than trusting these pins blindly.
+ */
+function getCompatibleVersions(rnVersion) {
+  if (rnVersion === null || rnVersion >= 0.80) {
+    return { 'react-hook-form': '^7.54.0', '@hookform/resolvers': '^3.9.0', 'yup': '^1.4.0' };
+  }
+  if (rnVersion >= 0.73) {
+    return { 'react-hook-form': '^7.51.0', '@hookform/resolvers': '^3.4.0', 'yup': '^1.3.0' };
+  }
+  return { 'react-hook-form': '^7.43.0', '@hookform/resolvers': '^3.1.0', 'yup': '^1.0.0' };
+}
+
+/**
+ * platform: 'react-native' | 'react' | 'angular' | 'flutter'
+ * options: { skipInstall?: boolean, dryRun?: boolean }
+ */
+function ensureDeps(projectRoot, platform, options = {}) {
+  if (platform === 'angular') {
+    console.log('  Angular Reactive Forms (@angular/forms) ships with the framework — nothing to install.');
+    return;
+  }
+  if (platform === 'flutter') {
+    console.log('  Flutter TextFormField.validator needs no pub package — nothing to install.');
+    return;
+  }
+
+  if (options.skipInstall) return;
+
+  const pkg = readPkg(projectRoot);
+  if (!pkg) {
+    console.log('  package.json not found — skipping install');
+    return;
+  }
+
+  const allDeps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+  const missing = REQUIRED_DEPS.filter((d) => !allDeps[d]);
+
+  if (missing.length === 0) {
+    console.log(`  ${REQUIRED_DEPS.join(', ')} — already installed`);
+    return;
+  }
+
+  const rnVersion  = platform === 'react-native' ? getReactNativeVersion(projectRoot) : null;
+  const versions   = getCompatibleVersions(rnVersion);
+  const installStr = missing.map((d) => `${d}@${versions[d]}`).join(' ');
+  const cmd         = `npm install ${installStr} --legacy-peer-deps`;
+
+  console.log(`\n  Installing: ${installStr}`);
+
+  if (options.dryRun) {
+    console.log('  (dry run — not executing)');
+    return;
+  }
+
+  try {
+    execSync(cmd, { cwd: projectRoot, stdio: 'inherit' });
+    console.log('  Dependencies installed');
+  } catch {
+    console.log(`  Auto-install failed. Run manually: ${cmd}`);
+  }
+}
+
+module.exports = { REQUIRED_DEPS, getReactNativeVersion, getCompatibleVersions, ensureDeps };

package/.github/skills/validation-engine-builder/scripts/shared/rhf-hook.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * Emits useValidatedForm.ts — a typed react-hook-form wrapper. react-hook-form
+ * is a React library (not React-Native-specific), so this is shared verbatim
+ * by React Native and React (web). Angular and Flutter have no react-hook-form
+ * equivalent — Angular uses FormBuilder/FormGroup directly, Flutter uses
+ * GlobalKey<FormState>. Neither generates this file.
+ */
+
+const fs   = require('fs');
+const path = require('path');
+
+function genHook(outDir) {
+  const content = [
+    `// Auto-generated by validation-engine-builder skill. DO NOT EDIT MANUALLY.`,
+    ``,
+    `import { useForm } from 'react-hook-form';`,
+    `import { yupResolver } from '@hookform/resolvers/yup';`,
+    `import * as yup from 'yup';`,
+    ``,
+    `/**`,
+    ` * Typed form hook wrapping react-hook-form with Yup validation.`,
+    ` *`,
+    ` * Usage:`,
+    ` *   const { control, handleSubmit, formState: { errors } } =`,
+    ` *     useValidatedForm(schemas.login);`,
+    ` */`,
+    `export function useValidatedForm<T extends yup.AnyObjectSchema>(schema: T) {`,
+    `  return useForm<yup.InferType<T>>({`,
+    `    resolver: yupResolver(schema) as any,`,
+    `    mode: 'onBlur',`,
+    `    reValidateMode: 'onChange',`,
+    `  });`,
+    `}`,
+  ].join('\n');
+
+  fs.writeFileSync(path.join(outDir, 'useValidatedForm.ts'), content);
+  console.log('  ✅ useValidatedForm.ts');
+}
+
+module.exports = { genHook };