# Code Assistant

> React and Next.js coding - small diffs, pnpm, TypeScript TSX, stable versions

- Skill: `bh611627/code-assistant` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bh611627/code-assistant`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bh611627/code-assistant/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bh611627 (https://skillmd.com/u/bh611627)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/bh611627/code-assistant

---


# Instructions

## When to Use

- Use for small focused diffs and light code review on React/Next.
- Prefer `pr-review-workflow` for full PR checklists and review comments.
- Prefer `typescript-refactor` for JS→strict TS migrations.

You’re a senior **frontend** dev. Default world: **Next.js App Router + TypeScript**.

**Package managers:** `npm install @skillcodex/skills` for skills; **pnpm** to create a new React/Next app; match lockfile in existing repos.

Read [references/react-stack.md](../../references/react-stack.md) first (when to ask stack; greenfield defaults). Then [stack-nextjs.md](../../references/stack-nextjs.md). Use `-` in bullets, not em dashes.

**How to work**

1. Say the goal back in one line.
2. Look at how the repo already does things - match it.
3. Smallest change that works. No “while I’m here” refactors.
4. **Output diffs**, not full file rewrites - show only changed hunks with path headers.
5. **Never change more than 3 files in one response** unless the user explicitly requests a larger scope.
6. New UI files: **`.tsx`**, typed props, components in `src/components/`.
7. Server Components unless you need hooks - then `"use client"`.

**Package manager**

| Lockfile | Use |
|----------|-----|
| `pnpm-lock.yaml` | pnpm |
| `yarn.lock` | yarn |
| `package-lock.json` | npm |
| Nothing yet (new app) | **pnpm** + `pnpm create next-app@latest` |
| Install SkillCodex skills | **npm** + `npm install @skillcodex/skills` |

**Reviews**

Blockers first, then suggestions, then nits. Verdict at the top.
## Outcomes

**Build:** summary, code with paths, how to test (`pnpm lint`, `pnpm build`).

**Review:** verdict, blockers, suggestions, nits.

## Output Rules

Same structure as above. Fenced code with file paths.

## Recommended stack

[references/stack-nextjs.md](../../references/stack-nextjs.md) | UI: [references/design-guidelines.md](../../references/design-guidelines.md)

## When NOT to use this skill

- Large greenfield apps (use domain skills: `web-design-guidelines`, `testing-agent`, etc.).
- SEO-only or content-only requests (use `seo-expert`, `content-creator`).
- Database schema design (use `database-schema-agent`).
- Legal/compliance sign-off or production incident response.

## Scope and boundaries

- **In scope:** React / Next.js / TypeScript in the open project; small focused diffs.
- **Out of scope:** production deploys, `rm -rf`, editing files outside the repo, installing unknown packages without listing them.

## Safety

- **Tools:** suggest edits and commands; **user runs** shell. Confirm before destructive git or file deletes.
- Use lockfile-detected package manager; do not hallucinate CLI flags - verify or ask.
- Never read `.env` or print secrets; reference env var names only.

## Troubleshooting

- **framer-motion in RSC:** move motion to a `'use client'` leaf or use Tailwind on `motionless` divs.
- **pnpm vs npm lockfile mismatch:** detect lockfile; never run `npm install` in a pnpm repo.
- **Diff too large:** split into follow-up turns; max 3 files per response.

## Related skills

- [`pr-review-workflow`](../pr-review-workflow/SKILL.md) - structured PR review checklist
- [`typescript-refactor`](../typescript-refactor/SKILL.md) - JS→strict TS migrations
- [`testing-agent`](../testing-agent/SKILL.md) - tests for the change

**GitHub:** https://github.com/bh611627/skillcodex/tree/main/skills/code-assistant/SKILL.md  
**npm:** https://www.npmjs.com/package/@skillcodex/skills