From philips-filament-design-toolkit
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'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/philips-filament-design-toolkit:filament-lookupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Fast, authoritative lookup for Filament component APIs and icons. Reads directly from the installed packages — no guessing.
Fast, authoritative lookup for Filament component APIs and icons. Reads directly from the installed packages — no guessing.
When asked about a component's props:
Find the declaration file:
node_modules/@filament/<kebab-case-name>-react/dist/<kebab-case-name>.d.ts
Read and summarize the exported props interface
Show usage example from the codebase if available
Button → @filament/button-reactDataGrid → @filament/data-grid-reactTextField → @filament/text-field-reactToggleSwitch → @filament/toggle-switch-reactDatePicker → @filament/date-picker-reactTopBar → @filament/top-bar-reactViewContainer → @filament/view-container-reactRichTextEditor → @filament/rich-text-editor-reactDigitTextField → @filament/digit-text-field-reactModeTag → @filament/mode-tag-reactSplitButton → @filament/split-button-reactToggleButton → @filament/toggle-button-reactMenuButton → @filament/menu-button-reactFileUploadArea / FileUploadButton → @filament/file-upload-reactProgressBar → @filament/progress-bar-reactColorPicker → @filament/color-picker-reactComboBox → @filament/combo-box-reactRadioButton → @filament/radio-button-reactPatientInfo → @filament/patient-info-reactMovieBar → @filament/movie-bar-reactPageIndicator → @filament/page-indicator-reactNavLink → @filament/nav-link-reactInputDecorator → @filament/input-decorator-reactListView → @filament/list-view-reactListBox → @filament/list-box-reactTreeView → @filament/tree-view-reactBottomBar → @filament/bottom-bar-reactGeneral rule: PascalCase component → kebab-case package name with -react suffix.
When asked to find an icon:
Glob for candidates:
node_modules/@filament-icons/react/dist/icons/<search-term>*.js
Return matches as PascalCase imports
Note -fill variants when available
Common Filament hooks (from @filament/react or individual packages):
useFilter — for ComboBox filteringuseMenuTrigger — for Menu trigger managementuseOverlayTrigger — for Popover/Dialog triggersuseAsyncList — for async data loading in lists/tablesRead hook signatures from:
node_modules/@filament/common-react/dist/*.d.ts
## [ComponentName] Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ... | ... | ... | ... |
Source: node_modules/@filament/[package]/dist/[file].d.ts
npx claudepluginhub viru-janadri/philips-filament-design-toolkit --plugin philips-filament-design-toolkitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.