Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Introduction Table of Contents What Are Agent Skills? Agent Skills are a lightweight, open standard format used to give AI agents specialized capabilities, instructions and workflows on demand. They are structured as a folder containing a SKILL.md text file alongside optional code, scripts and reference assets. Because the format is standardized, the same skill works across compatible tools such as Claude Code, GitHub Copilot and Codex. The Porsche Design System uses them to support a range of tasks around working with the Porsche Design System, always matching the version a project actually has installed. How It Works All Porsche Design System Agent Skills ship inside the Porsche Design System npm packages and are released together with them. Since AI integrations discover skills in dedicated directories rather than node_modules, a directory symlink exposes a bundled skill to your agent: 
.agents/skills/pds-knowledge-js
  -> node_modules/@porsche-design-system/components-js/skills/pds-knowledge-js
Some AI integrations and editors additionally let you configure extra skill lookup locations. In that case, the package's skills directory can be referenced directly and no symlink is needed. This skill-in-package approach provides two benefits: Updating the Porsche Design System dependency automatically updates the skills; there is no separately versioned skill to maintain. Keeping the skills in the package itself and linking them from the project where the package is installed avoids version mismatches. To expose a skill to your AI coding tool, follow the installation guide, which covers all available approaches in detail. Available Skills Additional skills are planned and will be added here as they become available. SkillSkill directory nameDocumentationKnowledgepds-knowledge-jsKnowledge Skill Every skill is bundled in the skills directory of the selected framework's package, @porsche-design-system/components-js.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%