philips-filament-design-toolkit

Reviews React/TSX code for correct Filament Design System usage. Catches anti-patterns like direct package imports, missing barrel imports, generic HTML where Filament components exist, incorrect prop usage, and missing accessibility patterns.

Auto-generate the Filament component catalog by scanning node_modules/@filament/*-react/ packages. Produces an up-to-date component-catalog.md from the actually installed packages. TRIGGERS: 'update filament catalog', 'regenerate catalog', 'refresh component list', 'scan filament components', 'what filament components are available'.

Implement a UI feature using Philips Filament Design System components. Produces complete, tested React components with correct state management, accessibility, and Filament patterns. TRIGGERS: 'implement this feature', 'build this component', 'create this page', 'add this form', 'wire up this dialog' — any request to write production Filament code.

Scaffold a new React project with Philips Filament Design System. Sets up .npmrc, webpack loader, theme provider, and installs core packages. TRIGGERS: 'set up filament', 'init filament', 'new filament project', 'add filament to this project', 'scaffold filament'.

Quick lookup for Filament component props, icon names, or API details. Reads .d.ts files and icon directories to give authoritative answers. TRIGGERS: 'what props does X have', 'find me an icon for', 'how do I use Filament X', 'Filament API for', 'what icons match'.

Map design screenshots, Figma wireframes, or UI descriptions to Philips Filament Design System components. Identifies visual elements and provides correct React component usage with props, imports, and icons. TRIGGERS: when the user provides a design screenshot, Figma wireframe, mockup image, or asks 'which component for X', 'implement this UI', 'build this screen', 'convert this design', 'what Filament component', or asks to implement any UI from a visual reference.

1 hook across 1 event