f0-quality-gate

Run automated multi-phase quality gates on F0 React components.

27|5|Updated Mar 20, 2024
One-click install
npx skills add https://github.com/factorialco/f0 --skill f0-quality-gate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: f0-quality-gate
Source: https://github.com/factorialco/f0/tree/main/packages/react/.skills/f0-quality-gate
Command: npx skills add https://github.com/factorialco/f0 --skill f0-quality-gate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the rigorous quality assurance process for F0 React components, ensuring code quality, accessibility, and documentation standards are met before human review.

Core Features & Use Cases

  • Automated Checks: Runs TypeScript, linting, and unit tests.
  • Subagent Reviews: Spawns parallel agents for code review, accessibility, Storybook coverage, and test coverage analysis.
  • Auto-fixing: Attempts to automatically fix non-blocking issues.
  • Use Case: After a developer modifies a React component, this Skill automatically runs all necessary checks, reports findings, and even attempts to fix minor issues, providing a comprehensive quality report.

Quick Start

Run the f0-quality-gate skill to perform an automated quality check on recent changes to F0 React components.

Frequently Asked Questions about f0-quality-gate

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

FAQPage Schema
How do I automate React component quality checks for code, accessibility, and tests?

Automate React component quality checks by running a multi-phase quality gate that executes inline commands and spawns parallel subagents to review code, accessibility, Storybook coverage, and test coverage. It flags blockers and auto-fixes non-blocking issues.

What is a quality gate for React components and when do I need it?

A React component quality gate is an automated process enforcing code, accessibility, and documentation standards before human review. You need it after modifying components to automatically run TypeScript, linting, and unit tests.

Can I auto-fix linting and accessibility issues found during a React component review?

Yes, you can auto-fix non-blocking issues found during a React component review. The quality gate attempts to automatically resolve minor problems while flagging critical blockers for your manual attention.

Does the automated React quality gate analyze Storybook documentation?

Yes, the automated React quality gate analyzes Storybook documentation. It spawns a dedicated parallel subagent to review Storybook coverage alongside separate agents for code, accessibility, and test coverage analysis.

What is the best way to run TypeScript and unit tests before a React code review?

The best way to run TypeScript and unit tests before a React code review is using an automated quality gate. It executes these checks inline and provides a comprehensive quality report flagging critical blockers for attention.