README Links for AI Agents

AI-optimized README for pm7-ui - Use this when starting a new web app with pm7-ui

Copy URL as: "We're using pm7-ui for all our UI. Here's the documentation: [URL]"

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-AI-HowToUse.md

Migration guide for upgrading from pm7-ui v1.x (React) to v2.x (framework-agnostic)

Copy URL as: "Upgrade this project from pm7-ui v1 to v2: [URL]"

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-HowToUpgrade.md

Complete visual reference showing PM7-UI design system for AI replication - colors, typography, spacing, and all components

Copy URL as: "Use this PM7-UI style guide as visual reference: [URL]"

https://pm7-ui.dev/style-guide.html

🤖 AI Agents Only: This page shows all PM7-UI components in their visual states without requiring the npm package. Perfect for AI agents that need to replicate the PM7-UI style.

Integration patterns and solutions for using PM7 in React, Vue, Angular apps

Copy URL as: "A pm7-ui component not working in your framework? Check framework integration: [URL]"

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-Framework-Integration.md

Example Prompts

"We're using pm7-ui for this project: [main README URL]"
"Add a dropdown menu using: [menu component URL]"
"Upgrade this project from pm7-ui v1 to v2: [upgrade guide URL]"

Remember

pm7-ui is framework-agnostic (no React components)
Use simple CSS classes like pm7-button, pm7-card
Interactive components need data attributes (e.g., data-pm7-menu)
Import CSS: import '@pm7/core/dist/pm7.css'