Agentic Setup: Continue prompt refactor and add two prompts#34673
Conversation
📝 WalkthroughWalkthroughThis PR refactors the CLI Storybook AI setup prompt infrastructure by relocating Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
✨ Finishing Touches📝 Generate docstrings
Review rate limit: 4/5 reviews remaining, refill in 12 minutes. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/lib/cli-storybook/src/ai/setup-prompts/index.ts (1)
30-33:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDeduplicate
PROMPT_NAMESto avoid repeated variants.
'optimized-tests'appears in both source maps, so this array can include duplicates.💡 Proposed fix
export const PROMPT_NAMES: PromptName[] = [ - ...Object.keys(CURRENTLY_USED_PROMPT), - ...Object.keys(FORMERLY_USED_PROMPTS), -]; + ...new Set([ + ...Object.keys(CURRENTLY_USED_PROMPT), + ...Object.keys(FORMERLY_USED_PROMPTS), + ]), +];🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/cli-storybook/src/ai/setup-prompts/index.ts` around lines 30 - 33, PROMPT_NAMES currently concatenates Object.keys(CURRENTLY_USED_PROMPT) and Object.keys(FORMERLY_USED_PROMPTS) which can produce duplicates (e.g., "optimized-tests"); change the construction of PROMPT_NAMES to remove duplicates by combining both key arrays and deduplicating them (for example via a Set or Array.from(new Set(...))) so PROMPT_NAMES contains each PromptName only once; update the constant declaration for PROMPT_NAMES accordingly, referencing the existing identifiers CURRENTLY_USED_PROMPT and FORMERLY_USED_PROMPTS.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts`:
- Around line 227-230: The CssCheck snippet inside the instructions function
currently hardcodes a TypeScript story annotation ("export const CssCheck: Story
= {") which breaks JavaScript projects; add a storyTypeAnnotation variable
(similar to how getStoryExample and getInteractionPlayExample handle language)
that is set to ": Story" when language is TypeScript and to an empty string for
JavaScript, then replace the hardcoded ": Story" in the CssCheck example with
this storyTypeAnnotation so the generated sample is valid for both JS and TS
projects (update references in instructions where CssCheck is constructed).
In `@code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts`:
- Around line 162-167: The Primary story's smoke `play` (export const Primary)
only asserts visibility which contradicts the rule that smoke plays should do
more than visibility; update the `play` function to include an additional
meaningful assertion such as checking the button is enabled and triggers the
expected behavior (e.g., click the button via canvas.getByRole('button', { name:
/order now/i }).click() and assert the side-effect or navigation/state change),
or at minimum assert enabled/aria attributes rather than visibility alone; apply
the same change pattern to the other smoke plays flagged (the other similar
story play functions).
- Around line 227-230: The CssCheck example emits TypeScript-only ": Story" when
language === 'js' because the instructions() function hardcodes that annotation;
update instructions() to use the same conditional typeAnnotation logic used in
getInteractionPlayExample (i.e., derive typeAnnotation based on language and
append it only when language is TS/TSX) so that for JavaScript projects the
example contains no ": Story" annotation and for TypeScript projects it keeps
the type.
---
Outside diff comments:
In `@code/lib/cli-storybook/src/ai/setup-prompts/index.ts`:
- Around line 30-33: PROMPT_NAMES currently concatenates
Object.keys(CURRENTLY_USED_PROMPT) and Object.keys(FORMERLY_USED_PROMPTS) which
can produce duplicates (e.g., "optimized-tests"); change the construction of
PROMPT_NAMES to remove duplicates by combining both key arrays and deduplicating
them (for example via a Set or Array.from(new Set(...))) so PROMPT_NAMES
contains each PromptName only once; update the constant declaration for
PROMPT_NAMES accordingly, referencing the existing identifiers
CURRENTLY_USED_PROMPT and FORMERLY_USED_PROMPTS.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b39c5a7b-1a3e-4806-8708-87096a37f00c
📒 Files selected for processing (20)
code/core/src/shared/utils/get-monorepo-type.test.tscode/core/src/shared/utils/get-monorepo-type.tscode/core/src/telemetry/ai-setup-utils.tscode/core/src/telemetry/storybook-metadata.test.tscode/core/src/telemetry/storybook-metadata.tscode/core/src/telemetry/types.tscode/lib/cli-storybook/src/ai/index.tscode/lib/cli-storybook/src/ai/setup-prompts/index.tscode/lib/cli-storybook/src/ai/setup-prompts/monorepo.tscode/lib/cli-storybook/src/ai/setup-prompts/optimized-tests.tscode/lib/cli-storybook/src/ai/setup-prompts/pattern-copy-play.tscode/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.tscode/lib/cli-storybook/src/ai/setup-prompts/setup.tscode/lib/cli-storybook/src/ai/types.tscode/lib/cli-storybook/src/ai/utils/docs-markdown-url.tscode/lib/cli-storybook/src/ai/utils/ext.tscode/lib/cli-storybook/src/ai/utils/project-overview.tscode/lib/cli-storybook/src/ai/utils/type-import-source.tsscripts/eval/prompts/optimized-tests.mdscripts/eval/prompts/rac-prompt.md
💤 Files with no reviewable changes (3)
- code/lib/cli-storybook/src/ai/types.ts
- scripts/eval/prompts/optimized-tests.md
- scripts/eval/prompts/rac-prompt.md
| const { configDir, language, packageManager, packageManagerName } = projectInfo; | ||
| const tsx = ext(language, true); | ||
| const ts = ext(language, false); | ||
| const docsUrl = (path: string) => getDocsMarkdownUrl(path, projectInfo); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify TS-only annotation appears unconditionally in this JS-capable prompt template
rg -n "export const CssCheck: Story =" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts
rg -n "const typeAnnotation = language === 'ts' \\? ': Story' : ''" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.tsRepository: storybookjs/storybook
Length of output: 171
🏁 Script executed:
#!/bin/bash
# Read the file to understand context around key lines
sed -n '205,235p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts
echo "---"
sed -n '355,370p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.tsRepository: storybookjs/storybook
Length of output: 2303
🏁 Script executed:
#!/bin/bash
# Check for all hardcoded ": Story" in the file
rg -n "export const \w+: Story" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts
# Also check the specific range mentioned (361-363)
sed -n '358,365p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.tsRepository: storybookjs/storybook
Length of output: 834
🏁 Script executed:
#!/bin/bash
# Find which functions contain the hardcoded ": Story" patterns
# Check context around lines 193, 201-203
sed -n '180,210p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts
# Also search for all functions that have template strings with hardcoded ": Story"
rg -B 5 "export const \w+: Story = \{" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | head -60Repository: storybookjs/storybook
Length of output: 2249
🏁 Script executed:
#!/bin/bash
# Check which functions contain these hardcoded ": Story" patterns
# Get context by checking function definitions
rg -B 10 "export const Primary: Story = \{" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | head -20
echo "---"
# Check the function that contains CssCheck
rg -B 15 "export const CssCheck: Story = \{" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | grep "^[0-9]*-function\|^[0-9]*-const" | head -5Repository: storybookjs/storybook
Length of output: 383
🏁 Script executed:
#!/bin/bash
# Find the function names for each hardcoded ": Story" occurrence
# by looking at lines before the exports
# Lines 193-203 context (what function?)
sed -n '160,205p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | grep -E "^(function|const) " | tail -1
echo "Function for line 193:"
sed -n '160,193p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | grep -E "^(function|const) " | tail -1
echo "---"
# Lines 362 context (what function?)
echo "Function for line 362:"
sed -n '225,362p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | grep -E "^(function|const) " | tail -1
echo "---"
# Check if line 211 typeAnnotation is actually used in its function
sed -n '205,225p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.tsRepository: storybookjs/storybook
Length of output: 737
🏁 Script executed:
#!/bin/bash
# Get more comprehensive context to identify functions
sed -n '160,230p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | head -80Repository: storybookjs/storybook
Length of output: 2551
🏁 Script executed:
#!/bin/bash
# Get the full function signatures and structure
sed -n '140,160p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts
echo "---"
# Also check all function definitions in the file
rg "^(function|export function|const.*=.*\()" code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | head -20Repository: storybookjs/storybook
Length of output: 1224
🏁 Script executed:
#!/bin/bash
# Now let's see the complete instructions function to find all occurrences
sed -n '225,400p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | grep -n "export const\|Story\|language"Repository: storybookjs/storybook
Length of output: 1050
🏁 Script executed:
#!/bin/bash
# Let's see the complete getStoryExample to understand how it handles JS vs TS
sed -n '143,180p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.tsRepository: storybookjs/storybook
Length of output: 1296
🏁 Script executed:
#!/bin/bash
# Now let's see the complete instructions function including the CssCheck part
sed -n '225,370p' code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts | tail -150Repository: storybookjs/storybook
Length of output: 8904
CssCheck snippet uses hardcoded TypeScript annotation in a JavaScript-capable prompt.
The instructions function includes hardcoded export const CssCheck: Story = { at line 362, which is invalid for JavaScript projects. While getStoryExample correctly branches on language and getInteractionPlayExample conditionalizes the type annotation, the CssCheck example in instructions fails to do so and will generate broken sample output for JS projects.
Add a storyTypeAnnotation variable and apply it:
Proposed fix
export function instructions(projectInfo: ProjectInfo): string {
const { configDir, language, packageManager, packageManagerName } = projectInfo;
const tsx = ext(language, true);
const ts = ext(language, false);
+ const storyTypeAnnotation = language === 'ts' ? ': Story' : '';
const docsUrl = (path: string) => getDocsMarkdownUrl(path, projectInfo);Then update the CssCheck example to use it:
- export const CssCheck: Story = {
+ export const CssCheck${storyTypeAnnotation} = {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/cli-storybook/src/ai/setup-prompts/monorepo.ts` around lines 227 -
230, The CssCheck snippet inside the instructions function currently hardcodes a
TypeScript story annotation ("export const CssCheck: Story = {") which breaks
JavaScript projects; add a storyTypeAnnotation variable (similar to how
getStoryExample and getInteractionPlayExample handle language) that is set to ":
Story" when language is TypeScript and to an empty string for JavaScript, then
replace the hardcoded ": Story" in the CssCheck example with this
storyTypeAnnotation so the generated sample is valid for both JS and TS projects
(update references in instructions where CssCheck is constructed).
| // Smoke check — one is enough per file | ||
| export const Primary = { | ||
| args: { children: 'Order now' }, | ||
| play: async ({ canvas }) => { | ||
| await expect(canvas.getByRole('button', { name: /order now/i })).toBeVisible(); | ||
| }, |
There was a problem hiding this comment.
Story example contradicts the later smoke-play rule.
The example smoke play only checks visibility, but the rules below explicitly say visibility-only plays are not useful. This mixed guidance can confuse the model.
💡 Proposed fix
export const Primary = {
args: { children: 'Order now' },
play: async ({ canvas }) => {
- await expect(canvas.getByRole('button', { name: /order now/i })).toBeVisible();
+ await expect(canvas.getByRole('button', { name: /order now/i })).toHaveTextContent(
+ 'Order now'
+ );
},
};
@@
export const Primary: Story = {
args: { children: 'Order now' },
play: async ({ canvas }) => {
- await expect(canvas.getByRole('button', { name: /order now/i })).toBeVisible();
+ await expect(canvas.getByRole('button', { name: /order now/i })).toHaveTextContent(
+ 'Order now'
+ );
},
};Also applies to: 192-197, 386-393
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts` around lines
162 - 167, The Primary story's smoke `play` (export const Primary) only asserts
visibility which contradicts the rule that smoke plays should do more than
visibility; update the `play` function to include an additional meaningful
assertion such as checking the button is enabled and triggers the expected
behavior (e.g., click the button via canvas.getByRole('button', { name: /order
now/i }).click() and assert the side-effect or navigation/state change), or at
minimum assert enabled/aria attributes rather than visibility alone; apply the
same change pattern to the other smoke plays flagged (the other similar story
play functions).
| const { configDir, language, packageManager, packageManagerName } = projectInfo; | ||
| const tsx = ext(language, true); | ||
| const ts = ext(language, false); | ||
| const docsUrl = (path: string) => getDocsMarkdownUrl(path, projectInfo); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify TS-only annotation appears unconditionally in JS-capable prompt templates
rg -n "export const CssCheck: Story =" code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts
rg -n "const typeAnnotation = language === 'ts' \\? ': Story' : ''" code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.tsRepository: storybookjs/storybook
Length of output: 171
🏁 Script executed:
#!/bin/bash
# Read the file to see the full context around the mentioned lines
sed -n '200,240p' code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts | cat -n
echo "---"
sed -n '350,370p' code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts | cat -nRepository: storybookjs/storybook
Length of output: 3612
CssCheck example emits invalid JS for language === 'js'.
The instructions function generates prompt text with a hardcoded : Story type annotation on line 362. This TypeScript-only syntax breaks when the project language is JavaScript. The file already uses a conditional typeAnnotation variable in getInteractionPlayExample (line 211) — apply the same pattern to instructions:
Fix
export function instructions(projectInfo: ProjectInfo): string {
const { configDir, language, packageManager, packageManagerName } = projectInfo;
const tsx = ext(language, true);
const ts = ext(language, false);
+ const typeAnnotation = language === 'ts' ? ': Story' : '';
const docsUrl = (path: string) => getDocsMarkdownUrl(path, projectInfo);
// ... later at line 362:
- export const CssCheck: Story = {
+ export const CssCheck${typeAnnotation} = {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/cli-storybook/src/ai/setup-prompts/relaxed-limits.ts` around lines
227 - 230, The CssCheck example emits TypeScript-only ": Story" when language
=== 'js' because the instructions() function hardcodes that annotation; update
instructions() to use the same conditional typeAnnotation logic used in
getInteractionPlayExample (i.e., derive typeAnnotation based on language and
append it only when language is TS/TSX) so that for JavaScript projects the
example contains no ": Story" annotation and for TypeScript projects it keeps
the type.
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 184 | 184 | 0 |
| Self size | 858 KB | 907 KB | 🚨 +49 KB 🚨 |
| Dependency size | 68.27 MB | 68.27 MB | 🚨 +3 B 🚨 |
| Bundle Size Analyzer | Link | Link |
| /** | ||
| * Names of variants registered behind `EVAL_SETUP_PROMPT`. Loaded on demand | ||
| * from sibling files so the bundler can code-split them away from the | ||
| * from sibling files so the bundler can code|-split them away from the |
dd40a5b
into
yann/prompt-optimized-tests
ø
Summary by CodeRabbit
New Features
Refactor