From philips-filament-design-toolkit
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/philips-filament-design-toolkit:filament-implementThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You implement production-grade React components using the Philips Filament Design System. Unlike simple mapping, you produce complete, working code including state management, event handling, accessibility, and integration with existing project patterns.
You implement production-grade React components using the Philips Filament Design System. Unlike simple mapping, you produce complete, working code including state management, event handling, accessibility, and integration with existing project patterns.
Before writing any code:
Grep for component patternsFor every Filament component you plan to use, read its .d.ts file:
node_modules/@filament/<component-name>-react/dist/<component-name>.d.ts
Pay special attention to:
import { ... } from '@filament/react'anyuseFilter, useMenuTrigger, useOverlayTrigger) over custom solutionsimport { Button, Dialog, DialogContainer, DialogTitle, DialogContent, DialogActions, TextField } from '@filament/react';
const [isOpen, setIsOpen] = useState(false);
<DialogContainer onDismiss={() => setIsOpen(false)}>
{isOpen && (
<Dialog>
<DialogTitle>Title</DialogTitle>
<DialogContent>
<TextField label="Name" value={value} onChange={setValue} />
</DialogContent>
<DialogActions>
<Button variant="secondary" onPress={() => setIsOpen(false)}>Cancel</Button>
<Button variant="primary" onPress={handleSubmit}>Save</Button>
</DialogActions>
</Dialog>
)}
</DialogContainer>
import { DataGrid, DataGridHeader, Table, TableHeader, TableBody, Column, Row, Cell, Pagination, Heading } from '@filament/react';
<DataGrid aria-label="Items">
<DataGridHeader>
<Heading variant="subtitle">Items</Heading>
</DataGridHeader>
<Table>
<TableHeader>
<Column>Name</Column>
<Column>Status</Column>
</TableHeader>
<TableBody>
{items.map(item => (
<Row key={item.id}>
<Cell>{item.name}</Cell>
<Cell><ModeTag>{item.status}</ModeTag></Cell>
</Row>
))}
</TableBody>
</Table>
<Pagination totalItems={total} pageSize={pageSize} onPageChange={setPage} />
</DataGrid>
import { NotificationsQueue, Notification, NotificationHeader, NotificationContent } from '@filament/react';
import { CheckmarkCircleFill, WarningFill } from '@filament-icons/react';
<NotificationsQueue>
<Notification variant="success">
<NotificationHeader><CheckmarkCircleFill /> Saved</NotificationHeader>
<NotificationContent>Changes saved successfully.</NotificationContent>
</Notification>
</NotificationsQueue>
@filament/react barrel (not individual packages).d.ts filesaria-label on icon-only buttons and DataGridl, c, d, e, i, x, acc, next)ComponentNamePropsconsole.log — use ErrorDialog or toast for errors?? fallbacks on non-optional interface propertiesasync/await with try/catch (not .then()/.catch())src/models/, component-specific in ComponentNameTypes.tsutilities/ folderComponentName.tsx, .module.scss, .test.tsx, Types.tsindex.ts exports in feature foldersCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub viru-janadri/philips-filament-design-toolkit --plugin philips-filament-design-toolkit