Examples
Real-world validation rules you can use in your projects.
Included Examples
The framework includes two production-ready validation rules:
Nuxt UI Validation
Validates Nuxt UI component usage and enforces v4 migration patterns.
- Catches deprecated components (UFormGroup → UFormField)
- Validates semantic color props
- Enforces v4 naming conventions
Vue defineModel Enforcement
Enforces use of Vue 3's defineModel() macro instead of manual v-model implementation.
- Detects modelValue prop + update:modelValue emit pattern
- Suggests using defineModel() instead
- Catches various prop definition patterns
More Examples
Browse more examples organized by category:
- Nuxt UI Migration - Enforce Nuxt UI v4 patterns
- Vue defineModel - Modern Vue 3 patterns
- Security - Prevent security issues
- Code Quality - Enforce best practices
Creating Your Own
Start with a template:
import { defineCodeRule } from "@syncrolabs/claude-code-validator";
export const myRule = defineCodeRule({
name: "my-rule",
description: "Description here",
shouldRun: (context) => {
// Only run on relevant files
return context.filePath.endsWith(".ts");
},
validate(context) {
const errors: string[] = [];
// Your validation logic here
if (context.content.includes("pattern-to-check")) {
errors.push(
`❌ Error description\n` +
` → Suggested fix\n` +
` 📄 File: ${context.filePath}`
);
}
return errors;
},
});
Testing Examples
All examples can be tested using the CLI:
# List all rules
bunx @syncrolabs/claude-code-validator list-rules
# Test with example input
echo '{"tool_name":"Edit","tool_input":{"file_path":"test.vue","new_string":"<UFormGroup>"}}' | \
bunx @syncrolabs/claude-code-validator validate