S
systra-tools/systra-tools-plugin
620+ React and Tailwind sections your coding agent can search and pull over MCP
View on GitHub ↗Link checked 2026-11-14 · HTTP 200 · opens the vendor's own site
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"systra-tools-systra-tools-plugin": {
"command": "npx",
"args": ["skills@latest"]
}
}
}Parsed from the README we fetched on 2026-11-12; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"systra-tools-systra-tools-plugin": {
"command": "npx",
"args": ["skills@latest"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio systra-tools-systra-tools-plugin -- npx skills@latest
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 0 ★ · systra-tools/systra-tools-plugin · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-11-13 · last seen 2026-11-14 · seen 2× · listed by 1 sources
- Score
- score 103 · 1 sources · repo
- Install
npx skills@latest
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx skills@latest. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We filed it under these tags: 开源项目. The tags come from the entry itself, not a taxonomy we imposed.
Who maintains it?
repository
systra-tools/systra-tools-plugin；first catalogued 2026-11-13；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.# Systra Tools
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
A growing collection of production-ready React + Tailwind sections and
elements, searchable by your coding agent over MCP.
Systra Tools is a growing library of React and Tailwind sections and elements:
heroes, pricing tables, bento grids, dashboards, footers and more. This
repository connects it to your coding agent over MCP, so Claude, Cursor or
VS Code can search the library and drop a section into your project as a
single TSX file.
Every component imports only react, framer-motion and lucide-react and
respects reduced motion. Free components are available without a key. A Premium key from https://systra.tools/mcp opens the whole library, the
image library and the page recipes.
## Install
### Cursor
Click the button above, or add the plugin from
cursor.directory, or configure it by hand in
~/.cursor/mcp.json:
json
"mcpServers": {
"systra-tools": {
"url": "https://systra.tools/api/mcp",
"headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }
### Claude Code
/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra
### VS Code, Windsurf and anything else that speaks MCP
Point an HTTP MCP server at https://systra.tools/api/mcp. That alone works
for the free components; with a Premium key, send it as
Authorization: Bearer .
## Improve the design, not just the code
The MCP server gives your coding agent real UI components. The separate, free
Systra Taste skills help it
decide which composition works, review generic layouts, and preview distinct
redesigns before replacing an existing interface.
bash
npx skills@latest add systra-tools/systra-taste
Use systra-taste to build, systra-taste-review to critique, and
systra-taste-repair to redesign. They work without a key; this MCP integration
is optional.
## Your key
The key is optional. Without one the agent gets the free sample components.
For the full library, create a Premium key at
systra.tools/mcp and put it in the environment as
SYSTRA_MCP_KEY. Do not commit the key.
## What the agent gets
| Tool | What it does |
| list_categories | categories with counts |
| list_components, search_components | find a section by intent |
| get_component | the full source |
| list_recipes, get_recipe | an ordered page recipe |
| list_styles, get_style, get_component_styled | the same component in a real brand's colours and fonts |
| list_images, search_images | imagery with permanent URLs |
elements, searchable by your coding agent over MCP.
Systra Tools is a growing library of React and Tailwind sections and elements:
heroes, pricing tables, bento grids, dashboards, footers and more. This
repository connects it to your coding agent over MCP, so Claude, Cursor or
VS Code can search the library and drop a section into your project as a
single TSX file.
Every component imports only react, framer-motion and lucide-react and
respects reduced motion. Free components are available without a key. A Premium key from https://systra.tools/mcp opens the whole library, the
image library and the page recipes.
## Install
### Cursor
Click the button above, or add the plugin from
cursor.directory, or configure it by hand in
~/.cursor/mcp.json:
json
"mcpServers": {
"systra-tools": {
"url": "https://systra.tools/api/mcp",
"headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }
### Claude Code
/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra
### VS Code, Windsurf and anything else that speaks MCP
Point an HTTP MCP server at https://systra.tools/api/mcp. That alone works
for the free components; with a Premium key, send it as
Authorization: Bearer .
## Improve the design, not just the code
The MCP server gives your coding agent real UI components. The separate, free
Systra Taste skills help it
decide which composition works, review generic layouts, and preview distinct
redesigns before replacing an existing interface.
bash
npx skills@latest add systra-tools/systra-taste
Use systra-taste to build, systra-taste-review to critique, and
systra-taste-repair to redesign. They work without a key; this MCP integration
is optional.
## Your key
The key is optional. Without one the agent gets the free sample components.
For the full library, create a Premium key at
systra.tools/mcp and put it in the environment as
SYSTRA_MCP_KEY. Do not commit the key.
## What the agent gets
| Tool | What it does |
| list_categories | categories with counts |
| list_components, search_components | find a section by intent |
| get_component | the full source |
| list_recipes, get_recipe | an ordered page recipe |
| list_styles, get_style, get_component_styled | the same component in a real brand's colours and fonts |
| list_images, search_images | imagery with permanent URLs |
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/systra-tools-systra-tools-plugin/)
- Source
- github · https://github.com/systra-tools/systra-tools-plugin
- Browse by field
- Open source
- added
- today
More like this
Filed under
Every tag opens the full list for that filter. Counts are the live catalogue figures.