JanSzewczyk
- 37 skills
- 0 followers
- 10 hours ago last updated
- ▌ Devlogs · janszewczyk bundleAnalyze a dev-session log file (tmp/app.log) written by the LogLayer + Pino logger in a Next.js project using the structured-logging skill's conventions. Finds missing correlation context (requestId/module/userId), sensitive-data leaks that slipped past redaction, structural/readability problems, and source-code call-site violations of the structured-logging rules. Read-only — produces a report, never edits logger calls automatically. Use this whenever the user wants to investigate, debug, or make sense of what happened during a local dev session by looking at the logs — trigger even when they only describe a symptom ("something broke overnight", "seeing repeated errors", "did we leak a token in the logs", "check if this log file is safe to share") rather than explicitly saying "audit" or naming tmp/app.log. Also use it to check whether logger.* call sites and the actual log output follow the structured-logging conventions.
- ▌ API Test · janszewczyk bundleTest Next.js Route Handlers and API endpoints using Playwright for real HTTP requests. Use when testing API endpoints, route handlers, or backend integrations.
- ▌ Kw Lookup · janszewczyk bundleWyszukuje dane nieruchomości po polskim numerze księgi wieczystej (KW) — adres, działki/lokal, właścicieli, prawa, roszczenia, ograniczenia i hipoteki. Używaj gdy użytkownik poda numer w formacie XX1X/XXXXXXXX/X (np. WA1M/00123456/7) lub prosi o "sprawdź księgę wieczystą", "dane z KW", "znajdź adres/właściciela/hipoteki po KW". Łączy browser automation na portalu EKW (ekw.ms.gov.pl, wymaga ręcznego rozwiązania CAPTCHA) z REST API ULDK GUGiK do wzbogacenia o geometrię działki i współrzędne.
- ▌ Notebooklm · janszewczyk bundleAutomate Google NotebookLM via the notebooklm-py CLI and Python API — create notebooks, add sources (URLs, PDFs, YouTube, Drive), ask questions, generate podcasts/videos/quizzes/reports, and download artifacts. Use this skill whenever the user mentions NotebookLM, wants to create audio overviews or podcasts from documents, generate study materials (quizzes, flashcards), produce video explainers, build mind maps or infographics from research, or needs to programmatically interact with Google NotebookLM in any way. Also use when the user asks about setting up notebooklm-py, authenticating with NotebookLM, or integrating NotebookLM into scripts and CI/CD pipelines.
- ▌ Unit Testing · janszewczyk bundleWrite unit tests with Vitest for TypeScript projects — mocking, async testing, parameterized tests, server action testing, and coverage. Use when writing unit tests for utilities, server-side logic, schemas, or pure functions.
- ▌ Tailwind CSS 4 · janszewczyk bundleTailwind CSS v4 patterns with CSS-first configuration, @theme directive, design system integration, and utility-first styling for Next.js applications.
- ▌ DB Migration · janszewczyk bundleGenerate Firestore data migration scripts for schema changes, field additions, and data transformations. Use when migrating data, adding fields, or restructuring collections.
- ▌ Error Handling · janszewczyk bundleComprehensive error handling for Next.js applications — use whenever adding or fixing error handling, building database or service layer operations, writing server actions, or making an app production-ready. Covers ServiceError (typed error contract for any external service: DB, API, network), tuple return pattern [error, data], ActionResponse for server actions, React error boundaries, toast notifications, retry with exponential backoff, and circuit breaker patterns. Trigger on: "add error handling", "handle database errors", "handle service errors", "retry failed requests", "error boundary", "handle action errors", "toast on error", "log errors", "circuit breaker", "graceful degradation", "categorizeServiceError", "ServiceError".
- ▌ Server Actions · janszewczyk bundleCreate Next.js Server Actions in TypeScript with a typed result contract, Zod validation, auth guards, error handling, and React integration. Use this skill whenever writing or modifying Server Actions in a Next.js App Router project — form submissions, data mutations, CRUD operations, auth-gated actions, multi-step/redirect flows. Trigger even when the user says "create a server action", "add form handling", "handle form submit on the server", "validate form with Zod", "add a server-side mutation", or asks about useActionState / useTransition / useFormStatus / useOptimistic with actions. Stack-agnostic: works with any auth provider, ORM, logger, and toast library. Targets Next.js 15/16+ with the App Router. Not for: fetching/reading data (use a Server Component), building the toast UI or post-redirect toast plumbing, React error boundaries, or route handlers / REST API endpoints.
- ▌ Coverage Gaps · janszewczyk bundleFind and rank the test-coverage gaps that actually matter — untested auth, payment, server actions, validation, and error paths — weighting uncovered branches and recent churn over raw line percentages. Use this skill whenever the user asks what's untested, where coverage is weak, what tests are missing, which code needs tests most, or wants a coverage report interpreted or prioritized — even if they just say "we should probably add some tests" or mention a low coverage number without naming coverage tooling.
- ▌ Dead Code · janszewczyk bundleFind dead code — unused files, exports, types, and dependencies — and propose safe removal refactors. Uses Knip's dependency-graph reachability analysis as the deterministic engine so the expensive part (walking a large source tree) never happens token-by-token, then ranks and reads only the candidates worth a human decision. Use whenever the user asks to find unused code, clean up dead code, remove unused exports/files/dependencies, or wants a repo "swept" for cruft — even if they just say "this file feels unused" or "can we delete this."
- ▌ Implement Design · janszewczyk bundleImplement UI in any project that imports from @szum-tech/design-system, especially when picking up a native Claude Design → Claude Code handoff, pulling screens from a /design-sync'd design project, porting a mockup, recreating a screenshot, or building a hero/landing/dashboard view. Use this skill BEFORE writing any JSX with components, classes, or design tokens — it enforces an inventory-first protocol that prevents the most common failure mode: reinventing components (Button, Card, Dialog, Input, etc.) that already exist in the DS, or using raw Tailwind utilities (text-gray-*, bg-white, hex colors) instead of semantic tokens. The preferred source is the native Claude Design handoff (files dropped into the workspace by "Send to local coding agent") or a /design-sync'd design project read via DesignSync; a Claude Design share URL, pasted JSX/HTML, a screenshot, or a verbal spec work as fallbacks. Optional quoted notes describe adjustments to apply (copy changes, color swaps, sections to skip). Trigger phrase
- ▌ React 19 Compiler · janszewczyk bundleReact 19 patterns and React Compiler optimization guidance. Understand when to use manual memoization vs letting the compiler optimize, and leverage new hooks like useActionState and useFormStatus.
- ▌ Sync Rules · janszewczyk bundlePull canonical `.claude/rules/` files from the claude-plugins shared-rules source of truth into the current project. Does a shallow relevance check (package.json + CLAUDE.md, at most) then presents rules as an approval checklist (via AskUserQuestion) so the user picks exactly which ones to add or update — nothing is written without approval. Use when the user wants to add shared/company-wide Claude rules to a repo, update rules that changed upstream, or check whether a repo's rules have drifted from the canonical version. Trigger on "sync rules", "update shared rules", "pull the latest rules", "/sync-rules", "add company rules to this repo", "are our rules out of date".
- ▌ Builder Factory · janszewczyk bundleUse this skill to create typed test data builders with mimicry-js and Faker for any TypeScript interface or type. Invoke whenever the user asks to generate mock data, create test fixtures, build factory functions, produce seed data, or construct fake objects for unit tests, Storybook stories, or E2E scenarios. Also use when migrating from test-data-bot or Fishery to mimicry-js, or when the user mentions builders, factories, or typed mock/fake/test/seed data generation — even if they describe the task indirectly (e.g. "I need realistic invoices for testing" or "generate sample users for my stories").
- ▌ True Dom Tester · janszewczyk bundleGenerates and runs automated browser tests using Playwright CLI and the accessibility tree (DOM snapshot). Faster and cheaper than screenshot-based approaches. Uses semantic locators, real DOM structure, and optional Firecrawl for bot-protected pages.
- ▌ Youtube Scraper · janszewczyk bundleSearch YouTube videos by query, topic, channel, or other criteria and return links with short descriptions. Uses yt-dlp CLI (free, no API key needed). Use this skill when the user wants to find, search, or discover YouTube videos on any topic, list videos from a channel or playlist, or get video metadata like title, duration, and view count. Includes quality filtering to surface valuable content and filter out noise.
- ▌ Update Deps · janszewczyk bundleUpdate npm dependencies safely in sequential, theme-grouped batches. For each group: verify the app still works (type-check, lint, build, tests), commit the group on success or roll it back on failure, and pause to confirm before any major (breaking) bump after fetching its migration guide. Once all groups are done, runs a dependency security audit (npm/pnpm/yarn audit) against the final tree and resolves what it can. Ends with a full report of what changed, which updates forced code migrations, and the audit results. Use this skill whenever the user wants to update, upgrade, or bump npm packages, dependencies, or libraries in bulk — "update my deps", "upgrade everything to latest", "bump the outdated packages", "update Storybook / Next / Vitest", "do a dependency update pass" — even if they don't say "update-deps". Prefer the library-updater agent instead for a single one-off package change; prefer this skill whenever there are several packages to move and the user wants it done safely and reported.
- ▌ T3 Env Validation · janszewczyk bundleType-safe environment variable validation with @t3-oss/env-nextjs and Zod. Build-time validation ensures all required env vars are present and correctly typed.
- ▌ Structured Logging · janszewczyk bundleStructured logging patterns with LogLayer + Pino for Next.js applications. Covers log levels, context enrichment, child loggers, and production best practices.
- ▌ Plugin Release · janszewczyk bundleCut a release for one or more plugins in a Claude Code marketplace repo — work out which plugins changed since the last tag, propose the semver bump each change implies, write the new versions into plugin.json, keep the docs tables in step, and create the release tags with `claude plugin tag`. Use when the user wants to release, publish, version, or tag a plugin, asks "what needs a version bump", says they forgot to bump a version, or has finished a batch of skill and agent edits and wants the repo release-ready.
- ▌ Storybook Testing · janszewczyk bundleCreate Storybook stories with browser-rendered interaction tests for React UI components using CSF Next format and .test() method. Covers visual states, user interactions (clicks, typing, hover), form validation UI, and component accessibility in isolation. Use when testing React component rendering, UI interactions, visual states, or documenting component behavior in Storybook. Trigger this skill whenever the user mentions Storybook, stories, CSF Next, component interaction tests, .test() method, or wants to test a React UI component in isolation. NOT for unit testing pure functions/hooks (use unit-testing), API endpoints (use api-test), or full E2E page flows (use playwright-cli).
- ▌ Create Branch · janszewczykCreates a Git branch for the work at hand, named `<type>/<english-kebab-case-description>` using Conventional Commits types as prefixes. Works with no arguments — it derives the name from the current session and the uncommitted changes; an argument is a hint that shapes the name, never literal text. On `main`/`master` it fetches and branches from the remote's real default branch; on an existing working branch it branches from HEAD so stacked work keeps its base. Never pushes, never leaves you committing on the default branch. Use when starting a new piece of work, or when you notice changes are being made directly on the default branch. Trigger on "create a branch", "start a new branch", "branch for this", "new feature branch", "I should be on a branch for this", "stwórz brancha", "zrób nowego brancha", "nowa gałąź", "przełącz na brancha dla tej zmiany".
- ▌
- ▌ Toast Notifications · janszewczyk bundleSend a one-shot toast/flash message from a Next.js (App Router) Server Action to the client so it appears on the next page render — crucially, surviving a redirect(), which normally drops all response data. Works by writing a short-lived cookie that the next render reads, fires once, and clears. Library-agnostic plumbing (sonner, react-hot-toast, or any toast UI) — it does NOT build the toast component itself. Use this skill whenever a Server Action needs to give page-level feedback after a mutation, especially when it ends in redirect() or revalidatePath(): "show a success/error message after delete/create/ update", "toast after redirect", "notify the user after a server-side action", "flash message like Rails flash[:notice]", "message waiting on the destination/sign-in page after redirect", "setToastCookie", "wire up ToastHandler". Trigger even when the user names their toast library (e.g. "fire a sonner toast from a server action that redirects") or doesn't say "toast" at all but clearly needs post-redirec
- ▌ Firebase Firestore · janszewczyk bundleFirestore database layer for Next.js. Use when user asks to "Firestore query", "Firebase Admin SDK", "CRUD for Firestore", "seed Firestore", FieldValue.serverTimestamp(), Firestore transactions, "db collection query", "implement database queries", "Firestore error handling", "ServiceError for Firestore". Implements the ServiceError contract defined in the error-handling skill.
- ▌ Prd Spec · janszewczyk bundleDefines the standard PRD (Product Requirements Document) and TDD (Technical Design Document) formats and the rules for mapping document content to specialist agents. Use when writing, reviewing, or parsing a PRD/TDD, breaking a feature spec into agent tasks, or orchestrating the spec-driven development (SDD) flow — including from the product-owner agent.
- ▌ Accessibility Audit · janszewczyk bundlePerform WCAG accessibility audits on React components using automated tools and manual checks. Use when auditing accessibility, fixing a11y issues, or ensuring WCAG compliance.
- ▌ Lighthouse Audit · janszewczyk bundleAutomated Lighthouse audit for Next.js apps. Builds the production app, runs @lhci/cli across key URLs, scores all five categories, and produces a prioritized fix plan mapped to concrete Next.js code changes.
- ▌ Marketplace Doctor · janszewczyk bundleAudit a Claude Code plugin marketplace repository for drift between its manifest layers and the documentation that enumerates them by hand — marketplace.json vs the plugins on disk, plugin.json's explicit agents array vs the agent files, SKILL.md frontmatter contracts, and the skill/agent tables in CLAUDE.md and every README. Use whenever the user asks to validate, audit, or health-check a marketplace or plugin repo, before publishing or tagging a plugin release, after adding or renaming a skill or agent, or when they say the docs are out of sync, "check the manifests", "did I forget to register something", or "is this repo consistent".
- ▌ Skill Ab Optimizer · janszewczyk bundleContinuously tests and improves Claude Code skills using A/B experimentation and Auto Research ML loop. Provides quantitative metrics on skill effectiveness and automatically approves only changes that improve outcomes.
- ▌ Design System Component · janszewczyk bundleUse this skill to create or refactor React + TypeScript + Tailwind CSS + CVA components following design system conventions. It provides the canonical file structure, per-component styles pattern, types, context, store, barrel exports, and Storybook story templates that are specific to this codebase. Invoke whenever the user wants to build a new UI component, add CVA variants or sub-components, set up component context or store, create barrel exports, write component stories, or restructure an existing component directory — even for tasks that seem straightforward like "create a Button" or "add a variant", because the skill ensures correct file placement and naming conventions.
- ▌ Szum Tech Design System · janszewczyk bundleComprehensive reference for building UI with @szum-tech/design-system — a React component library built on Tailwind CSS 4+ and Radix UI. Use this skill whenever working in a project that imports from @szum-tech/design-system, when building or reviewing UI components, when choosing colors, typography, or layout styles, when deciding which component to use, or when creating new components following this design system's patterns. Covers the full color palette (OKLCH semantic tokens), all typography utility classes, every available component with its variants and props, animation classes, icon imports, and the CVA-based styling system. Always use this skill when the user asks about design tokens, Tailwind classes, or component APIs in the context of this library.
- ▌ Generate Feature Package · janszewczyk bundleScaffold a new feature domain package under features/<name>/ in this project, following the feature-architecture spec. Use whenever the user wants to create/start/bootstrap a new feature, domain, module, or slice — e.g. "create a feature for invoices", "scaffold a new domain", "/generate-feature-package payments", "set up the folder structure for a new module". Creates the client-safe zones (components, schemas, types) and the server zone (actions, db, services, permissions) with ready-to-fill barrel and stub files — constants/, server/api/, utils/, context/, and hooks/ are optional and added later, on demand.
- ▌
- ▌ Performance Optimization · janszewczyk bundlePerformance optimization patterns for Next.js applications. Covers bundle analysis, React rendering optimization, database query optimization, Core Web Vitals, image optimization, and caching strategies.
- ▌ Repository Documentation · janszewczyk bundleGenerate or update a project's README.md plus a ready-to-paste GitHub repository description and topics list, following the Szum-Tech documentation standard. Auto-detects project type (web app, mobile app, npm package, CLI tool, monorepo, Claude plugin) by analyzing package.json, configs, and folder structure, then confirms with the user before generating. Use whenever the user asks to "create README", "update README", "document repository", "generate project docs", "GitHub description", "GitHub topics", or invokes /repository-documentation.