Skills

Skill surface

Review the skills layer that supports installation, verification, and agent guidance in Purrfold projects.

Scaffold skills and Next.js workflow skills

Next.js provides versioned documentation and AGENTS/CLAUDE rules; Purrfold installs the current workflow skills from the official Next.js repository.

Architecture & Design

Architecture Decision Records
skills.sh
Document significant technical decisions with context, tradeoffs, and rationale.

When making a non-trivial architectural choice that future agents should understand.

Example: capture why you chose server actions over route handlers.

Open skill
Decision Doc Sync
Local
Keep documentation synchronized when architecture, UI, or conventions change.

After structural changes that affect docs, ADRs, or quality gates.

Example: update the ADR when a component boundary changes.

Project Architecture
Local
Architecture guardrails for UI, layout, state flow, theming, and server/client boundaries.

When designing component structure, state management, or deciding server vs client boundaries.

Example: decide whether a page stays server-first or needs a client island.

Vercel Composition Patterns
skills.sh
React composition patterns for flexible, maintainable component APIs.

When building reusable components or refactoring components with boolean prop proliferation.

Example: split a card into Card, CardHeader, and CardBody instead of adding boolean props.

Open skill

Framework & UI

shadcn/ui
skills.sh
Manages shadcn components, styling, presets, and project configuration.

When adding, customizing, or troubleshooting shadcn components.

Example: compose a form from shadcn primitives before writing custom UI.

Open skill
Vercel React Best Practices
skills.sh
React and Next.js performance optimization guidelines.

When optimizing rendering, bundle size, or data loading patterns.

Example: memoize only when profiling shows a real rendering cost.

Open skill

Quality & Testing

Playwright Best Practices
skills.sh
Comprehensive E2E testing patterns with Playwright.

When writing E2E tests, debugging flaky tests, or setting up test infrastructure.

Example: cover a locale switch with stable locators and assertions.

Open skill
Playwright CLI
skills.sh
Browser automation and CLI-driven web testing.

When automating browser interactions or debugging Playwright tests.

Example: reproduce a bug by running a focused browser flow from the CLI.

Open skill
Project Minimum Evaluation
Local
Run minimum local quality checks before marking implementation complete.

Before marking a feature as done — runs lint, typecheck, format, tests.

Example: run lint, typecheck, format, and tests before closing a task.

React Doctor
React Doctor
React maintainability and performance diagnostics.

Before commits to catch maintainability issues early.

Example: scan a page before commit to catch unnecessary client work.

Systematic Debugging
skills.sh
Structured methodology for debugging bugs and test failures.

When encountering unexpected behavior, test failures, or elusive bugs.

Example: reduce a failing test by isolating one assumption at a time.

Open skill
Verification Before Completion
skills.sh
Run verification commands before claiming work is complete.

When finishing a task — ensures evidence matches claims.

Example: run the verification command before saying the fix is done.

Open skill
Vitest
skills.sh
Testing patterns for unit and integration tests with Vitest and Testing Library.

When writing or debugging Vitest tests, mocking, or snapshot testing.

Example: test async UI behavior with await and precise assertions.

Open skill

TypeScript

Advanced TypeScript Types
skills.sh
Advanced type system features for type-safe applications.

When implementing complex type logic or reusable type utilities.

Example: model a discriminated union for a skill entry.

Open skill

Next.js workflow skills

Purrfold installs these current workflow skills from `vercel/next.js`; Next.js reference guidance comes from versioned docs and AGENTS/CLAUDE rules.

Cache Components adoption
Next.js
Guides enabling `cacheComponents` and resolving blocking routes during Cache Components adoption.

When a project migrates to Cache Components and needs to choose between temporary opt-outs or in-place refactors.

Example: enable `cacheComponents`, run the adoption codemod, and clean routes top-down.

Open skill
Cache Components optimizer
Next.js
Optimizes an app with `cacheComponents: true`, covering both initial static shells and route-to-route navigation.

When a route has adopted Cache Components and you want to improve what appears in the shell or during navigation.

Example: compare before/after screenshots to confirm a Suspense boundary promoted more static content.

Open skill
Next.js dev loop
Next.js
Verifies runtime behavior with `next dev`, the Next.js MCP surface, and a real browser, not only compilation or types.

When a Next.js change needs framework errors, console, network, routes, and visible browser behavior checked together.

Example: cross-check `/_next/mcp` with a browser session to validate a page compiles and behaves as intended.

Open skill