What is ui-fx-kit?
ui-fx-kit is a catalogue of 64 web effects, 19 hooks, 13 CSS snippets and 13 palettes. Its Node MCP server exposes 16 tools, so an AI coding agent can search effects, suggest combinations, check a performance budget and audit what is already installed in a project.
It is a kit of visual effects for web interfaces. The repository holds 64 effects, 19 hooks, 13 CSS snippets and 13 palettes, plus an MCP server that lets an agent query that catalogue instead of writing effects from memory.
You can also use it without MCP. The CLI adds pieces to a project with npx ui-fx-kit add ..., and the server wraps the same catalogue for agents.
What the 16 tools cover
| Job | Tools |
|---|---|
| Find an effect | find_effects, search, list_effects, get_effect, get_effect_bundle |
| Combine and budget | suggest_combination, check_performance_budget |
| CSS and hooks | list_css, get_css, list_hooks, get_hook |
| Presets and examples | get_preset, get_examples |
| Project state | audit_install, get_project_status, check_updates |
Who it suits
Best for
- Front end work where an agent should pick from tested effects, not invent them.
- Motion heavy pages. Related: Emil Animate and GSAP Core.
- Teams that care about cost, since check_performance_budget exists for that, Related: Fixing Motion Performance.
Not for
- Anyone who wants a one line npx server. Setup points node at
mcp-server.jsin your copy of the repository. - Projects with no front end code to add effects to.
- Design to code from Figma, since it never reads a design file.
Use it with UiChemy
ui-fx-kit adds polish to code your agent writes. For WordPress, UiChemy's AI to WordPress imports an AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect ui-fx-kit MCP: 64 Web Effects Your Agent Can Search and Install to your AI client
{
"mcpServers": {
"ui-fx-kit": {
"command": "node",
"args": ["/path/to/ui-fx-kit/mcp-server.js"]
}
}
}Get the repository
Put a copy of pptt3300/ui-fx-kit on your machine, because the config points node at
mcp-server.jsinside it.Register the server
Add the JSON block above to
~/.claude.jsonor a project.mcp.json, with your real path tomcp-server.js.Ask for an effect
Describe the look you want. The agent can call find_effects or suggest_combination, then get_effect_bundle for the code.
Or use the CLI directly
Run
npx ui-fx-kit add ...in a project to add pieces without MCP.
Client configuration
{
"mcpServers": {
"ui-fx-kit": {
"command": "node",
"args": ["/path/to/ui-fx-kit/mcp-server.js"]
}
}
}Endpoints and ports
/path/to/ui-fx-kit/mcp-server.jsReplace with the path to your copyWhat you can do with it
- 64 effectsA catalogue of web effects an agent can search by need instead of writing from scratch.
- 19 hooksReusable hooks sit beside the effects and can be fetched one at a time.
- 13 CSS snippetsSmall CSS pieces are listed and returned separately from the larger effects.
- 13 palettesColour palettes ship with the kit, and presets can be fetched through get_preset.
- Performance checkcheck_performance_budget tests a set of effects against a budget before you commit to them.
- Install auditaudit_install, get_project_status and check_updates report on what a project already has.
- CLI as well
npx ui-fx-kit add ...adds pieces without an agent.
Tools it exposes
find_effects
Finds effects that match a described look or need.
get_effect_bundle
Returns the files for an effect as a bundle.
suggest_combination
Suggests effects that work together.
check_performance_budget
Checks a chosen set of effects against a performance budget.
list_effects
Lists the available effects.
search
Searches the catalogue.
list_css
Lists the CSS snippets.
get_css
Returns one CSS snippet.
list_hooks
Lists the hooks.
get_hook
Returns one hook.
get_preset
Returns a preset.
get_effect
Returns one effect.
get_examples
Returns usage examples.
audit_install
Audits what is installed in a project.
get_project_status
Reports the status of the project's installed pieces.
check_updates
Checks for updates to installed pieces.
Frequently asked questions
What is ui-fx-kit MCP?
It is an MCP server for ui-fx-kit, a library of 64 web effects, 19 hooks, 13 CSS snippets and 13 palettes. It gives an AI agent 16 tools to find, fetch and audit those pieces in a project.
How do I install ui-fx-kit MCP?
Add the JSON block with command node and args pointing at /path/to/ui-fx-kit/mcp-server.js to ~/.claude.json or a project .mcp.json, using your real path. The README describes this as a one time setup for Claude Code MCP settings.
How many tools does it have?
Sixteen. They cover finding effects, fetching bundles, hooks, CSS and presets, suggesting combinations, checking a performance budget, and auditing install status and available updates for a project you work in.
Can I use it without MCP?
Yes. The repository also offers a CLI, and npx ui-fx-kit add ... adds pieces to a project directly. The MCP server simply gives an agent the same catalogue to query during a session.
Does it check performance?
It has a check_performance_budget tool for that. The README does not describe the budget numbers in the facts I could verify, so read the repository before relying on a specific threshold.
How does it compare with motion libraries?
It is a catalogue of ready effects rather than one animation engine. The kit lists 64 effects, 19 hooks, 13 CSS snippets and 13 palettes, and check_performance_budget tests a set of effects against a budget. Related: GSAP Core.
What license does it use?
The repository is MIT licensed, which allows personal and commercial use under the usual MIT terms. Check the repository for the full license text and any notices that apply to bundled assets.