SkillFoxx

timepicker-ui MCP

A timepicker-ui reference for the agent: options, events, themes, ready snippets and time validation without reading the docs

  • 102 ★ on the repository
  • Last commit
MCP server

Minimal access

Why this level

  • All tools only read reference data and carry `readOnlyHint`; the server does not touch project files
All reasons and checks

pglejzer/timepicker-uiAuthor:pglejzer

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/timepicker-ui-mcp

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • All tools only read reference data and carry `readOnlyHint`; the server does not touch project files

This is third-party code. Review the repository files before installing.

What it does

An MCP server for timepicker-ui, a plain JavaScript time picker for web forms. The agent looks up options, events, CSS variables, classes and themes there instead of guessing names from memory. The data is generated from the library source and the docs site, so deprecated options are flagged and hidden from lists by default. The server exposes 17 tools: reference search, a breakdown of one option (`explain_option`), lists of methods, modes and plugins, recipes for React, Next.js, Vue, Angular and Svelte, and migration guides between versions. `generate_snippet` builds setup code with the chosen theme and mode, `generate_custom_theme` outputs CSS for your own theme, and `validate_time` and `validate_disabled_time` check values and a disabled-intervals config. All tools only read reference data.

Who it is for. Frontend developers who add timepicker-ui to a form and want the agent to pick options and port code from older versions without naming mistakes.

Good fit when

  • Timepicker goes into a Next.js app and the agent needs a ready snippet that accounts for server rendering
  • Code on version 3 or 4.x must move to grouped options and the agent mixes up renamed fields
  • The picker must block hours on a schedule and the `disabledTime` config should be checked before launch
  • A component needs its own theme and the `--tp-` CSS variables are easier to get as a scaffold than to write by hand

Not a fit when

  • The project uses a different time picker library: the server only knows timepicker-ui
  • You need to change the library code itself: the server reads the reference and does not write to source
  • One docs page is enough: opening timepicker-ui.vercel.app is simpler

Example request

Add timepicker-ui to Next.js with the Dark theme in wheel mode and a ban on 12:00 to 14:00, then validate the disabled-time config

MCP

Transport
stdio
Authentication
not required

Limitations

The server runs over stdio and needs Node.js 20 or newer. The reference covers one library and its versions, so the agent has to look elsewhere for anything else. Part of the data, namely themes, modes, plugins, the method list and framework recipes, is written by hand and may lag behind a new library release. The version 5 migration guide is marked as a draft. On native Windows `npx` is launched through a `cmd /c` wrapper. No API keys or environment variables are needed.

How to disable. Run `claude mcp remove timepicker-ui` or delete the `timepicker-ui` entry from `claude_desktop_config.json`, then restart the client.

FAQ

How do I install timepicker-ui MCP in Claude Code?

With `claude mcp add --scope user timepicker-ui -- npx -y timepicker-ui-mcp`. Without `--scope user` the server appears in the current project only. After install `claude mcp list` shows the Connected status.

Are API keys needed?

No, the server runs without keys or environment variables and only reads the library reference data.

Which frameworks do the recipes cover?

Vanilla JS, React, the timepicker-ui-react wrapper, Next.js, Vue, Angular and Svelte, with server rendering notes.

How do I connect it to Claude Desktop?

Add an entry to `mcpServers` in `claude_desktop_config.json` with the `node` command and the path to the built `build/index.js`, then restart Claude Desktop.

What does `validate_time` check?

Strings like `HH:MM`, `HH:MM:SS`, `h:MM AM/PM` and `h:MM:SS AM/PM` for 12-hour and 24-hour clocks.

Discussion

No questions or reviews yet.

MCP servers
Official

MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project

MCP serverExtended access750
Official

An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations

MCP serverExtended access2.2K
Official

Chakra UI MCP server: a reference for components, props and theme tokens, plus code review for moving from version 2 to 3

MCP serverExtended access40.7K

The @microcharts/mcp server: an agent picks from 106 tiny React charts, gets ready props and receives SVG with alt text

MCP serverMinimal access207
Official

21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent

MCP serverExtended access6.5K

An MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector

MCP serverExtended access600

README in short

Tool tables, resource and prompt lists, then build and tests, where the data comes from, and setup for Claude Code and Claude Desktop.

README badge

Report a problem