grade_component
Analyze UI component source code to assess compliance with accessibility and specification rules, providing scores, violation details, and improvement suggestions.
Instructions
Grade a component against all rules. Returns a score, grade, violations, and suggestions for fixes.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | The component source code to grade | |
| verbose | No | Include detailed violation information |
Implementation Reference
- src/tools/index.ts:350-395 (handler)Handler function that executes the grade_component tool: parses args, calls gradeComponent helper, formats a detailed markdown report with score, violations (with good examples if verbose), and passed rules.function handleGradeComponent(args: Record<string, unknown>): ToolResult { const code = args.code as string; const verbose = args.verbose as boolean; const result = gradeComponent(code); let text = `# Component Grade: ${result.grade} (${result.score}/100) ${result.summary} `; if (result.violations.length > 0) { text += `## Violations (${result.violations.length}) `; for (const v of result.violations) { const rule = getRule(v.ruleId); text += `### ❌ ${rule?.name || v.ruleId} - **Message:** ${v.message} ${v.line ? `- **Line:** ${v.line}` : ''} ${v.suggestion ? `- **Suggestion:** ${v.suggestion}` : ''} `; if (verbose && rule) { text += `**Good example:** \`\`\`tsx ${rule.example.good} \`\`\` `; } } } if (result.passes.length > 0) { text += `## Passed Rules (${result.passes.length}) ${result.passes.map((p) => `✅ ${p}`).join('\n')} `; } return { content: [{ type: 'text', text }], }; }
- src/tools/index.ts:91-107 (schema)Input schema definition for the grade_component tool in getToolDefinitions(): requires 'code' string, optional 'verbose' boolean.name: 'grade_component', description: 'Grade a component against all rules. Returns a score, grade, violations, and suggestions for fixes.', inputSchema: { type: 'object', properties: { code: { type: 'string', description: 'The component source code to grade', }, verbose: { type: 'boolean', description: 'Include detailed violation information', }, }, required: ['code'], }, },
- src/tools/index.ts:241-242 (registration)Tool registration in executeTool switch statement: maps 'grade_component' name to handleGradeComponent handler.case 'grade_component': return handleGradeComponent(args);
- Core helper function gradeComponent that iterates over all RULES, runs checks on code, computes weighted score/grade, collects violations and passes. Imported and called by the handler.export function gradeComponent(code: string): GradeResult { const violations: RuleViolation[] = []; const passes: string[] = []; let totalWeight = 0; let lostPoints = 0; for (const rule of RULES) { totalWeight += rule.weight; const ruleViolations = rule.check(code); if (ruleViolations.length === 0) { passes.push(rule.id); } else { violations.push(...ruleViolations); lostPoints += rule.weight; } } const score = Math.max(0, Math.round(((totalWeight - lostPoints) / totalWeight) * 100)); let grade: string; if (score >= 95) grade = 'A+'; else if (score >= 90) grade = 'A'; else if (score >= 85) grade = 'B+'; else if (score >= 80) grade = 'B'; else if (score >= 75) grade = 'C+'; else if (score >= 70) grade = 'C'; else if (score >= 65) grade = 'D+'; else if (score >= 60) grade = 'D'; else grade = 'F'; const errorCount = violations.filter(v => RULES.find(r => r.id === v.ruleId)?.severity === 'error' ).length; const warningCount = violations.filter(v => RULES.find(r => r.id === v.ruleId)?.severity === 'warning' ).length; const summary = `Score: ${score}/100 (${grade}) | ${passes.length} passed | ${errorCount} errors | ${warningCount} warnings`; return { score, grade, violations, passes, summary }; }