{
  "markdown": "# Vaadin Agent Skills\n\nAgent skills for helping coding agents style, design, and lay out Vaadin 25 applications.\n\nThese skills can be installed as a plugin from the [`vaadin/agent-marketplace`](https://github.com/vaadin/agent-marketplace) marketplace (Claude and Codex) or with the [`skills` CLI](https://github.com/vercel-labs/skills) from `vercel-labs/skills`.\n\nThis repository can be used in three ways:\n\n- as a plugin installed from the [`vaadin/agent-marketplace`](https://github.com/vaadin/agent-marketplace) marketplace (Claude and Codex)\n- as a source for `npx skills add`\n- as a Codex/Claude plugin source referenced directly\n\nIt includes:\n\n- `.codex-plugin/plugin.json` for Codex plugin metadata\n- `.claude-plugin/plugin.json` for Claude plugin metadata\n- `.mcp.json` for the Vaadin MCP server configuration\n- `skills/` for the shared skill definitions\n- `tools/` for the scripts that generate parts of those skills from upstream sources\n\nFor Claude users, the older [`vaadin/claude-plugin`](https://github.com/vaadin/claude-plugin) repository is kept as a marketplace that points back to this source-of-truth repository.\n\n## Installation\n\n### Marketplace (recommended)\n\nThe skills are published through the [`vaadin/agent-marketplace`](https://github.com/vaadin/agent-marketplace)\nmarketplace for both Claude Code and Codex. Installing the plugin this way also\nconfigures the Vaadin MCP server automatically from `.mcp.json` — no separate\nMCP setup required.\n\n**Claude Code:**\n\n```sh\n/plugin marketplace add vaadin/agent-marketplace\n/plugin install vaadin-skills@vaadin-marketplace\n```\n\nYou can also browse and install `vaadin-skills` from the marketplace browser via\n`/plugin`. To pick up later changes, run `/plugin marketplace update vaadin-marketplace`.\n\nIf you previously added the deprecated [`vaadin/claude-plugin`](https://github.com/vaadin/claude-plugin)\nmarketplace, which uses the same `vaadin-marketplace` name, or added this one\nunder a different URL, Claude Code refuses the `add` with *\"its network source\ndiffers from the one declared for it in settings\"*. Remove the old entry first,\nthen add and install again:\n\n```sh\n/plugin marketplace remove vaadin-marketplace\n/plugin marketplace add vaadin/agent-marketplace\n/plugin install vaadin-skills@vaadin-marketplace\n```\n\n**Codex:**\n\n```sh\ncodex plugin marketplace add vaadin/agent-marketplace --ref main\ncodex plugin add vaadin-skills@vaadin-marketplace\n```\n\nTo pick up later changes, run `codex plugin marketplace upgrade`.\n\n### `npx skills add`\n\nIf you prefer to install just the skill files (without the plugin and its MCP\nconfiguration), use the [`skills` CLI](https://github.com/vercel-labs/skills).\n\nInstall all skills from this repository:\n\n```sh\nnpx skills add vaadin/agent-skills\n```\n\nInstall a specific skill:\n\n```sh\nnpx skills add vaadin/agent-skills --skill vaadin-frontend-design\n```\n\nInstall multiple specific skills:\n\n```sh\nnpx skills add vaadin/agent-skills --skill vaadin-frontend-design --skill aura-theme\n```\n\nThe CLI can also be run against a GitHub URL:\n\n```sh\nnpx skills add https://github.com/vaadin/agent-skills --skill vaadin-form-layout\n```\n\n### MCP server\n\nInstalling from the [marketplace](#marketplace-recommended) configures the MCP\nserver automatically from `.mcp.json`, so you can skip this section.\n\n`npx skills add`, on the other hand, installs only the skill files. It does\n**not** install the MCP server declared in `.mcp.json`, which the skills rely on\nfor up-to-date Vaadin documentation and Java API lookups. Install it separately\nfor your agent.\n\nThis repository uses a single HTTP MCP server:\n\n| Server | URL |\n| --- | --- |\n| `vaadin` | `https://mcp.vaadin.com/docs` |\n\n**Claude Code:**\n\n```sh\nclaude mcp add --transport http vaadin https://mcp.vaadin.com/docs\n```\n\n**Codex:**\n\n```sh\ncodex mcp add vaadin --url https://mcp.vaadin.com/docs\n```\n\nAfter adding the server, start a session and run `/mcp` to verify it is\nconnected.\n\n## Available Skills\n\n| Skill | Purpose |\n| --- | --- |\n| `aura-theme` | Generate and customize Vaadin Aura theme CSS configurations. |\n| `vaadin-frontend-design` | Create visually polished Vaadin interfaces beyond default theme styling. |\n| `vaadin-form-layout` | Create Vaadin Flow forms and entity editors from a Figma URL, screenshot, text, or prompt. |\n\n## Repository Structure\n\nEach skill lives in its own directory under `skills/`:\n\n```text\n.codex-plugin/\n  plugin.json\n.claude-plugin/\n  plugin.json\n.mcp.json\nskills/\n  vaadin-frontend-design/\n    SKILL.md\n    references/\n      design-patterns.md\n  aura-theme/\n    SKILL.md\n    references/\n      property-values.md\ntools/\n  aura-reference/\n    generate.mjs\n    aura-properties.json\n```\n\n`SKILL.md` contains the skill front matter and primary instructions. The optional `references/` directory contains deeper supporting material that agents can load only when needed.\n\nParts of `skills/aura-theme/references/property-values.md` are generated from the published\n`@vaadin/aura` package rather than hand-maintained — the blocks between `<!-- BEGIN GENERATED -->`\nand `<!-- END GENERATED -->` markers. Edit those through the generator, not by hand; see\n[`tools/aura-reference/README.md`](tools/aura-reference/README.md).\n\n## Updating Skills\n\nAfter editing a skill, reinstall it locally with the same command you used for installation. For example:\n\n```sh\nnpx skills add vaadin/agent-skills --skill vaadin-frontend-design\n```\n\nIf you are working from a local checkout, use the local path:\n\n```sh\nnpx skills add .\n```\n\n## Contributing\n\nWhen adding a new skill:\n\n1. Create `skills/<skill-name>/SKILL.md`.\n2. Keep the front matter `name` equal to the directory name.\n3. Write a specific `description` that tells agents when the skill should be used.\n4. Put longer examples and supporting documents in `skills/<skill-name>/references/`.\n5. Update the skill list in this README.\n6. Update the skill list in `.claude-plugin/plugin.json`.\n\nWhen changing `skills/aura-theme/references/property-values.md`, run\n`node tools/aura-reference/generate.mjs` and commit the result — CI fails if the generated\nblocks are out of date.\n",
  "bytes": 6114,
  "sha": "93ec782b51b20d2ce8498386eee6e29e87820e8f61753104d9c114cd2ed64122",
  "repo_slug": "vaadin/agent-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_vaadin_agent_skills_aura_theme_56c44910/readme"
}