skills.rest
malinskibeniamin
malinskibeniaminCOMMUNITY
Explore all skills by this author →
GitHub

setup-ci-pipeline

Automate GitHub Actions CI setup for React/TypeScript projects with quality gates.

3|1|Updated Mar 23, 2026
Search Tags:#typescript#react#github-actions#lint#ci#tests#type-check
One-click install
npx skills add https://github.com/malinskibeniamin/skills --skill setup-ci-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-ci-pipeline
Source: https://github.com/malinskibeniamin/skills/tree/main/setup-ci-pipeline
Command: npx skills add https://github.com/malinskibeniamin/skills --skill setup-ci-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configure GitHub Actions CI to enforce quality gates, maintain code health, and optimize frontend pipelines for React/TypeScript projects.

Core Features & Use Cases

  • Quality gate: lint, type-check, and tests complete within a concise PR cycle.
  • Coverage gates: enforce coverage thresholds and post diffs on PRs.
  • Visual regression: integrate Playwright for visual comparisons.
  • Dependency automation: automate Dependabot minor/patch PRs.
  • Bundle budget: alert on size regressions and optimize bundles.
  • Caching & optimization: smart Bun caching to accelerate pipelines.

Quick Start

Create the GitHub Actions workflow at .github/workflows/quality-gate.yml from the template in REFERENCE.md and commit it to enable the quality gate.

Frequently Asked Questions about setup-ci-pipeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a GitHub Actions CI pipeline for a React and TypeScript project?▼

A GitHub Actions CI pipeline for React and TypeScript is configured by creating a workflow file at .github/workflows/quality-gate.yml from a template, enabling lint, type-check, and tests to run within concise PR cycles.

What is a CI quality gate and how does it work with TypeScript and React?▼

A CI quality gate for TypeScript and React works by running lint, type-check, and tests on every pull request to enforce code health, blocking merges until all checks complete successfully within a concise PR cycle.

Do I need Bun and Vitest to configure coverage gates on my pull requests?▼

Yes, configuring coverage gates requires Bun tooling and Vitest as specified in the reference configuration, which together enforce coverage thresholds and post coverage diffs directly on your pull requests.

Can I integrate Playwright visual regression tests into my frontend CI workflow?▼

Yes, you can integrate Playwright into your frontend CI workflow to perform visual regression testing, allowing automated visual comparisons to catch unintended UI changes during the pull request process.

What's the best way to automate dependency updates and enforce bundle budgets in CI?▼

The best way to automate dependency updates and enforce bundle budgets in CI is by configuring Dependabot for minor and patch PRs while adding workflow steps to alert on bundle size regressions.

Why should I use Bun caching in my GitHub Actions frontend pipeline?▼

You should use smart Bun caching in your GitHub Actions frontend pipeline to accelerate pipeline execution by reusing installed dependencies, significantly reducing the time quality gates take to complete.

Related Skills

Explore More Software Engineering Skills→
DaleSeoDaleSeo
4

bun-init

Initialize Bun projects with TypeScript and standard configuration files.

Community
Advanced
mintitimintiti

ci-failure-analyzer

Analyze GitHub Actions CI failures and generate structured failure reports.

Community
Intermediate
grasberggrasberg
3

qa-expert

Design and execute software tests with Playwright, Cypress, Jest, Vitest, or pytest.

Community
Advanced
cyalcalacyalcala
1

ci-cd-and-automation

Automate CI/CD pipeline setup and enforce quality gates across software projects.

Community
Intermediate