# Portfolio Kit agent instructions

> Add Portfolio Kit source components to an existing React application.

## Read before editing

- [Installation](https://www.parthjadhav.com/products/portfolio-kit/docs/installation.md): configure the registry, dependencies and framework boundaries.
- [Component and template catalog](https://www.parthjadhav.com/products/portfolio-kit/llms.txt): select an item and read its Markdown before installing.
- [Theming](https://www.parthjadhav.com/products/portfolio-kit/docs/theming.md): semantic tokens, fonts and dark mode.
- [Customization](https://www.parthjadhav.com/products/portfolio-kit/docs/customization.md): compound parts and consumer-owned source.

## Install and integrate

1. Inspect the consumer's package manager, React version, Tailwind setup, import aliases and existing components.json. Preserve its configuration.
2. Add the `@portfolio-kit` registry using `https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json`, then install the chosen item with `npx shadcn@latest add @portfolio-kit/<name>`.
3. Installed components use @/components/portfolio, shared hooks use @/hooks, and helpers use @/lib. Adapt aliases to the consumer; @pk/ is private to this documentation website.
4. For the Next.js App Router, use a client boundary for components that need hooks or browser events. Keep static surrounding content in server components.
5. Compose the documented compound parts. Use className and semantic theme tokens; retain keyboard controls, focus rings, reduced motion and visible content without JavaScript.

## Verify the result

- Run the consumer's existing lint, type checks and production build.
- Review installed diffs, especially when reinstalling customized files. The CLI copies source; it does not keep installed files synchronized.
- Check desktop and mobile layouts, light and dark modes, keyboard interactions and reduced motion.

## Availability

Portfolio Kit is public. Its documentation, Markdown and registry are served at https://www.parthjadhav.com/products/portfolio-kit; the registry URL is `https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json`. Source and releases: https://github.com/ParthJadhav/portfolio-kit.