List all custom element components registered in the Custom Elements Manifest.

Semantically search for components by name, description, or member names using token-overlap scoring. Returns the top 3 matches with scores above zero.

Get an overview of the component library: component count, average health score, grade distribution, and last health check timestamp.

List all events across all components in the library. Optionally filter by component tag name. Returns event name, component tag, description, and detail type.

List all slots across all components in the library. Optionally filter by component tag name. Returns slot name, component tag, description, and whether the slot is named or default.

List all CSS parts (::part()) across all components in the library. Optionally filter by component tag name. Returns part name, component tag, and description.

Group components by functional category (form, navigation, feedback, layout, data-display, media, overlay). Uses @category JSDoc tag when present, falls back to heuristic tag-name pattern matching.

Get full metadata for a web component by tag name, including members, events, slots, CSS parts, and CSS properties.

Validates the documentation completeness of a component in the Custom Elements Manifest. Returns a pass/fail result with a score and list of issues.

Generates an HTML usage snippet for a component, showing key attributes with their default values. Lists required vs optional attributes and variant options from union types.

Generates import statements for a component based on the CEM exports and package.json. Returns both a side-effect import and a named import.

Returns a 3-5 paragraph markdown prose description of a component — what it is, when to use it, how to customize it, its slots, and its events. Optimized for LLM comprehension.

Returns a structured constraint table for a component attribute. Union type attributes include all valid values with descriptions. Non-union types return simple type info.

Find all components that expose or use a given CSS custom property token. Returns tagName, token description, and default value for each match.

Returns the dependency graph for a component — direct dependencies (components it renders) and transitive dependencies (full tree). Requires a CEM built with dependency reference data.

Find all components that reference a given CSS custom property token in their cssProperties array. Useful for impact analysis before renaming or removing a design token. Works without tokensPath configured.

Generates a realistic HTML snippet showing how to compose two or more web components together. Slot assignments are drawn from CEM slot definitions. Provide 1–4 component tag names; a single tag name returns a standalone usage example.

Compare a component's CEM metadata between the current branch and a base branch, reporting breaking changes (removals, type changes) and non-breaking additions.

Run a breaking-change scan across ALL components in the CEM, comparing the current branch against a base branch. Returns a per-component summary with emoji status indicators.

Returns the latest health score for a single web component, including grade, dimension scores, and issues. Set multiDimensional=true for the full 11-dimension enterprise scoring with tier gates.

Returns health scores for all components in the library. Set multiDimensional=true for full 11-dimension enterprise scoring.

Returns the health trend for a component over the last N days, including data points, trend direction, and change percent.

Compares health between the current branch and a base branch, returning before/after scores with improvement or regression verdict.

Returns aggregate health statistics for all components: average score, grade distribution, total count, library-wide trend, per-dimension averages, and components needing attention (score below 70).

Analyzes the accessibility profile of one or all web components from CEM data. Checks for ARIA roles, aria-* attributes, form association, keyboard events, focus management, disabled state, label support, and accessibility documentation. When libraryRoot is provided alongside tagName, the report is enriched with helix-native AAA evidence (helixMeta, AAA verdict snapshot, source-level signals).

Detect helix-native AAA evidence (helixMeta in CEM, aaa-verdicts.json snapshot, AAA-AUDIT.md sidecar, source-level signals) for a single tagName. Returns the raw HelixAaaEvidence object — useful for surfacing the same evidence helixir scores against (Storybook a11y card, readiness pipeline).

Generates a JSONL audit report scoring every component across all dimensions of the registered scoring system. Returns file path (if outputPath given) and summary stats. Each line is valid JSON for one component.

Identifies which web component framework the project uses by inspecting package.json dependencies, CEM metadata, and config files. Returns the framework name, version, CEM generator, and regeneration notes.

Validates proposed HTML usage of a web component against its CEM spec. Checks for unknown attributes, deprecated properties, invalid slot names, and enum type mismatches. Returns a pass/fail result with specific issues and "did you mean?" suggestions for typos.

Estimate the bundle size (minified + gzipped) for a web component or its parent npm package. Queries bundlephobia and the npm registry. Results are cached in memory for 24 hours.

Fetch and cache a web component library's Custom Elements Manifest (CEM) from a CDN registry (jsDelivr or UNPKG) by npm package name. Useful when the library is loaded via CDN without a local npm install. By default (register: false) the CEM is only fetched and cached locally — server state is NOT modified. Set register: true to also register the CEM into the multi-library store for use with other tools.

Generates a Storybook CSF3 story file for a web component based on its CEM declaration. Returns TypeScript source ready to paste into a .stories.ts file, with argTypes, default args, a render function, and named story exports for each variant value.

Compares 2-10 web component libraries by normalizing metrics (properties, events, CSS properties, documentation quality, slots) and producing a weighted score and markdown comparison table.

Load an additional web component library into memory by libraryId. Provide either a local cemPath or a packageName (+ optional version) to fetch from CDN. Once loaded, all CEM-dependent tools can target this library using the libraryId parameter.

List all loaded web component libraries with their IDs, component counts, and source types.

Remove a loaded library from memory. Cannot unload the "default" library. Subsequent tool calls with this libraryId will fail.

Generates TypeScript type definitions (.d.ts content) for all custom elements in the CEM. Attribute interface property names are sourced from the CEM attribute field (the HTML attribute name), not the JavaScript property name, ensuring the output accurately reflects the component API. Returns a string ready to save as helix.d.ts or similar.

Generates a Shadow DOM styling guide for a web component — token prefix, theming approach, dark mode support, anti-pattern warnings, and correct CSS usage snippets. Use this before writing any component CSS to prevent Shadow DOM mistakes.

Scans consumer CSS code for Shadow DOM anti-patterns — descendant selectors piercing shadow boundaries, ::slotted() misuse, invalid ::part() chaining, !important on tokens, unknown part names, and typo detection. Run this on any CSS targeting web components to catch mistakes before they reach production.

Validates consumer HTML against a component CEM — catches invalid slot names, wrong enum attribute values, boolean attribute misuse, and unknown attributes with typo suggestions. Run this on any HTML using web components to catch markup mistakes.

