chakra-ui/chakra-uiNew scan
90/ 100 · A

A top-tier open source project. Docs, tests, and CI are all in excellent shape.

Chakra UI is a component system for building SaaS products with speed ⚡️

TypeScript40,436 starsMITupdated 6d ago
DocumentationREADME, setup, examples, license
85
EngineeringTests, CI, linting, lockfiles
95
Project healthDescription, activity, stars, deps
84

What to fix first

The highest-impact improvements for this repo.

  1. 1
    CI/CD
    EngineeringInfo

    Add `tsc --noEmit`, `mypy`, or `cargo check` to catch type errors before they merge.

  2. 2
    CI/CD
    EngineeringInfo

    Upload coverage to Codecov, Coveralls, or report it with `--coverage` flags.

  3. 3
    README
    DocumentationWarning

    Add a GIF, screenshot, or logo image. It is the fastest way to show what your project does.

Detailed breakdown

Documentation

85
  • README80
    • README is present.
    • README is well structured with multiple sections.
    • No screenshots or images in the README (−20 pts).Add a GIF, screenshot, or logo image. It is the fastest way to show what your project does.
    • README has code examples.
    • README links to a live demo or deployed app.
    • README includes status badges.
  • Install and run instructions90
    • README documents how to install the project.
    • README documents how to run the project.
    • If your project uses environment variables, add a .env.example listing them (+10 pts).Add a .env.example listing all required environment variables so contributors know what to set up.
  • License100
    • Licensed under MIT.
  • Contributing guide69
    • Contributing guide is present (+6 pts for length); 400+ words earns the full +12 pts.
    • Contributing guide lacks a setup section (−12 pts).Show new contributors how to get a local dev environment running.
    • Contributing guide describes code style expectations.
    • Contributing guide lacks a testing section (−8 pts).Show contributors how to run the test suite (e.g. npm test, pytest, cargo test).
    • Contributing guide lacks a PR workflow section (−8 pts).Explain how to fork, branch, and open a pull request so contributors know what to expect.
    • Contributing guide includes code examples.
    • Code of conduct present.

Engineering

95
  • Tests100
    • Test files detected (packages/cli/__tests__).
  • CI/CD100

    Not applicable?

    • CI is configured (.github/workflows/quality.yml).
    • CI workflow runs tests.
    • CI runs on pull requests, not just on pushes to main.
    • CI workflow runs a lint or format check.
    • Optional: add type checking to CI.Add `tsc --noEmit`, `mypy`, or `cargo check` to catch type errors before they merge.
    • Optional: report test coverage in CI.Upload coverage to Codecov, Coveralls, or report it with `--coverage` flags.
    • CI includes a build step.
  • Linting and formatting75
    • Linter or formatter configured (.prettierrc).
    • Lint script wired into package.json.
    • tsconfig.json does not enable strict type checking (−20 pts).Add "strict": true to compilerOptions to catch more bugs at compile time.
  • Reproducibility80
    • Lockfile present (pnpm-lock.yaml). Installs are reproducible.
    • Environment pinned via sandbox/react-router/Dockerfile.
    • No Dependabot config (adding it earns up to +20 pts).Add .github/dependabot.yml with at least one package-ecosystem entry so dependencies are updated automatically.
  • Issue and PR templates100
    • Issue or PR templates present.
    • Security policy present.

Project health

84
  • Dependency manifest75
    • Dependency manifest found (package.json).
    • package.json is missing a description (−10 pts).Add a one-line description to package.json. It appears in npm search and on GitHub.
    • package.json links back to the repository.
    • package.json has no keywords (−8 pts).Add a `keywords` array to help people find your package on npm.
    • package.json has no homepage field (−7 pts).Add a `homepage` field pointing to your docs or project website.
  • Repository metadata70
    • Repository has a description.
    • Primary language detected: TypeScript.
  • Activity100
    • Actively maintained (pushed within the last month).
    • 40,436 stars.
  • Housekeeping100
    • .gitignore present.
Repository files36 root entries
  • .changelog
  • .changeset
  • .claude
    Good: Contributing guide is present (+6 pts for length); 400+ words earns the full +12 pts.
    Info: Contributing guide lacks a setup section (−12 pts).Fix: Show new contributors how to get a local dev environment running.
    Good: Contributing guide describes code style expectations.
    Info: Contributing guide lacks a testing section (−8 pts).Fix: Show contributors how to run the test suite (e.g. npm test, pytest, cargo test).
    Info: Contributing guide lacks a PR workflow section (−8 pts).Fix: Explain how to fork, branch, and open a pull request so contributors know what to expect.
    Good: Contributing guide includes code examples.
  • .github
    Good: CI is configured (.github/workflows/quality.yml).
    Good: Issue or PR templates present.
  • .husky
  • .storybook
  • .vscode
  • apps
  • media
  • packages
    Good: Test files detected (packages/cli/__tests__).
  • sandbox
    Good: Environment pinned via sandbox/react-router/Dockerfile.
  • scripts
  • skills
  • .all-contributorsrc
  • .commitlintrc
  • .gitignore
    Good: .gitignore present.
  • .lintstagedrc
  • .npmrc
  • .nvmrc
  • .prettierignore
  • .prettierrc
    Good: Linter or formatter configured (.prettierrc).
  • CLAUDE.md
  • CODE_OF_CONDUCT.md
    Good: Code of conduct present.
  • CONTRIBUTING.md
  • eslint.config.mjs
  • LICENSE
    Good: Licensed under MIT.
  • package.json
    Good: Dependency manifest found (package.json).
  • pnpm-lock.yaml
    Good: Lockfile present (pnpm-lock.yaml). Installs are reproducible.
  • pnpm-workspace.yaml
  • README.md
    Good: README is present.
    Good: README is well structured with multiple sections.
    Warning: No screenshots or images in the README (−20 pts).Fix: Add a GIF, screenshot, or logo image. It is the fastest way to show what your project does.
    Good: README has code examples.
    Good: README links to a live demo or deployed app.
    Good: README includes status badges.
    Good: README documents how to install the project.
    Good: README documents how to run the project.
  • renovate.json
  • SECURITY.md
    Good: Security policy present.
  • tsconfig.build.json
  • tsconfig.json
  • vite.config.ts
  • vitest.setup.ts