Porsche Design System

Installation

Table of Contents

1. Install a Porsche Design System Package
2. Link the Skill
3. Verify the Skill
Updating

Install with an AI agent and skip the manual steps

Let an AI coding agent do the installation for you. Start it from the repository root and use this prompt:

Set up the bundled Porsche Design System Agent Skills for this repository. Inspect the project dependencies to find the installed Porsche Design System package. Determine the skills directory from what the project already uses: look for an existing .agents/skills, .claude/skills or .github/skills directory, and otherwise infer it from agent configuration present in the repository. If the target directory or the package remains unclear, ask me where the skills should be installed instead of guessing. Run npx pds-skill with the installed package and the determined location, then verify that the generated skill symlinks exist and point to the package's skills directory. Do not change project dependencies or replace a non-symlink file or directory.

Copy prompt to clipboard

The instructions on this page use the Knowledge Skill. Select your framework to adapt the package name, skill name and commands below.

1. Install a Porsche Design System Package#

Install the package for your framework:

Vanilla JS Getting Started guide

2. Link the Skill#

Since AI integrations discover skills in dedicated directories rather than node_modules, the bundled skill has to be linked into the skills directory your AI coding tool reads. Pick one of the methods below.

Each supported Porsche Design System npm package includes the pds-skill binary, which creates the project-local symlink for you. Run it from the project or workspace where the package is installed:

npx pds-skill --package @porsche-design-system/components-js --location {.agents|.claude|.github}/skills

--package selects the Porsche Design System npm package installed in your project.

--location sets the integration's parent skills directory. The binary creates the skill folders inside it.

--skill optionally installs only the named skill and can be repeated. Omit it to install all bundled skills.

For --location, use the directory your AI coding tool reads: .agents/skills is the Agent Skills standard and is also picked up by Codex and GitHub Copilot, .claude/skills is used by Claude Code, and .github/skills by GitHub Copilot. If your team uses several agents, link the skill into each of the directories they read.

npx pds-skill --package @porsche-design-system/components-js --location .agents/skills # Agent Skills standard, Codex, GitHub Copilot
npx pds-skill --package @porsche-design-system/components-js --location .claude/skills # Claude Code
npx pds-skill --package @porsche-design-system/components-js --location .github/skills # GitHub Copilot

To link a single skill only, pass its directory name:

npx pds-skill --package @porsche-design-system/components-js --location .agents/skills --skill pds-knowledge-js

Create the project-local link yourself, inside the directory your AI coding tool reads: .agents/skills is the Agent Skills standard and is also picked up by Codex and GitHub Copilot, .claude/skills is used by Claude Code, and .github/skills by GitHub Copilot.

On macOS or Linux, run this from the repository root:

mkdir -p .agents/skills
ln -s "$(pwd)/node_modules/@porsche-design-system/components-js/skills/pds-knowledge-js" \
  .agents/skills/pds-knowledge-js

On Windows, create a directory junction from the repository root instead:

mklink /J .agents\skills\pds-knowledge-js node_modules\@porsche-design-system\components-js\skills\pds-knowledge-js

Create one link per skill you want to use and per skills directory your team's agents read, and commit the links so the whole team gets them.

Some AI integrations and editors let you configure additional locations where skills are looked up. If yours does, you can point it directly at the skills directory inside the installed Porsche Design System package, which makes a symlink unnecessary.

For example, GitHub Copilot in VS Code offers this through .vscode/settings.json:

{
  "chat.agentSkillsLocations": ["./node_modules/@porsche-design-system/components-js/skills"]
}

Support for such a setting differs per integration and changes quickly, so check the documentation of the AI integration or editor you use for an equivalent option. If none exists, use one of the symlink-based methods instead. Also keep in mind that these settings are usually specific to a single integration, so a project used with several agents may still need a skills directory entry.

3. Verify the Skill#

Reload your AI coding agent or start a new agent session, then confirm that pds-knowledge-js is available:

Claude Code: Type / and look for the skill.

GitHub Copilot CLI: Run /skills reload, then /skills list.

GitHub Copilot in VS Code: Type /skills in the chat input to open the Configure Skills menu.

Codex: Run /skills or type $ and look for the skill.

Updating#

Skills are versioned together with the Porsche Design System package that contains them. Updating the package to a newer version also updates the linked skills, so no additional step is needed as long as the symlink or configured location keeps pointing at the installed package.

Re-run the installation only if you remove the link, switch to a different Porsche Design System package or want to add a skill that was not linked before.