Shadcn UI
jh941213/my-cc-harness
Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components.
Expert in Zod — TypeScript-first schema validation. An agent skill from davila7/claude-code-templates.
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davila7/claude-code-templates zod-validation-expert --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .claude/skills/zod-validation-expert && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .claude/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expertType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davila7/claude-code-templates zod-validation-expert --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .agents/skills/zod-validation-expert && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .agents/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davila7/claude-code-templates zod-validation-expert --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .cursor/skills/zod-validation-expert && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .cursor/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/davila7/claude-code-templates.git --path cli-tool/components/skills/web-development/zod-validation-expert--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davila7/claude-code-templates zod-validation-expert --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .gemini/skills/zod-validation-expert && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .gemini/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install davila7/claude-code-templates zod-validation-expertInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .github/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .github/skills/zod-validation-expert && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .github/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill zod-validation-expert -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install davila7/claude-code-templates zod-validation-expert --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cli-tool/components/skills/web-development/zod-validation-expert .opencode/skills/zod-validation-expert && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "zod-validation-expert" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/zod-validation-expert into .opencode/skills/zod-validation-expert/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zod-validation-expert", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
zod-validation-expertExpert in Zod — TypeScript-first schema validation. An agent skill from davila7/claude-code-templates.
Zod Validation Expert is an agent skill from davila7/claude-code-templates. Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Forms and validation and React components. It works with Zod, Next.js, TypeScript and tRPC. The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.
Read from SKILL.md and the folder at commit 46b4d8b. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Zod Validation Expert loads about 2.4k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 427 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from davila7/claude-code-templates at commit 46b4d8b, republished under its MIT licence (© davila7). 427 words, ~2,397 tokens.
.claude/skills/zod-validation-expert/SKILL.md (or your agent's skills folder).You are a production-grade Zod expert. You help developers build type-safe schema definitions and validation logic. You master Zod fundamentals (primitives, objects, arrays, records), type inference (z.infer), complex validations (.refine, .superRefine), transformations (.transform), and integrations across the modern TypeScript ecosystem (React Hook Form, Next.js API Routes / App Router Actions, tRPC, and environment variables).
process.env)@hookform/resolvers/zod)Zod eliminates the duplication of writing a TypeScript interface and a runtime validation schema. You define the schema once, and Zod infers the static TypeScript type. Note that Zod is for parsing, not just validation. safeParse and parse return clean, typed data, stripping out unknown keys by default.
import { z } from "zod";
// Basic primitives
const stringSchema = z.string().min(3).max(255);
const numberSchema = z.number().int().positive();
const dateSchema = z.date();
// Coercion (automatically casting inputs before validation)
// Highly useful for FormData in Next.js Server Actions or URL queries
const ageSchema = z.coerce.number().min(18); // "18" -> 18
const activeSchema = z.coerce.boolean(); // "true" -> true
const dobSchema = z.coerce.date(); // "2020-01-01" -> Date objectconst UserSchema = z.object({
id: z.string().uuid(),
username: z.string().min(3).max(20),
email: z.string().email(),
role: z.enum(["ADMIN", "USER", "GUEST"]).default("USER"),
age: z.number().min(18).optional(), // Can be omitted
website: z.string().url().nullable(), // Can be null
tags: z.array(z.string()).min(1), // Array with at least 1 item
});
// Infer the TypeScript type directly from the schema
// No need to write a separate `interface User { ... }`
export type User = z.infer<typeof UserSchema>;// Records (Objects with dynamic keys but specific value types)
const envSchema = z.record(z.string(), z.string()); // Record<string, string>
// Unions (OR)
const idSchema = z.union([z.string(), z.number()]); // string | number
// Or simpler:
const idSchema2 = z.string().or(z.number());
// Discriminated Unions (Type-safe switch cases)
const ActionSchema = z.discriminatedUnion("type", [
z.object({ type: z.literal("create"), id: z.string() }),
z.object({ type: z.literal("update"), id: z.string(), data: z.any() }),
z.object({ type: z.literal("delete"), id: z.string() }),
]);const schema = z.string().email();
// ❌ parse: Throws a ZodError if validation fails
try {
const email = schema.parse("invalid-email");
} catch (err) {
if (err instanceof z.ZodError) {
console.error(err.issues);
}
}
// ✅ safeParse: Returns a result object (No try/catch needed)
const result = schema.safeParse("user@example.com");
if (!result.success) {
// TypeScript narrows result to SafeParseError
console.log(result.error.format());
// Early return or throw domain error
} else {
// TypeScript narrows result to SafeParseSuccess
const validEmail = result.data; // Type is `string`
}const passwordSchema = z.string()
.min(8, { message: "Password must be at least 8 characters long" })
.max(100, { message: "Password is too long" })
.regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter" })
.regex(/[0-9]/, { message: "Password must contain at least one number" });
// Global custom error map (useful for i18n)
z.setErrorMap((issue, ctx) => {
if (issue.code === z.ZodIssueCode.invalid_type) {
if (issue.expected === "string") return { message: "This field must be text" };
}
return { message: ctx.defaultError };
});// Basic refinement
const passwordCheck = z.string().refine((val) => val !== "password123", {
message: "Password is too weak",
});
// Cross-field validation (e.g., password matching)
const formSchema = z.object({
password: z.string().min(8),
confirmPassword: z.string()
}).refine((data) => data.password === data.confirmPassword, {
message: "Passwords don't match",
path: ["confirmPassword"], // Sets the error on the specific field
});// Change data during parsing
const stringToNumber = z.string()
.transform((val) => parseInt(val, 10))
.refine((val) => !isNaN(val), { message: "Not a valid integer" });
// Now the inferred type is `number`, not `string`!
type TransformedResult = z.infer<typeof stringToNumber>; // numberimport { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
const loginSchema = z.object({
email: z.string().email("Invalid email address"),
password: z.string().min(6, "Password must be 6+ characters"),
});
type LoginFormValues = z.infer<typeof loginSchema>;
export function LoginForm() {
const { register, handleSubmit, formState: { errors } } = useForm<LoginFormValues>({
resolver: zodResolver(loginSchema)
});
const onSubmit = (data: LoginFormValues) => {
// data is fully typed and validated
console.log(data.email, data.password);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} />
{errors.email && <span>{errors.email.message}</span>}
{/* ... */}
</form>
);
}"use server";
import { z } from "zod";
// Coercion is critical here because FormData values are always strings
const createPostSchema = z.object({
title: z.string().min(3),
content: z.string().optional(),
published: z.coerce.boolean().default(false), // checkbox -> "on" -> true
});
export async function createPost(prevState: any, formData: FormData) {
// Convert FormData to standard object using Object.fromEntries
const rawData = Object.fromEntries(formData.entries());
const validatedFields = createPostSchema.safeParse(rawData);
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
};
}
// Proceed with validated database operation
const { title, content, published } = validatedFields.data;
// ...
return { success: true };
}// Make environment variables strictly typed and fail-fast
import { z } from "zod";
const envSchema = z.object({
DATABASE_URL: z.string().url(),
NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
PORT: z.coerce.number().default(3000),
API_KEY: z.string().min(10),
});
// Fails the build immediately if env vars are missing or invalid
const env = envSchema.parse(process.env);
export default env;z.infer<typeof Schema> everywhere instead of maintaining duplicate TypeScript interfaces manually.safeParse over parse to avoid scattered try/catch blocks and leverage TypeScript's control flow narrowing for robust error handling.z.coerce when accepting data from URLSearchParams or FormData, and be aware that z.coerce.boolean() converts standard "false"/"off" strings unexpectedly without custom preprocessing..flatten() or .format() on ZodError objects to easily extract serializable, human-readable errors for frontend consumption..partial() for update schemas if field types or constraints differ between creation and update operations; define distinct schemas instead.path option in .refine() or .superRefine() when performing object-level cross-field validations, otherwise the error won't attach to the correct input field.Problem: Type instantiation is excessively deep and possibly infinite.
Solution: This occurs with extreme schema recursion (e.g. deeply nested self-referential schemas). Use z.lazy(() => NodeSchema) for recursive structures and define the base TypeScript type explicitly instead of solely inferring it.
Problem: Empty strings pass validation when using .optional().
Solution: .optional() permits undefined, not empty strings. If an empty string means "no value," use .or(z.literal("")) or preprocess it: z.string().transform(v => v === "" ? undefined : v).optional().
© davila7, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in cli-tool/components/skills/web-development/zod-validation-expert of davila7/claude-code-templates.
Open the folder on GitHubat commit 46b4d8b
We found 12 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in davila7/claude-code-templates, which our catalogue first saw on October 7, 2026.
Zod Validation Expert next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Zod Validation Expert this skilldavila7/claude-code-templates | 32k | 3 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Shadcn UIjh941213/my-cc-harness | 126 | 4 repos | ~9.7k | Automated safety check: Notes | MIT | |
| Buzzformbuildnbuzz/buzzform | 102 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Frontend Patterns Templatebybren-llc/safe-agentic-workflow | 423 | — | ~2k | Automated safety check: Pass | MIT | |
| React Idiomsirahardianto/awesome-agv | 157 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Typescript Patternssoftspark/ai-toolkit | 179 | — | ~1.6k | Automated safety check: Pass | Apache-2.0 |
jh941213/my-cc-harness
Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components.
buildnbuzz/buzzform
A skill your agent uses when working with BuzzForm schema-driven forms, @buildnbuzz/form-core, @buildnbuzz/form-react, or any related APIs like defineSchema, InferType, FormProvider, useDataField…
bybren-llc/safe-agentic-workflow
Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing…
irahardianto/awesome-agv
React 19+ patterns: custom hooks, Suspense boundaries, state management, component composition, and web performance.
softspark/ai-toolkit
TypeScript types: generics, discriminated unions, Zod, satisfies, branded types.
ChrisWiles/claude-code-showcase
Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.
davila7/claude-code-templates
Runs web-grounded searches through Perplexity's Sonar models over OpenRouter for current events, recent literature and cited facts beyond the model's training cutoff.
davila7/claude-code-templates
Analyzes Neuropixels recordings from SpikeGLX or Open Ephys through preprocessing, drift correction, Kilosort4 spike sorting, quality metrics and curation.
davila7/claude-code-templates
Supplies LaTeX templates and formatting rules for journals, conferences, posters, and grant proposals, then can check a draft against them.
davila7/claude-code-templates
Analyzes a brand's existing writing to lock in a consistent voice, then builds SEO blog posts and platform-specific social content around it.
davila7/claude-code-templates
Guides corrective and preventive action (CAPA) work in a quality management system, from initiation and root cause analysis through effectiveness verification.
davila7/claude-code-templates
Senior FDA consultant and specialist for medical device companies including HIPAA compliance and requirement management.
Works with
Categories
Expert in Zod — TypeScript-first schema validation. An agent skill from davila7/claude-code-templates. Zod Validation Expert is an agent skill from davila7/claude-code-templates. Expert in Zod — TypeScript-first schema validation.
Zod Validation Expert fits situations like: tasks that involve Forms and validation; tasks that involve React components.
Run `npx skills add davila7/claude-code-templates --skill zod-validation-expert -a claude-code`. Or copy the skill folder (cli-tool/components/skills/web-development/zod-validation-expert in davila7/claude-code-templates) into .claude/skills/zod-validation-expert in your project. Claude Code loads it when a task matches its description.
Run `npx skills add davila7/claude-code-templates --skill zod-validation-expert -a codex`. Or copy the skill folder (cli-tool/components/skills/web-development/zod-validation-expert in davila7/claude-code-templates) into .agents/skills/zod-validation-expert in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill zod-validation-expert -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/zod-validation-expert, .gemini/skills/zod-validation-expert, .github/skills/zod-validation-expert and .opencode/skills/zod-validation-expert in your project.
Going by SKILL.md and its folder, Zod Validation Expert needs credentials named API_KEY. Our summary lists: A credential in API_KEY.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Zod Validation Expert is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.4k tokens (SKILL.md is roughly 9.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Zod Validation Expert: Shadcn UI (jh941213/my-cc-harness, 126 stars), Buzzform (buildnbuzz/buzzform, 102 stars), Frontend Patterns Template (bybren-llc/safe-agentic-workflow, 423 stars) and React Idioms (irahardianto/awesome-agv, 157 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,483 GitHub stars. The repository holds 478 skills in this directory. The repository was last updated on October 9, 2026.
Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.