Skills
.Work. You
Rest

shadcn-syntax-input-otp

Official

Build OTP inputs that never render empty.

Software Engineering#pattern validation#react-hook-form#inputotp#otp verification#sms autofill#nextjs client component
AuthorImpertio-Studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents common InputOTP failures in shadcn ui projects, like missing maxLength causing zero visible slots, incorrect pattern usage rejecting input, and wrong react-hook-form wiring that breaks controlled OTP behavior.

Core Features & Use Cases

  • Correct InputOTP slot composition: Ensures the number of InputOTPSlot components matches maxLength, and each slot receives the proper index for the correct character to render.
  • Reliable character constraints: Uses the library-exported regex source constants (and regex source strings) so pattern validation works for numeric, alphanumeric, or letter-only OTP formats.
  • Production-grade integration: Demonstrates the canonical Next.js/client boundary and the correct react-hook-form Controller approach, including onComplete and autoComplete="one-time-code" for SMS autofill.

Quick Start

Use shadcn-syntax-input-otp to generate a 6-digit verification code input with InputOTP, slots with matching indices, numeric pattern validation, and react-hook-form Controller wiring for the field value.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-syntax-input-otp
Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-syntax-input-otp

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.