Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
name: Bug report
about: Report incorrect audit results or crashes
title: ''
labels: bug
assignees: ''
---

**URL audited** (if public):

**Expected behavior:**

**Actual behavior:**

**Steps to reproduce:**

```bash
npx design-auditor <url> [options]
```

**Environment:**

- Node.js version:
- OS:
- design-auditor version:

**Additional context:**
15 changes: 15 additions & 0 deletions .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
name: Feature request
about: Suggest a new audit rule or improvement
title: ''
labels: enhancement
assignees: ''
---

**What design problem would this solve?**

**Proposed rule/check:**

**Example of the issue on a real site (optional):**

**Additional context:**
28 changes: 28 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
name: CI

on:
push:
branches: [main, dev]
pull_request:
branches: [main]

jobs:
build-and-test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x, 22.x]

steps:
- uses: actions/checkout@v4

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: npm

- run: npm ci
- run: npm run build
- run: npm run format:check
- run: npm test
34 changes: 34 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Changelog

## [1.0.1] - 2026-03-06

### Fixed

- Links rule: duplicate `:visited` condition
- Colors extractor: CSS variable coverage now scans `CSSStyleRule.style.getPropertyValue()` across all stylesheets
- Typography rules: added `pass` violation for modular scale check
- Typography extractor: filter out `display:none` / `visibility:hidden` elements
- Reading width: removed `section` and `main` from text tags (layout containers caused false positives)
- Breakpoints extractor: use `matchAll()` to capture both values in complex queries

### Added

- Test suite with Vitest (unit + rule tests)
- CI workflow (build, format, test on Node 18/20/22)
- CONTRIBUTING.md

## [1.0.0] - 2026-02-27

### Added

- Initial release
- 9 audit modules: typography, colors, vertical rhythm, components, reading width, images, links, breakpoints, headings
- Terminal reporter with color swatches
- JSON report export (`--save-report`)
- Module filtering (`--only`)
- Weighted scoring system (A-F grades)
- WCAG contrast checking (AA)
- Delta-E color clustering
- Modular scale detection
- 4px/8px grid detection
- Known breakpoint system detection (Tailwind, Bootstrap, etc.)
36 changes: 36 additions & 0 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

## Our Standards

Examples of behavior that contributes to a positive environment:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community

Examples of unacceptable behavior:

- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information without explicit permission
- Other conduct which could reasonably be considered inappropriate

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the project maintainer. All complaints will be reviewed and
investigated promptly and fairly.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0.
71 changes: 71 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Contributing to design-auditor

Thanks for your interest in contributing! Here's how to get started.

## Development Setup

```bash
git clone https://github.com/PashaSchool/design-auditor.git
cd design-auditor
npm install
```

## Running Locally

```bash
# Run against a URL
npm run dev -- https://example.com

# Run tests
npm test

# Check formatting
npm run format:check

# Auto-format
npm run format
```

## Project Structure

```
src/
extractors/ — Playwright page.evaluate() data collection
rules/ — Violation checks (pass/warn/error)
reporters/ — Terminal + JSON output
utils/ — Color math, score calculation
types.ts — Core types (Violation, ModuleReport)
```

**Data flow:** URL -> Extractor (browser) -> Rules (pure functions) -> Reporter (terminal/JSON)

## Adding a New Rule

1. Create an extractor in `src/extractors/` that collects data via `page.evaluate()`
2. Create a rule in `src/rules/` — a pure function that takes extracted data and returns `Violation[]`
3. Add tests in `tests/rules/` with mock data (no browser needed)
4. Wire it up in `src/index.ts`

Rules should always push a `pass` violation when things are OK — this affects the score denominator.

## Code Style

- TypeScript strict mode
- Prettier for formatting (run `npm run format` before committing)
- No lint warnings in CI

## Pull Requests

1. Fork the repo and create a feature branch
2. Make your changes
3. Add/update tests
4. Run `npm test && npm run format:check && npm run build`
5. Open a PR with a clear description of the change

## Reporting Bugs

Open an issue with:

- The URL you audited (if public)
- Expected vs actual behavior
- Node.js version and OS
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
**Catch design inconsistencies before your users do.**

[![npm version](https://img.shields.io/npm/v/design-auditor?color=6366f1&style=flat-square)](https://www.npmjs.com/package/design-auditor)
[![npm downloads](https://img.shields.io/npm/dm/design-auditor?color=6366f1&style=flat-square)](https://www.npmjs.com/package/design-auditor)
[![CI](https://img.shields.io/github/actions/workflow/status/PashaSchool/design-auditor/ci.yml?branch=main&style=flat-square&label=CI)](https://github.com/PashaSchool/design-auditor/actions/workflows/ci.yml)
[![license](https://img.shields.io/npm/l/design-auditor?color=6366f1&style=flat-square)](LICENSE)
[![snyk](https://snyk.io/test/github/PashaSchool/design-auditor/badge.svg)](https://snyk.io/test/github/PashaSchool/design-auditor)
[![playwright](https://img.shields.io/badge/powered%20by-Playwright-45ba4b?style=flat-square)](https://playwright.dev)
Expand Down
Loading
Loading