Skip to content

fix(skills): add format step to quality gate and args rule to storybook stories#3914

Open
desiree-np wants to merge 1 commit intomainfrom
fix/f0-skills-format-and-args-rules
Open

fix(skills): add format step to quality gate and args rule to storybook stories#3914
desiree-np wants to merge 1 commit intomainfrom
fix/f0-skills-format-and-args-rules

Conversation

@desiree-np
Copy link
Copy Markdown
Collaborator

Summary

  • Adds pnpm format && pnpm format:check as step 1a in f0-quality-gate — runs before TypeScript and Lint, applies to all file types including .mdx
  • Removes .mdx from the quality gate skip list — MDX files go through oxfmt and must pass format check
  • Adds "Render-only stories must include args" rule to f0-storybook-stories — prevents TS errors when stories use a custom render without inheriting required props from Meta

Motivation

Two recurring CI failures in PRs:

  1. oxfmt format errors on .mdx and .tsx files — the quality gate only ran lint, never format
  2. TS errors in render-only stories missing args — this pattern wasn't documented anywhere

These skill updates ensure the agent catches and auto-fixes both issues locally before pushing.

@desiree-np desiree-np requested a review from a team as a code owner April 10, 2026 09:31
Copilot AI review requested due to automatic review settings April 10, 2026 09:31
@github-actions github-actions bot added fix react Changes affect packages/react labels Apr 10, 2026
@github-actions
Copy link
Copy Markdown
Contributor

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the packages/react agent “skills” documentation to better match current CI expectations by adding formatting to the quality gate workflow and documenting a Storybook typing pitfall for render-only stories.

Changes:

  • Add a new Format step (pnpm format && pnpm format:check) as the first Phase 1 command in f0-quality-gate.
  • Remove .mdx from quality-gate skip candidates and add guidance that MDX must pass formatting checks.
  • Document a new Storybook rule: render-only stories must explicitly provide args to satisfy Story typing when meta has required props.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File Description
packages/react/.skills/f0-storybook-stories/SKILL.md Updates story examples formatting and adds a rule about args for render-only stories.
packages/react/.skills/f0-quality-gate/SKILL.md Adds a format step to Phase 1 and expands Storybook review instructions to include MDX documentation checks.

Comment on lines +22 to +24
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn, expect, within } from "storybook/test";
import { withSnapshot, withSkipA11y } from "@/lib/storybook-utils/parameters";
Comment on lines +38 to +41
} satisfies Meta<typeof F0Example>;

export default meta
type Story = StoryObj<typeof meta>
export default meta;
type Story = StoryObj<typeof meta>;
Comment on lines 20 to +25
**Skip when:**

- The user explicitly says to skip checks
- The change is documentation-only (`.md`, `.mdx` files, comments)
- The change is icon generation or other auto-generated files

> **Note:** `.mdx` files are NOT skip candidates — they go through `oxfmt` formatting and must pass `format:check`.
Comment on lines +211 to 216
You are a Storybook and documentation reviewer for the F0 React component library.

Load the `f0-storybook-stories` skill from `.skills/f0-storybook-stories/SKILL.md`.
Load the `f0-storybook-testing` skill from `.skills/f0-storybook-testing/SKILL.md`.
Load the `f0-docs` skill from `.skills/f0-docs/SKILL.md`.

@github-actions
Copy link
Copy Markdown
Contributor

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3914 to install the package

Use pnpm i github:factorialco/f0#fa75a209e07ec456cdad580ef4b61228d6053db2 to install this specific commit

@github-actions
Copy link
Copy Markdown
Contributor

🔍 Visual review for your branch is published 🔍

Here are the links to:

@github-actions
Copy link
Copy Markdown
Contributor

Coverage Report for packages/react

Status Category Percentage Covered / Total
🔵 Lines 46.31% 11485 / 24800
🔵 Statements 45.53% 11838 / 25995
🔵 Functions 37.98% 2582 / 6798
🔵 Branches 38.18% 7564 / 19808
File CoverageNo changed files found.
Generated in workflow #12724 for commit e6ad7c9 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix react Changes affect packages/react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants