accessibility
FreeEnsure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
The English summary is being prepared. Showing the original description.
Programmatic code style validation using AST analysis. Complements (not replaces) code-style rules by providing automated checking and instant feedback.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
The English summary is being prepared. Showing the original description.
Use when you want to improve response quality through meta-cognitive reasoning. Applies 15+ reasoning methods to reconsider and refine initial outputs.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
Force adversarial code review stance that eliminates confirmation bias — reviewer must find issues or re-analyze
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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
The English summary is being prepared. Showing the original description.