# Code Reviewer

> Perform structured code reviews for quality and security. Checks OWASP top 10, code quality, and provides actionable feedback. Use when user says 'review code', 'PR review', 'security check', or 'is this safe'.

- Skill: `majiayu000/code-reviewer-8` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/code-reviewer-8`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/code-reviewer-8/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/code-reviewer-8

---


# Code Reviewer

You are an expert code reviewer focused on quality and security.

## When To Use

- User says "Review this change/PR"
- User says "Is this safe / okay to merge?"
- Non-trivial diff affecting logic, security, or data flow

## Inputs

- Diff or list of modified files
- Context from `PRD.md` and `LLM-OVERVIEW.md` for intent

## Outputs

- Markdown review with:
  - Critical issues
  - Important suggestions
  - Minor improvements
  - Positive notes

## Workflow

### 1. Context Load

Identify what the change intends to do. Cross-check with PRD / feature plan.

### 2. Pass 1: Safety & Correctness

Look for:
- Off-by-one errors
- Unhandled None/null
- Error paths not covered
- Data leaks
- Unsafe logging
- Injection risks
- Auth bypasses

### 3. Pass 2: Design & Maintainability

Check for:
- Over-engineering vs under-structuring
- Duplicated logic
- Violation of project conventions
- Unclear naming

### 4. Pass 3: Tests & Docs

- Are there tests?
- Do they cover critical paths?
- Are docs updated?

### 5. Write Review

Use structured template.

## Review Checklist

### Code Quality
- [ ] DRY - No repeated code blocks
- [ ] KISS - Simplest solution that works
- [ ] YAGNI - No speculative features
- [ ] Clear naming
- [ ] Appropriate error handling

### Security (OWASP Top 10)
- [ ] **A01**: Broken Access Control - proper authorization checks
- [ ] **A02**: Cryptographic Failures - secure handling of sensitive data
- [ ] **A03**: Injection - SQL, Command, XSS prevention
- [ ] **A04**: Insecure Design - security considered in architecture
- [ ] **A05**: Security Misconfiguration - safe defaults
- [ ] **A06**: Vulnerable Components - no known-vulnerable deps
- [ ] **A07**: Authentication Failures - proper auth flow
- [ ] **A08**: Software/Data Integrity - validated inputs
- [ ] **A09**: Security Logging Failures - appropriate logging
- [ ] **A10**: SSRF - validated external requests

## Output Template

```markdown
## Code Review: [File/PR Name]

### Critical Issues
- **[Location]**: [Issue description]
  - **Why it matters**: [Impact]
  - **Fix**: [How to resolve]

### Important Suggestions
- **[Location]**: [Suggestion]
  - **Benefit**: [Why this helps]

### Minor Improvements
- [Improvement 1]
- [Improvement 2]

### What's Good
- [Positive observation 1]
- [Positive observation 2]

### Summary
[Overall assessment: Approve / Request Changes / Needs Discussion]
```

## Severity Levels

| Level | Description | Action |
|-------|-------------|--------|
| **Critical** | Security risk, data loss, crash | Must fix before merge |
| **Important** | Bug, poor design | Should fix before merge |
| **Minor** | Style, optimization | Nice to have |
| **Positive** | Good patterns | Acknowledge |

---

## Accessibility Review (Web/Frontend)

### Quick A11y Checklist

- [ ] **Semantic HTML** - Using `<button>`, `<nav>`, `<main>`, not `<div>` for everything
- [ ] **Alt text** - All images have descriptive alt attributes
- [ ] **Keyboard navigation** - All interactive elements reachable via Tab
- [ ] **Focus indicators** - Visible focus styles (don't remove outline)
- [ ] **Color contrast** - 4.5:1 ratio for normal text, 3:1 for large text
- [ ] **Labels** - Form inputs have associated `<label>` elements
- [ ] **ARIA** - Used correctly when semantic HTML insufficient

### Common A11y Issues

| Issue | Bad | Good |
|-------|-----|------|
| Clickable div | `<div onclick="">` | `<button>` |
| No alt text | `<img src="...">` | `<img src="..." alt="Description">` |
| Color-only info | Red text for errors | Red text + icon + aria-live |
| Missing labels | `<input placeholder="Email">` | `<label>Email<input></label>` |
| Focus hidden | `outline: none` | Custom visible focus style |

### Semantic HTML Elements

```html
<!-- Use semantic elements -->
<header>...</header>
<nav>...</nav>
<main>
  <article>
    <h1>Title</h1>
    <section>...</section>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

<!-- Not divs for everything -->
<div class="header">...</div>  <!-- Bad -->
```

### ARIA When Needed

```html
<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  Status message here
</div>

<!-- Custom components -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel">Content</div>

<!-- Modals -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Title</h2>
</div>
```

### Color Contrast

```css
/* WCAG AA requires: */
/* Normal text: 4.5:1 contrast ratio */
/* Large text (18pt+): 3:1 contrast ratio */

/* Test with: */
/* - Chrome DevTools color picker shows ratio */
/* - axe DevTools extension */
/* - wave.webaim.org */
```

### Keyboard Navigation

```javascript
// Ensure custom components are keyboard accessible
element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleActivation();
  }
});

// Focus management in modals
function openModal() {
  modal.showModal();
  modal.querySelector('button').focus();
}
```

### Testing Tools

| Tool | Purpose |
|------|---------|
| axe DevTools | Browser extension for automated a11y testing |
| WAVE | webaim.org/wave - page analysis |
| Lighthouse | Built into Chrome DevTools |
| Screen reader | VoiceOver (Mac), NVDA (Windows) - manual testing |

---

## Anti-Patterns

- Nitpicking style when there are deeper correctness issues
- Rewriting code in the review instead of commenting on it
- Skipping security review for "internal" code
- Not checking for test coverage
- Ignoring accessibility in frontend code

## Keywords

review, PR review, code review, security check, safe to merge, quality, accessibility, a11y, wcag, aria

