Claude Code component for Next.js portfolio UI

Choose base, layout, or domain component placement and use explicit TypeScript props and the existing theme.

Install in Claude Code

Open adamszczotka.dev or a Next.js and Tailwind project using its conventions in Claude Code.

Review `.claude/skills/component/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.claude/skills/component/` in your project and save the reviewed file as `.claude/skills/component/SKILL.md`.
Start Claude Code from that project's root, then select `/component` in the slash menu.

Example task

Portfolio sample-18 needs an article preview for {title: 'Writing for teams', interactive: false}. The card only renders content and owns no client state.

What to check

Place it among domain components and keep its props explicit. Verify {title: 'Writing for teams', clientBoundary: false} and light and dark borders.

Original SKILL.md on GitHub · Updated 2026-11-14

Frequently asked question

When should I add a client declaration?

Add it for events, browser APIs, local state, or effects. A component that only renders portfolio data can remain on the server boundary.