philips-filament-design-toolkit

philips-filament-design-toolkit

Claude Code plugin for the Philips Filament Design System (@filament/react).

Provides component mapping, implementation guidance, templates, typography help, QA validation, icon lookup, prop discovery, registry setup, and automated code review for React apps using Filament.

Installation

claude plugin add viru-janadri/philips-filament-design-toolkit

Features

• 8 Skills for every stage of Filament development
• 1 Agent (filament-reviewer) for code review
• MCP Integration — live API lookups via https://api.filament.rocks/mcp
• Always-on instructions — coding standards enforced on every .ts/.tsx file
• 2 Hooks — auto-validation on Write/Edit + pre-commit checks

Skills

| 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" | | /filament-templates | Search and apply pre-built templates | "template for form", "boilerplate for table" | | /filament-typography | Typography component selection guide | "which heading", "H1 vs H2", "text variant" | | /filament-qa | Post-generation quality assurance | "QA this", "check my code", "validate" | | /filament-registry-setup | Configure Artifactory registry access | "registry setup", "can't install filament" |

Agent

| Agent | Purpose | |---|---| | filament-reviewer | Reviews TSX code for Filament anti-patterns |

MCP Server

Connects to the Filament API server for live component data:

{
  "mcpServers": {
    "filament": {
      "type": "http",
      "url": "https://api.filament.rocks/mcp"
    }
  }
}

Available tools: search_api, search_api_members, find_api_examples, list_api, find_templates, get_template, list_templates, documentation.

Automatic Hooks

Write/Edit Hook

Runs after every .tsx/.jsx file modification: 1. Barrel imports from @filament/react (not individual packages) 2. PascalCase icon imports from @filament-icons/react 3. No generic HTML where Filament equivalents exist

Pre-Commit Hook

Validates staged .tsx/.jsx files before git commit: 1. Barrel import pattern 2. PascalCase icons 3. No generic HTML substitutes 4. No any type annotations

Always-On Instructions

The instructions/filament-react.instructions.md file enforces Filament coding standards on every .ts/.tsx/.jsx file — no need to invoke a skill for basic rules to apply.

Core Rules

1. Always barrel import: import { X } from '@filament/react' 2. Never generic HTML: Use Button not <button>, TextField not <input> 3. Always verify props: Read .d.ts files or use MCP, never guess 4. Match project patterns: Search codebase before implementing 5. PascalCase icons: WarningFill not warningFill

Filament Packages

node_modules/@filament/*-react/        — 72 component packages
node_modules/@filament-icons/react/    — 1066 icons

NPM Registry Setup

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/
//artifactory.hsdp.io/artifactory/api/npm/filament-npm/:_authToken=${FILAMENT_TOKEN}

For local development, set the env var:

export FILAMENT_TOKEN="<your-artifactory-token>"

Use /filament-registry-setup for guided setup and troubleshooting.

License

Proprietary - Philips internal use only.