brianmontanaweb/agentic-design-system

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Creates the source file, barrel index, and package export for a new component in @agentic-ds/core or @agentic-ds/agents — with the correct ARIA live region, semantic tokens, and CSS scoping applied from the start. Use when creating just a component's implementation file (no story, tests, or docs), or as step 1 of the…

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Creates the colocated .doc.ts spec next to an existing component's source — a typed ComponentDoc object with token inventory, props, and accessibility requirements with WCAG SC references. Use when a component is missing its doc, when documenting a component, or as step 4 of the /add-component flow.

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Creates or extends the Storybook story for an existing component in @agentic-ds/core or @agentic-ds/agents, covering every prop variant and state. Use when a component needs a story, when backfilling story coverage, or as step 2 of the /add-component flow.

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Creates the unit test file for an existing component in @agentic-ds/core or @agentic-ds/agents — ARIA-first test groups using renderWithProviders and userEvent — and runs it to green. Use when a component needs tests, when backfilling test coverage, or as step 3 of the /add-component flow.

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Scaffolds a new component in @agentic-ds/core or @agentic-ds/agents end-to-end — source, Storybook story, unit tests, spec doc, and index export — by planning once, then orchestrating the add-component-source, add-component-story, add-component-tests, add-component-spec, and verify-component skills. Use when adding…

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Drafts a conventional commit message from the current uncommitted changes, matching this repo's type(scope) style and history. Use when asked to write, draft, or generate a commit message. Pass --commit to also create the commit.

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Audits and updates an existing component — source, story, and spec doc — fixing violations, story gaps, and spec drift. Always plans changes and waits for approval before writing any files. Use when a component needs to be brought up to standard, or when asked to fix, update, or improve a specific existing component.

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Pixel-compares a component's live Storybook rendering against its Figma design node and reports a numeric diff percentage plus a saved diff image — actual visual fidelity, not a props/token read. Use whenever the user asks whether a component "matches Figma," "looks right compared to the design," wants a "Figma diff"…

brianmontanaweb/agentic-design-system

Skill Claude CodeCodex

Builds, lints, and unit-tests a single component's files (source, story, tests) in @agentic-ds/core or @agentic-ds/agents, fixing any errors in those files, and reports verifiable command output. Use to check one component after changes, or as the final step of the /add-component flow.