メニュー
Use when implementing or extending a shared component library — scaffolding new components with CVA variants, writing Storybook stories, wiring visual regression, or auditing existing components for state and a11y coverage.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | component-library |
| description | Use when implementing or extending a shared component library — scaffolding new components with CVA variants, writing Storybook stories, wiring visual regression, or auditing existing components for state and a11y coverage. |
| metadata | {"references":["references/composition-patterns.md","references/state-management.md","references/variant-systems.md"]} |
rg -- '--color-' dist/tokens.css.Box, Stack, Flex, Grid) → verify token consumption: rg "#[0-9a-fA-F]{6}" src/primitives/ exits empty.Heading, Text, Label).npx test-storybook --url http://127.0.0.1:6006 zero violations.Input, Select, Checkbox, Radio) → keyboard nav test passes.Card, Modal, Drawer) → focus-trap test passes for Modal.Table, List) → axe-core audit on rendered story.Nav, Tabs, Breadcrumbs).Gate per tier: a11y audit clean + visual regression reviewed before next tier.
import { createContext, useContext, useState, ReactNode } from "react";
type Ctx = { value: string | null; setValue: (v: string) => void };
const SelectCtx = createContext<Ctx | null>(null);
export function Select({ children, defaultValue = null }:
{ children: ReactNode; defaultValue?: string | null }) {
const [value, setValue] = useState<string | null>(defaultValue);
return (
<SelectCtx.Provider value={{ value, setValue }}>
<div role="listbox" className="rounded-md border">{children}</div>
</SelectCtx.Provider>
);
}
Select.Option = function Option({ value, children }:
{ value: string; children: ReactNode }) {
const ctx = useContext(SelectCtx)!;
const selected = ctx.value === value;
return (
<button role="option" aria-selected={selected}
onClick={() => ctx.setValue(value)}
className={selected ? "bg-[var(--color-brand-500)] text-white" : ""}>
{children}
</button>
);
};
import { cva } from "class-variance-authority";
export const button = cva("inline-flex items-center font-medium rounded-md", {
variants: {
intent: { primary: "bg-primary text-white",
outline: "border-2 border-primary text-primary",
ghost: "text-primary hover:bg-primary/10" },
size: { sm: "h-8 px-3 text-sm", md: "h-10 px-4", lg: "h-12 px-6 text-lg" }
},
compoundVariants: [
{ intent: "ghost", size: "sm", class: "underline-offset-2" }
],
defaultVariants: { intent: "primary", size: "md" }
});
Button.stories.tsx)import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
const meta: Meta<typeof Button> = {
component: Button,
args: { children: "Click me" },
argTypes: { intent: { control: "select", options: ["primary","outline","ghost"] },
size: { control: "select", options: ["sm","md","lg"] } },
parameters: { a11y: { config: { rules: [{ id: "color-contrast", enabled: true }] } } }
};
export default meta;
export const Primary: StoryObj<typeof Button> = {};
export const Disabled: StoryObj<typeof Button> = { args: { disabled: true } };
export const Loading: StoryObj<typeof Button> = { args: { children: "Loading…" } };
tests/visual/button.spec.ts)import { test, expect } from "@playwright/test";
const stories = ["primary", "disabled", "loading"];
for (const id of stories) {
test(`Button ${id} visual`, async ({ page }) => {
await page.goto(`http://127.0.0.1:6006/iframe.html?id=button--${id}`);
await expect(page.locator("#storybook-root"))
.toHaveScreenshot(`button-${id}.png`, { maxDiffPixelRatio: 0.01 });
});
}
Run: npx playwright test tests/visual/ --update-snapshots on intentional changes; fail-block on diffs in CI.
# Headless axe-core on every Storybook story
npx test-storybook --url http://127.0.0.1:6006 --maxWorkers=2
# Or one-off:
npx @axe-core/cli http://127.0.0.1:6006/iframe.html?id=button--primary
Pass: zero serious/critical violations. Track moderate violations in issue tracker.