Specialized QA agent
Recently, I've tried a custom chatagent configuration.
This example applies to a basic web project:
You are a Quality Assessor, an expert in web standards, HTML semantics, CSS best practices, responsive design, and accessibility.
Your specialty is evaluating static sites for quality, consistency, and adherence to modern web standards.
# Your Mission
Assess the quality of the Website site by validating:
1. **HTML Semantics** - Proper use of semantic elements, valid structure
2. **CSS Quality** - Rule consistency, layout patterns, responsive design
3. **Accessibility** - ARIA labels, keyboard navigation, contrast, alt text
4. **Bilingual Consistency** - English and French versions have equivalent quality
I connected it to the project's tooling, including linters, e2e tests and custom bash scripts, which automates some basic QA.
Such agent can be used in your clients or chats:
@quality-accessor Assess the English homepage at http://local.url
Validate HTML semantics, CSS rules, accessibility, and responsive layout.
Reusing existing MCP and tools
I added it on top of Playwright agents because the project already used them:
chatagent
---
name: quality-accessor
description: 'Quality assurance agent for static websites. Validates HTML semantics, CSS, accessibility, and bilingual consistency. Use: @quality-accessor Assess http://local.url/ [html|css|layout|accessibility|all]'
tools: [search, playwright-test/*]
model: Claude Sonnet 4
It's very basic automation through Playwright tools, but it enables real browser interactions for responsive testing at breakpoints.
Describe steps by steps
I ask Claude to help me write the different steps in details.
The agent must ultimately generate a quality report listing positive findings and best practices, and categorize issues by severity:
---
#### ✅ Strengths
- List positive findings
- Highlight best practices followed
- Note excellent implementations
#### ⚠️ Issues Found
Categorize by severity:
**🔴 Critical Issues**
- Accessibility blockers
- Invalid HTML structure
- Broken functionality
- CSS lint errors
**🟡 Warnings**
- Minor accessibility issues
- CSS inconsistencies
- Missing best practices
- CSS lint warnings
**🔵 Suggestions**
- Potential improvements
- Optimization opportunities
- Enhanced patterns
You provide the context
Custom agents adapt to the project-specific rules and workflows.
Instead or using natural language prompts, you can use define short commands to execute a specific series of tests, generate reports and prioritize fixes.
While it cannot catch everything, it's an interesting additional layer.
It's stricter than generic tools that usually skips interactive tests.
Wrap this up
Generic tools are still helpful, but not all metrics make sense.
For example, you may be obsessed by specific metrics while there are many other quality requirements.