AI SummaryStencil component rules for packages/components
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "porsche-design-system — Cursor Rules" prompt rules to my project. Repository: https://github.com/porsche-design-system/porsche-design-system Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Stencil component rules for packages/components
PDS Components
• packages/components is the source of truth for web components; avoid editing generated output such as *.props.md. • Keep component logic in src/components/{name}/ and reuse existing patterns before introducing new utilities or styles. • Use shared accessibility helpers instead of ad-hoc solutions: • getFocusBaseStyles() from src/styles/common-styles.ts • forcedColorsMediaQuery() from src/styles/media-query/forced-colors-media-query.ts • ARIA helpers from src/utils/a11y/a11y.ts • Prefer native elements inside Shadow DOM and only add ARIA required by the pattern. • Do not remove focus styling or invent a new focus ring when the shared helper should be used. • If behavior or markup changes, update unit tests and consider matching a11y/VRT coverage in packages/components-js/tests/. • Use npm run start:components, npm run build:components, and npm run test:unit:components from the repo root.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts