pf-import-checker

Audit and fix PatternFly import paths for charts, chatbot, and component-groups.

10|26|Updated Jul 8, 2025
One-click install
npx skills add https://github.com/patternfly/ai-helpers --skill pf-import-checker
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pf-import-checker
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/react/skills/pf-import-checker
Command: npx skills add https://github.com/patternfly/ai-helpers --skill pf-import-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PatternFly import paths are easy to misconfigure, leading to unresolved modules, broken charts, chatbot integrations, and component groups. This skill audits and fixes those paths to ensure correct module resolution across the project.

Core Features & Use Cases

  • Validate import paths for PatternFly charts from @patternfly/react-charts to ensure compatibility with dynamic or Victory-based imports.
  • Enforce chatbot imports to use @patternfly/chatbot/dist/dynamic/* to support runtime loading.
  • Enforce component-group imports to use @patternfly/react-component-groups/dist/dynamic/* for dynamic rendering.
  • Provide actionable fixes and guidance for common import errors in PatternFly-heavy applications.

Quick Start

Run pf-import-checker on your codebase to identify and fix invalid PatternFly import paths.

Frequently Asked Questions about pf-import-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix unresolved PatternFly chart imports in my JavaScript project?

To fix unresolved PatternFly chart imports, audit your codebase to ensure chart imports are sourced from the correct subpath within @patternfly/react-charts. This enforces compatibility with Victory-based and dynamic loading mechanisms.

Why does my PatternFly chatbot integration have broken module resolution?

Broken PatternFly chatbot module resolution happens when import paths are misconfigured. You must enforce chatbot imports strictly from @patternfly/chatbot/dist/dynamic/* to support proper runtime loading and resolve the modules correctly.

What is the correct import path for PatternFly component groups?

The correct import path for PatternFly component groups is @patternfly/react-component-groups/dist/dynamic/*. Enforcing this specific dynamic subpath ensures proper module resolution and supports dynamic rendering across your application.

How do I audit my codebase for missing PatternFly CSS imports?

You can audit your codebase for missing PatternFly CSS imports by running a static analysis check on your project. This process validates import paths and flags any missing CSS dependencies that could break component styling.

Does the PatternFly import checker work with both JavaScript and TypeScript codebases?

Yes, the PatternFly import checker works with both JavaScript and TypeScript codebases. It validates and corrects import paths across both environments to ensure correct module resolution for charts, chatbot, and component groups.

What's the best way to prevent misconfigured PatternFly dynamic import paths?

The best way to prevent misconfigured PatternFly dynamic import paths is to run a static analysis audit that enforces correct subpaths for charts, chatbot, and component-groups. This provides actionable fixes for common module resolution errors.