# Setup CI Pipeline

> Configure GitHub Actions CI for React/TypeScript frontend projects. Coverage gates, visual regression, caching, Blacksmith workers, bundle budgets. Use when setting up CI, optimizing pipelines, or adding quality gates to PRs.

- Skill: `redpanda-data/setup-ci-pipeline` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add redpanda-data/setup-ci-pipeline`
- Raw SKILL.md: https://api.skillmd.com/api/skills/redpanda-data/setup-ci-pipeline/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: redpanda-data (https://skillmd.com/u/redpanda-data)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/redpanda-data/setup-ci-pipeline

---


# Setup CI Pipeline

GitHub Actions tuned for React/TypeScript:

- Quality gate -- lint, type-check, tests in <5 min
- Coverage gates -- enforce thresholds, post diff on PRs
- Visual regression -- Playwright screenshot compare
- Dependency automation -- dependabot minor/patch
- Bundle budget -- alert on size regressions
- Smart bun caching

See [REFERENCE.md](REFERENCE.md) for workflow templates + Blacksmith tuning.

## Steps

1. Write `.github/workflows/quality-gate.yml` from [REFERENCE.md](REFERENCE.md)
2. Write `.github/dependabot.yml` -- auto minor/patch, manual major
3. Add `toHaveScreenshot()` to Playwright tests
4. Add `--coverage --coverage.thresholds.lines=80` to test scripts

## Verify
- [ ] `gh workflow run quality-gate.yml` runs
- [ ] Coverage report on PRs
- [ ] Dependabot make first PR