Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
日本語の概要は準備中です。原文の説明を表示しています。
Programmatic code style validation using AST analysis. Complements (not replaces) code-style rules by providing automated checking and instant feedback.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
No separate download: the skill runs the in-repo tool .claude/tools/cli/security-lint.cjs.
winget install OpenJS.NodeJS.LTS (Windows), brew install node (macOS).AST-based validation: Use ESLint (or equivalent) with selectors/patterns; rules listen for specific node types. Prefer existing community rules before writing custom ones; custom rules need meta (type, fixable, schema) and create.
Process: Check naming (camelCase/PascalCase/snake_case), indentation, import order, function/class structure, comment style. Run in pre-commit and CI; provide auto-fix where possible.
Hacks: Use --fix for auto-fixable rules; combine with security-lint for policy. Define rule metadata clearly for docs and tooling. Use AST selectors for precise pattern matching (node type, attributes, child/sibling).
ESLint: Use in project, custom rules, selectors. No cert; skill data: AST-based validation, pre-commit/CI, auto-fix, naming/indent/imports.
Suggested hooks: Pre-commit: run security-lint (skill script) or ESLint; block commit on failure. Use with developer (secondary), code-reviewer (secondary), qa (CI).
Workflows: Use with code-reviewer (secondary), developer (secondary). Flow: before commit or in CI → run validator → fix or block. See code-review-workflow.md, validation hooks.
Analyze the codebase to identify style patterns:
Use language-specific AST parsers:
TypeScript/JavaScript: </execution_process> </instructions>
<examples> <code_example> **TypeScript/JavaScript AST Validation**:const ts = require('typescript');
const fs = require('fs');
function validateTypeScriptFile(filePath) {
const sourceCode = fs.readFileSync(filePath, 'utf8');
const sourceFile = ts.createSourceFile(filePath, sourceCode, ts.ScriptTarget.Latest, true);
const issues = [];
// Validate naming conventions
ts.forEachChild(sourceFile, node => {
if (ts.isFunctionDeclaration(node) && node.name) {
if (!/^[a-z][a-zA-Z0-9]*$/.test(node.name.text)) {
issues.push({
line: sourceFile.getLineAndCharacterOfPosition(node.name.getStart()).line + 1,
message: `Function name "${node.name.text}" should be camelCase`,
});
}
}
});
return issues;
}
</code_example>
<code_example> Python AST Validation:
import ast
import re
def validate_python_file(file_path):
with open(file_path, 'r') as f:
source_code = f.read()
tree = ast.parse(source_code)
issues = []
for node in ast.walk(tree):
if isinstance(node, ast.FunctionDef):
if not re.match(r'^[a-z][a-z0-9_]*$', node.name):
issues.append({
'line': node.lineno,
'message': f'Function name "{node.name}" should be snake_case'
})
return issues
</code_example>
<code_example> Style Checks:
Naming Conventions:
Formatting:
Structure:
<code_example> Usage Examples (Template - implement validator first):
Validate Single File:
# After implementing your validator:
node validate-code-style.js src/components/Button.tsx
Validate Directory:
# After implementing your validator:
node validate-code-style.js src/components/
Output Format:
{
"file": "src/components/Button.tsx",
"valid": false,
"issues": [
{
"line": 15,
"column": 10,
"rule": "naming-convention",
"message": "Variable 'UserData' should be camelCase: 'userData'",
"severity": "error"
},
{
"line": 23,
"column": 5,
"rule": "indentation",
"message": "Expected 2 spaces, found 4",
"severity": "warning"
}
],
"summary": {
"total": 2,
"errors": 1,
"warnings": 1
}
}
</code_example>
<code_example> Pre-commit Hook (Template - implement validator first):
#!/bin/bash
# .git/hooks/pre-commit
changed_files=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(ts|tsx|js|jsx|py)$')
for file in $changed_files; do
# Replace with your actual validator path
if ! node validate-code-style.js "$file"; then
echo "Code style validation failed for $file"
exit 1
fi
done
</code_example>
<code_example> CI/CD Integration (Template - implement validator first):
# .github/workflows/code-style.yml
- name: Validate code style
run: |
# Replace with your actual validator path
node validate-code-style.js src/
if [ $? -ne 0 ]; then
echo "Code style validation failed"
exit 1
fi
</code_example> </examples>
<instructions> <best_practices> 1. **Complement, Don't Replace**: This tool complements code-style rules, doesn't replace them 2. **Configurable Rules**: Allow teams to customize validation rules 3. **Auto-fix When Possible**: Provide auto-fix suggestions for common issues 4. **Fast Feedback**: Provide instant feedback during development 5. **Clear Messages**: Show clear error messages with line numbers and suggestions </best_practices> </instructions>| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Regex-based style checking | Breaks on multi-line, strings, and comments | Use AST-based tools (ESLint, Prettier) |
| Custom rules for covered standards | High maintenance; inconsistent with community | Configure existing ESLint/Prettier rules first |
| Blocking CI on warnings | Excessive friction causes teams to disable style checks | Block only on errors; log warnings |
| Style validation without auto-fix | Manual fixes have low resolution rate | Always provide auto-fix commands alongside findings |
| Running only locally, not in CI | Developers bypass pre-commit hooks regularly | Run in both pre-commit and CI pipeline |
Before starting:
Read .claude/context/memory/learnings.md
After completing:
.claude/context/memory/learnings.md.claude/context/memory/issues.md.claude/context/memory/decisions.mdASSUME INTERRUPTION: If it's not in memory, it didn't happen.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
日本語の概要は準備中です。原文の説明を表示しています。
Use when you want to improve response quality through meta-cognitive reasoning. Applies 15+ reasoning methods to reconsider and refine initial outputs.
日本語の概要は準備中です。原文の説明を表示しています。
N-round opposing-stance debates for trade-off analysis. Assigns pro/con roles to agents, runs structured debate rounds with quality scoring, and produces a moderator synthesis with confidence-rated recommendation. Generalizable to architecture, technology, security, and design decisions.
日本語の概要は準備中です。原文の説明を表示しています。
Force adversarial code review stance that eliminates confirmation bias — reviewer must find issues or re-analyze
日本語の概要は準備中です。原文の説明を表示しています。
Creates specialized AI agents on-demand when no existing agent matches a request. Use when the Router cannot find a suitable agent for a task. Enables self-evolution by generating persistent agents.
日本語の概要は準備中です。原文の説明を表示しています。
LLM-as-judge evaluation framework with 5-dimension rubric (accuracy, groundedness, coherence, completeness, helpfulness) for scoring AI-generated content quality with weighted composite scores and evidence citations
日本語の概要は準備中です。原文の説明を表示しています。