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
Knowledge Skill Table of Contents Introduction The Porsche Design System Knowledge Skill gives AI coding tools version-exact guidance for the Porsche Design System packages installed in a project. It covers components, styles, tokens, accessibility and framework-specific usage, helping assistants answer questions, generate UI and review or fix Porsche Design System code. The skill is generated from the same source as this documentation and ships inside the Porsche Design System npm packages, so it always describes the version your project actually uses. There is one variant per supported framework; select yours to adapt the skill name and prompts on this page. Invoking it looks like this, using your agent's skill selection syntax: 
/pds-knowledge-js Recommend PDS components for a responsive sign-in form.
AspectDetailInvocationAutomatic or explicit. Your agent activates pds-knowledge-js when a task matches its description, and you can invoke it yourself.DependenciesNone.ReadsIts own reference files, plus whatever the task at hand requires.WritesNothing of its own. It guides the work you asked your agent to do.ExecutesNothing of its own.Invocation comes from the skill's frontmatter and is honored by your AI coding tool. The rest is guidance the skill gives an agent, not a permission your tool enforces.
What It Covers Components: available components, their properties, slots, events and the recommended usage per framework. Examples: framework-specific code examples for common component use cases. Styles and tokens: the design tokens, style utilities and layout primitives that come with the installed version. Accessibility: the accessibility requirements and integration rules that apply when using the components. Conventions: how to set up and consume the packages, including framework-specific integration guidance. Because the content is version-matched, the skill prevents assistants from suggesting APIs that do not exist in the installed version, or from replacing existing Porsche Design System usage with outdated patterns. Installation The Knowledge Skill is bundled with the Porsche Design System npm packages and is exposed to your AI coding tool by linking it into a skills directory. Follow the skill installation guide for the available installation methods. How to Use the Skill Use the Knowledge Skill whenever a task touches frontend UI/UX in a project where the Porsche Design System is used. A skill can be invoked in two ways: Automatic invocation: Your AI coding agent activates the skill when a task matches its description. Manual invocation: Invoke pds-knowledge-js using your agent's skill selection syntax to make sure it is used, for example /pds-knowledge-js. Example prompts These examples use slash-command syntax. Adjust it to the syntax your AI coding tool uses. Ask for version-specific guidance: 
/pds-knowledge-js Recommend the right PDS components for a responsive sign-in form.
Explain the relevant properties, slots and accessibility requirements for the version
installed in this project.
Implement a feature: 
/pds-knowledge-js Build an accessible country selector that displays each country's
flag in its option and groups the countries by continent. Use the appropriate PDS
components and follow the existing framework and codebase conventions.
Build a page from a template and patterns: 
/pds-knowledge-js Build a campaign page from the PDS Landing page template. Use the
Header: Overlay pattern with the Popover: Local market switch, place the Feedback: Inline
pattern at the end of the content and the Footer pattern at the bottom. Replace the
placeholder content, keep the components, layout and accessibility of the patterns, and
follow the existing framework and codebase conventions.
Build a page from a description: 
/pds-knowledge-js Build an accessible campaign page for a new car model. It should
start with a full-screen hero and the main navigation, let visitors switch to their
country, highlight the model and lead them toward booking a test drive. Ask whether the
page was helpful at the end and close with site-wide links and legal information. Use the
appropriate PDS components and follow the existing framework and codebase conventions.
Review existing code: 
/pds-knowledge-js Review this page for deprecated or incorrect PDS usage,
accessibility issues and opportunities to replace custom UI with PDS components. Apply
the necessary fixes.
Update an implementation: 
/pds-knowledge-js Migrate this implementation to the APIs supported by the
installed PDS version. Preserve its behavior and accessibility, and verify the result.
v4.8.0v2v1
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%