By viru-janadri
Philips Filament Design System — component mapping, implementation, icon lookup, and prop discovery for React apps using @filament/react
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.
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Claude Code plugin for the Philips Filament Design System (@filament/react).
Provides component mapping, implementation guidance, icon lookup, prop discovery, and automated code review for React apps using Filament.
claude plugin add viru-janadri/philips-filament-design-toolkit
| Skill | Purpose | Trigger |
|---|---|---|
/filament-ui | Map designs/screenshots to Filament components | Design image, "which component for X" |
/filament-implement | Full production implementation with patterns | "implement", "build", "create this page" |
/filament-lookup | Quick prop/icon/API lookup | "what props does X have", "find icon for" |
/filament-init | Scaffold Filament into a new/existing project | "set up filament", "init filament" |
/filament-catalog | Auto-generate component catalog from installed packages | "update catalog", "scan filament components" |
| Agent | Purpose |
|---|---|
filament-reviewer | Reviews TSX code for Filament anti-patterns |
A PostToolUse hook runs after every Write/Edit to .tsx/.jsx files and checks:
@filament/react (not individual packages)@filament-icons/reactimport { X } from '@filament/react'Button not <button>, TextField not <input>.d.ts files from node_modules, never guessWarningFill not warningFillnode_modules/@filament/*-react/ — 72 component packages
node_modules/@filament-icons/react/ — 1066 icons
Filament packages are hosted on the Philips HSDP Artifactory. Add this .npmrc to your project root:
@filament:registry=https://artifactory.hsdp.io/artifactory/api/npm/filament-npm/
@filament-icons:registry=https://artifactory.hsdp.io/artifactory/api/npm/filament-npm/
@filament-react:registry=https://artifactory.hsdp.io/artifactory/api/npm/filament-npm/
@filament-theme:registry=https://artifactory.hsdp.io/artifactory/api/npm/filament-npm/
always-auth=true
For local development, add your auth token (do not commit):
//artifactory.hsdp.io/artifactory/api/npm/filament-npm/:_authToken=${HSDP_TOKEN}
Proprietary - Philips internal use only.
npx claudepluginhub viru-janadri/philips-filament-design-toolkit --plugin philips-filament-design-toolkitUltra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Multi-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
Curate auto-memory, promote learnings to CLAUDE.md and rules, extract proven patterns into reusable skills.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions