_create-contact-page

Generate a secure i18n-aware contact page for Next.js with tRPC and shadcn/ui.

34|6|Updated Jun 30, 2026
One-click install
npx skills add https://github.com/flavien-ia/hypervibe-harness --skill create-contact-page
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: _create-contact-page
Source: https://github.com/flavien-ia/hypervibe-harness/tree/main/skills/_create-contact-page
Command: npx skills add https://github.com/flavien-ia/hypervibe-harness --skill create-contact-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form, @hookform/resolvers, zod.

What problem does it solve?

This skill eliminates the manual effort and security risks associated with building a contact form from scratch, ensuring your project has a functional, spam-protected communication channel without writing boilerplate code.

Core Features & Use Cases

  • Security-First Design: Implements invisible honeypot anti-spam, server-side rate limiting, and HTML injection protection by default.
  • Intelligent Integration: Automatically detects your email provider (Resend or Brevo), i18n settings, and existing UI dependencies to ensure seamless compatibility.
  • Use Case: You have just bootstrapped a new T3 project and need a professional contact page that works immediately with your existing email infrastructure and language settings.

Quick Start

Ask the assistant to add a contact page to your current project to automatically scaffold the form and configure the email backend.

Frequently Asked Questions about _create-contact-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a secure contact form to a Next.js and tRPC project?

To add a secure contact form to a Next.js and tRPC project, you can scaffold a production-ready page with server-side rate limiting, HTML injection protection, and spam honeypot fields automatically integrated.

Does this contact form generation support existing email providers like Resend or Brevo?

Yes, the contact form generation automatically detects existing email provider credentials for Resend or Brevo, configuring the backend infrastructure to route messages through your active provider without manual setup.

What dependencies are needed to set up a contact form with Zod validation?

Setting up a contact form with Zod validation requires react-hook-form, @hookform/resolvers, and zod as dependencies, alongside an existing Node.js and pnpm environment to install the UI and backend packages.

How does the generated contact page handle internationalization and shadcn/ui?

The generated contact page handles internationalization by detecting existing i18n settings in your project, while utilizing shadcn/ui components to ensure the form UI matches your current design system and visual standards.

What is the best way to prevent spam in an automated Next.js contact page?

The best way to prevent spam in an automated Next.js contact page is implementing invisible honeypot anti-spam mechanisms combined with server-side rate limiting, which blocks bots without adding user-facing CAPTCHA friction.

Can I use this contact form generator if I just bootstrapped a new T3 project?

Yes, you can use this contact form generator immediately after bootstrapping a new T3 project, as it targets Next.js and tRPC environments to instantly scaffold a professional contact page with your existing email settings.