phoenix-storybook

Conventions for creating, modifying, and reviewing production-faithful Storybook stories in the Phoenix frontend (js/app/stories, js/app/.storybook). Covers sidebar taxonomy and titles, the tag vocabulary, entry shape, option grids, component audits, overlays, toasts, themes, domain stories, and Storybook configuration. Use whenever touching `.stories.*` or story `.mdx` files, story fixtures, decorators, helpers in `stories/utils`, thumbnails, `.storybook/` configuration, or a frontend change that adds, changes, moves, or removes stories — including small or mechanical story edits and PR reviews that touch stories.

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

93%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary convention-style SKILL.md: lean, project-specific rules with exact commands, paths, and vocabularies; a verified routing table over one-level-deep self-contained references; and a workflow checklist with validation checkpoints. The single minor gap is the absence of an explicit fix-and-re-run loop when `pnpm lint:storybook` fails.

Dimension	Reasoning	Score
Conciseness	Every rule conveys project-specific convention (title roots, tag vocabulary, `!dev`, `themeLayout: "column"`, lint scope) rather than concepts Claude already knows. No padding, no over-explanation; the routing table and checklist are dense and each token earns its place.	5 / 5
Actionability	Guidance is concrete and executable throughout for an instruction-only skill: exact paths (`js/app/stories/design-system/overlays/Popover.stories.tsx`, `js/app/stories/_meta/taxonomy.ts`), an exact command (`pnpm lint:storybook` from `js/app`) with what it enforces, exact tag vocabulary (`legacy`\|`updated`, `complete`\|`incomplete`, `reviewed`\|`unreviewed`), and precise title formats.	5 / 5
Workflow Clarity	The authoring workflow is a clear sequenced checklist with explicit validation checkpoints ("`pnpm lint:storybook` passes", "Check `Both` mode for horizontal scroll") and rule 12 states passing is "necessary, not sufficient"; the destructive/batch case (deletion) correctly routes through human review. What keeps it below the top anchor is that no error-recovery loop is written for a failed lint run (fix-then-revalidate is implied, not stated).	4 / 5
Progressive Disclosure	The body is a genuine overview: core rules plus a task→reference routing table whose 16 links all resolve to real files in `references/` (verified against the directory listing), all one level deep. It explicitly instructs "Read only the references your task needs; each one is self-contained" and codifies keeping references one level deep in the maintenance section.	5 / 5
	Total	19 / 20 Passed

Description

95%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states the skill's purpose, scope, and explicit trigger conditions in third person with concrete file-pattern triggers and a well-defined niche. The only soft spot is that the action vocabulary is limited to three verbs while the scope enumeration carries the rest of the specificity.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete actions ("creating, modifying, and reviewing production-faithful Storybook stories") plus a detailed enumeration of covered areas (taxonomy, tags, entry shape, option grids, audits, overlays, toasts, themes). The action verbs themselves are only three (create/modify/review), which leaves a minor gap versus the comprehensive anchor — it sits noticeably above the 1-2-action anchor but not fully at comprehensive multi-action coverage.	4 / 5
Completeness	Explicitly answers both what ("Conventions for creating, modifying, and reviewing… stories in the Phoenix frontend" with enumerated scope) and when ("Use whenever touching `.stories.*` or story `.mdx` files… including small or mechanical story edits and PR reviews that touch stories") with concrete trigger phrases. Third person voice is used throughout.	5 / 5
Trigger Term Quality	Comprehensive natural-term coverage including file patterns and extensions: "`.stories.*`", "story `.mdx` files", "story fixtures", "decorators", "thumbnails", "`.storybook/` configuration", "PR reviews", and "Storybook stories" — a user needing this skill would naturally say nearly all of these.	5 / 5
Distinctiveness Conflict Risk	Clear niche (Storybook story conventions in a named frontend) with distinct, unambiguous triggers (specific file patterns, `.storybook/` config, thumbnails). Minimal overlap risk with general frontend or design skills, which are explicitly distinguished by path and artifact type.	5 / 5
	Total	19 / 20 Passed

Validation

87%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning

	Total	14 / 16 Passed

Repository: Arize-ai/phoenix
Path: .agents/skills/phoenix-storybook/SKILL.md
Commit: f408fdd

Reviewed: 6 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.