Handfish Design

Use whenever building, modifying, debugging, or styling a web application that uses the Handfish Design System (handfish.noisefactor.io) — the Web Components and OKLCH design-token library that powers Noisedeck, Tetra, and the Noise Factor product family. Triggers on imports from `handfish` or `@noisedeck/handfish`, references to `--hf-*` CSS variables, use of any handfish custom element (toggle-switch, slider-value, select-dropdown, dropdown-menu, dropdown-item, color-picker, color-wheel, color-swatch, gradient-stops, vector2d-picker, vector3d-picker, code-editor, image-magnifier, justify-button-group), the AboutDialog class, the toast helper functions (showToast, showSuccess, showError, showWarning, showInfo), tooltip initialization (initializeTooltips, the `.tooltip` class plus `data-title` attribute), the escape handler (registerEscapeable / initEscapeHandler), color-conversion utilities (parseHex, rgbToHex, rgbToHsv, rgbToOklch, oklchToRgb, etc.), theme switching via `data-theme`, OKLCH color math, or any frontend work in a Noisemaker-based app (Noisedeck, Tetra, Foundry, Polymorphic, Layers, Shade, Blaster, ShuffleSet, Sleeve, Remap, Handfish itself). Also use when overriding component styles, building a custom theme, integrating a handfish form into a `<form>`, or adding a new component to the handfish library. If a stylesheet references `--hf-`, if HTML contains a hyphenated custom element from the catalog above, or if a JS module imports from `handfish` — this skill applies.

mkdir -p ~/.claude/skills/handfish-design
curl -L https://claudskills.com/skills/handfish-design/SKILL.md \
  -o ~/.claude/skills/handfish-design/SKILL.md

@misc{handfish-design-2026,
  author    = {noisefactorllc},
  title     = {Handfish Design [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/handfish-design/}
}