Validates event listener patterns against a component CEM — catches React onXxx props for custom events (won't work), unknown event names, misspelled events, and framework-specific binding mistakes. Supports React, Vue, and Angular patterns.

Returns a complete quick reference for a web component — all attributes with types and valid enum values, methods, events, slots, CSS custom properties with examples, CSS parts with ::part() selectors, a ready-to-use CSS snippet, Shadow DOM warnings, and antiPatterns (component-specific "don't do this" negative examples using real tag/part/token names). Use this as the FIRST call when working with any web component to get the complete API surface and avoid common mistakes.

Analyzes a component library for theming capabilities — token categories (color, spacing, typography, etc.), semantic naming patterns, dark mode readiness, and coverage score. Library-wide analysis, not per-component.

Scans HTML/JSX/template code for all custom element tags and verifies they exist in the loaded CEM. Catches non-existent components and misspelled tag names with fuzzy suggestions. Use this to verify that generated code only references real components.

Validates that children placed inside a web component's slots match the expected element types from the CEM — catches wrong child elements in constrained slots (e.g. putting a inside which requires ). Parses slot descriptions for "Must be", "Works best with", and "Accepts" patterns.

Detects conditional attributes used without their guard conditions — catches "target" without "href", "min"/"max" on non-number inputs, "checked" without type="checkbox", and other attribute interaction mistakes. Parses CEM member descriptions for "Only used when" and "Only applies to" patterns.

Validates consumer HTML for accessibility mistakes when using web components — catches missing accessible labels on icon buttons/dialogs/selects, and manual role overrides on components that self-assign ARIA roles. Run this on any HTML using web components to catch a11y issues.

Validates consumer CSS for custom property usage against a component CEM — catches unknown CSS custom properties with typo suggestions, and !important on design tokens (anti-pattern). Run this on any CSS that sets component-scoped custom properties.

ALL-IN-ONE validator — runs 19 anti-hallucination sub-validators on agent-generated code in a single call. Validates HTML attributes, slot children, attribute conflicts, a11y patterns, Shadow DOM CSS, custom properties, token fallbacks, theme compatibility, CSS specificity, layout patterns, inline styles, event bindings, method calls, composition patterns, component imports, color contrast, CSS scope, shorthand safety, and transition/animation patterns. Returns antiPatterns (component-specific negative examples) and auto-generated fix suggestions on issues. Use this as the FINAL check before submitting any code that uses web components.

Validates consumer CSS for proper var() fallback chains and detects hardcoded colors that break theme switching. Catches var() calls without fallback values (fragile if token undefined), hardcoded hex/rgb/hsl/named colors on color properties (breaks dark mode), and named CSS colors used directly instead of tokens. Run this on any CSS that references design tokens.

Validates cross-component composition patterns — catches tab/panel count mismatches, unlinked cross-references (tab panel="x" without matching panel name="x"), and empty containers (select with no options). Detects component pairs automatically from CEM slot descriptions. Run this on any HTML using compound components like tab-groups, selects, accordions, etc.

Validates JavaScript/TypeScript code for correct method and property usage on web components — catches hallucinated API calls (methods that do not exist), properties called as methods (e.g. dialog.open() when open is a boolean), methods assigned as properties (e.g. dialog.show = true), and typos with suggestions. Run this on any JS code that interacts with web component APIs.

Validates consumer CSS for dark mode and theme compatibility — catches hardcoded colors on background/color/border properties, hardcoded shadow colors, and potential contrast issues (light-on-light or dark-on-dark pairings). Does NOT require a CEM — works on any CSS. Run this on styling code to ensure it adapts to theme changes.

Analyzes code to determine which validation tools are most relevant — detects HTML, CSS, JavaScript, and JSX patterns, identifies custom element tags, and returns a prioritized list of tool names. Use this as a meta-tool to discover which validators to run on a given piece of code without running them all.

Generates concrete, copy-pasteable code fixes for validation issues. Pass the issue type (shadow-dom, token-fallback, theme-compat, method-call, event-usage, specificity, layout), the specific issue kind, and the original code — returns a corrected code snippet with an explanation. NOTE: styling_preflight and validate_css_file now embed fixes inline in each issue — only call suggest_fix directly for issues from other validators or when you need a fix for code not already validated.

Detects CSS specificity anti-patterns that cause styling issues with web components — catches !important usage, ID selectors targeting components, deeply nested selectors (4+ levels), and inline style attributes. Supports both CSS and HTML mode. Run this on any CSS or HTML to prevent specificity wars.

Detects layout anti-patterns when styling web component host elements — catches display overrides (components manage their own display), fixed pixel dimensions (breaks responsive), position absolute/fixed (conflicts with component positioning), and overflow: hidden (clips shadow DOM popups/tooltips). Run this on any CSS that sets layout properties on web components.

Detects when component-scoped CSS custom properties are set at the wrong scope. Catches component tokens placed on :root, html, body, or * selectors instead of on the component host element. Component tokens only take effect when set on the host — setting them on :root has no effect through shadow DOM.

Detects risky CSS shorthand + var() combinations that can fail silently. When var() is mixed with literal values in shorthand properties (border, background, font, margin, etc.), if any var() is undefined the ENTIRE declaration fails — not just the dynamic part. Suggests decomposing into longhand properties.

Detects color contrast issues in CSS: low-contrast hardcoded color pairs (light-on-light, dark-on-dark), mixed color sources (one design token + one hardcoded), and low opacity on text. Catches patterns that break readability across theme changes.

Detects CSS transitions and animations on web component hosts that target standard properties which cannot cross Shadow DOM boundaries. Transitions on standard properties (color, background, opacity) only affect the host element box, not the component internals. Use CSS custom properties for animations that the component consumes.

Detects JavaScript anti-patterns that violate Shadow DOM encapsulation from consumer code. Catches: accessing .shadowRoot.querySelector() to bypass encapsulation, calling attachShadow() on existing components, setting innerHTML on web components (overwriting slot content), and using style.cssText instead of CSS custom properties.

Resolves every ::part(), CSS custom property, and slot reference in agent-generated code against the actual component CEM data. Returns a structured report showing which references are valid, which are hallucinated, and suggests the closest valid alternatives. Call this BEFORE shipping any CSS to verify that every part name, token name, and slot name actually exists on the target component.

Single-call styling validation that combines component API discovery, CSS reference resolution, and anti-pattern detection. Returns: the component's full style API surface (parts, tokens, slots), valid/invalid status for every ::part() and token reference, Shadow DOM and theme validation issues with inline fix suggestions (each issue includes a fix object with corrected code + explanation), antiPatterns (component-specific negative examples), a correct CSS snippet, and a pass/fail verdict. Call this ONCE before finalizing any component CSS — fixes are embedded in each issue so you don't need a separate suggest_fix call.

Validates an entire CSS file targeting multiple web components in one call. Auto-detects all web component tag names in selectors, runs per-component validation (Shadow DOM, ::part() resolution, token validation, scope checks) and global validation (theme compatibility, color contrast, specificity, shorthand). Each component result includes antiPatterns (negative examples) and each issue includes an inline fix object with corrected code + explanation. Returns issues grouped by component plus global issues. Use this when reviewing a CSS file that styles multiple components — no need to know which components are used.

Detects dark mode styling anti-patterns specific to web components with Shadow DOM. Catches: (1) theme-scoped selectors (.dark, [data-theme], @media prefers-color-scheme) setting standard CSS properties on web component hosts — these won't reach shadow DOM internals, (2) descendant selectors inside theme scopes trying to pierce shadow boundaries. Suggests using CSS custom properties to communicate theme changes through shadow DOM. Run this on any CSS that implements dark mode or theming for web components.

Scaffold a complete enterprise CSS theme from the component library's design tokens. Analyzes the CEM to detect the token prefix and categories, then generates a ready-to-customize CSS file with light mode variables, dark mode overrides (via prefers-color-scheme and explicit class), and color-scheme declarations. Returns the full CSS content and per-category token counts.

Map a theme token definition to specific components, showing how to apply it with correct CSS custom property overrides. Accepts a map of CSS variable names to values, then generates per-component CSS blocks and a global :root block. Use this after create_theme to wire your theme tokens to individual component CSS properties.

Generate a complete Helix-pattern web component scaffold: Lit class with decorators, CEM annotations (@slot, @csspart, @fires), Vitest test stub, Storybook CSF3 story, and CSS structure. Conventions (tag prefix, base class) are auto-detected from the library CEM so the generated code matches existing library patterns.

Generates a properly subclassed TypeScript component extending an existing web component. Produces the correct inheritance chain (class NewClass extends ParentClass), CEM @customElement annotation, CSS part forwarding guidance (exportparts), inherited slot documentation, TypeScript HTMLElementTagNameMap declaration, and Shadow DOM style encapsulation warnings. Prevents common extension anti-patterns such as broken inheritance chains, missing exportparts declarations, and style isolation surprises.

Run a structured codex adversarial audit against one component. Caches results by contract-surface hash so unchanged surfaces hit cache instantly; surface changes force a fresh review. Findings reference the helix defect-class corpus (01–14). Use this BEFORE shipping an extending component or migrating between helix versions.

Audit a component for token-related defects across helix R8/R11/R14/R32 alias renames, cascade gaps under dark / high-contrast overlays, and raw color literals where tokens exist. Findings reference defect-corpus classes 01, 02, 03, 14. Use this BEFORE shipping an extending component or migrating across helix major versions.

Look up a single token (or every alias in the loaded map) against the helix R-round deprecation history. Returns whether the name is canonical, the canonical replacement, and provenance metadata (R-round, commit, removal version). Backbone of M4 finding generation; expose for ad-hoc consumer queries.

Audit an extending component against its parent's contract surface. Catches slot drift, ARIA regressions, lost form-association, suppressed events, missing forced-colors blocks, sub-44px touch targets, and broken accessible-label devWarn patterns. Findings reference defect-corpus classes 05-11. Use this BEFORE shipping any helix-pattern subclass.

Discover the helixir MCP tool catalog: every registered tool with its summary, when-to-call triggers, input shape, and tags. Filter by tag or substring. Use this FIRST when you are unsure which helixir tool fits a task — install ≠ adoption.

Run TypeScript diagnostics on a single file and return any type errors or warnings.

Run a full TypeScript diagnostic pass on the entire project and return error and warning counts.

List all design tokens from the configured tokens file, optionally filtered by category (e.g. "color", "spacing", "typography"). Requires tokensPath to be set in mcpwc.config.json or MCP_WC_TOKENS_PATH.

Find design tokens by name pattern or value using a case-insensitive substring match. Requires tokensPath to be set in mcpwc.config.json or MCP_WC_TOKENS_PATH.