schalkneethling
- 26 skills
- 0 followers
- 13 hours ago last updated
- ▌ Web Quality Audit · schalkneethling bundleComprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
- ▌ Calavera · schalkneethling bundleCompose, preview, and apply Calavera-managed JavaScript, TypeScript, CSS, and AI-tooling setup for existing or newly scaffolded projects. Use when the user asks to set up Calavera, choose tooling profiles or integrations, generate or apply calavera.config.json, install bundled skills/hooks/agents, inspect project-tooling options, run a Calavera dry run, or use the Calavera MCP server/Web UI workflow.
- ▌ Frontend Engineering · schalkneethling bundleBuild, review, or refactor browser-facing frontend work across HTML templates, JSX/TSX, component frameworks, CSS, client-side behavior, forms, and API interaction. Use for frontend implementation that needs coordinated semantic markup, accessible styling, security-aware data handling, and appropriate frontend tests.
- ▌ Release With Confidence · schalkneethling bundleGuide a software project through a staged, evidence-backed release with deliberate human checkpoints, prerelease channels, secure CI publication, recovery from partial failures, stable promotion, and post-release verification. Use when preparing, rehearsing, publishing, promoting, or recovering a package, monorepo, application, CLI, desktop app, or multi-surface release—especially with Changesets, npm trusted publishing, GitHub Releases, independent packages, or an integration branch.
- ▌ Vitest · schalkneethling bundleVitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
- ▌ Performance · schalkneethlingOptimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
- ▌ Accessibility · schalkneethling bundleAudit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
- ▌ Best Practices · schalkneethlingApply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
- ▌ Core Web Vitals · schalkneethling bundleOptimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
- ▌ Fixing Metadata · schalkneethlingAudit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
- ▌ CSS Shared First · schalkneethlingApply the Shared First CSS methodology when writing responsive styles. Use this skill whenever writing or reviewing CSS that involves media queries, responsive layouts, viewport-specific overrides, or breakpoint-driven design. Trigger when the user asks to write responsive CSS, refactor mobile-first CSS, or when any component or layout has viewport-specific styles. This skill replaces mobile-first pattern guidance — always prefer Shared First unless the user explicitly requests mobile-first.
- ▌ Fixing Accessibility · schalkneethlingAudit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
- ▌ CSS Token Use Validator · schalkneethling bundleValidate CSS custom property usage against token definitions. Use when the user wants to check if CSS variables are properly defined, find unused tokens, detect typos in var() references, audit custom property, or when working between Figma design files and code. Works with single files, directories, or entire projects. Can be used as a Claude Code hook to automatically validate after CSS edits.
- ▌ Fixing Motion Performance · schalkneethlingAudit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
- ▌ Playwright Best Practices · schalkneethlingComprehensive playwright testing best practices including ARIA snapshot testing for structural validation. Use when asked to "write playwright tests", "validate page structure", "test accessibility", "improve playwright test quality", "review playwright test code", or "advise on playwright test architecture".
- ▌ CSS Tokens · schalkneethling bundleProvides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
- ▌ Code Review · schalkneethling bundleReview code changes for correctness, security, performance, accessibility, maintainability, tests, dependencies, design-system adherence, and localization. Use when the user asks for a code review, PR review, review of local changes, risk assessment, code quality feedback, or actionable findings before merge.
- ▌ Project Goal · schalkneethling bundleInspect a project, ask targeted user questions, and write a root GOAL.md that clearly defines the project's goals, intended audience, success criteria, constraints, and explicit non-goals. Use when asked to create, draft, update, clarify, document, or recover a project's goal, north star, mission, scope, or GOAL.md from an existing repository.
- ▌ Frontend Security · schalkneethling bundleAudit frontend codebases for security vulnerabilities and bad practices. Use when performing security reviews, auditing code for XSS/CSRF/DOM vulnerabilities, checking Content Security Policy configurations, validating input handling, reviewing file upload security, or examining Node.js/NPM dependencies. Target frameworks include web platform (vanilla HTML/CSS/JS), React, Astro, Twig templates, Node.js, and Bun. Based on OWASP security guidelines.
- ▌ Refined Plan Mode · schalkneethlingUse this skill when the user asks to plan, review, revise, continue, checkpoint, handoff, reset, or execute work using Refined Plan Mode. Also use it for legacy /rpm:start, /rpm:advance, /rpm:review, /rpm:feedback, /rpm:checkpoint, and /rpm:handoff prompts.
- ▌ Github Goal Issue Triage · schalkneethling bundleTriage open GitHub issues across one or more repositories against each repository's GOAL.md, create missing p0/p1/p2/p3 priority labels, apply exactly one priority label to each open issue, nominate the next issue to work on per repository, and generate a clean HTML report grouped by project. Use when asked to prioritize, label, rank, audit, or report on GitHub issues based on project goals.
- ▌ Dependabot Config · schalkneethling bundleGenerate or update Dependabot configuration files for projects. Use this skill whenever the user asks to add, create, update, configure, or fix Dependabot for a project — including phrases like "set up Dependabot", "add Dependabot config", "update my dependabot.yml", "enable Dependabot updates", or "configure automated dependency updates". Always apply this skill even if the user only mentions one ecosystem (e.g. "add Dependabot for npm") — the canonical config covers all required ecosystems.
- ▌ NPM Package Publishing · schalkneethling bundleAudit and improve the security posture of npm package publishing: account security, npm trusted publishing strategy, GitHub repository hardening, token removal, release governance, dependency update policy, provenance, and supply-chain risk. Use when the user asks about npm publishing best practices, publishing security, OIDC/trusted publishing strategy, npm token hygiene, release automation posture, Changesets versus changelog strategies, publint, provenance, or auditing an existing publishing pipeline. For writing or debugging the concrete GitHub Actions publish workflow file, use the npm-trusted-publishing-github-workflow skill instead.
- ▌ NPM Trusted Publishing Github Workflow · schalkneethlingGenerate, repair, or debug the GitHub Actions workflow FILE that performs an OIDC trusted publish of a pnpm package — the concrete publish.yml, its test → build → publish job shape, the package tarball artifact handoff, Node-version inference from package.json, pnpm and runtime setup via pnpm/setup, the npm-CLI-version upgrade step, and repository.url/Sigstore provenance matching. Use when the user wants the actual workflow written or fixed, or is debugging a specific CI failure: npm publish E404/E403/422, NODE_AUTH_TOKEN appearing unexpectedly, provenance or id-token errors, pnpm/setup version resolution, or runtime version problems. For the broader publishing SECURITY POSTURE — account 2FA, repository and branch hardening, GitHub environments, changesets versus changelogithub, sole-maintainer risk, or auditing an existing pipeline — use the npm-package-publishing skill instead.
- ▌ Semantic HTML · schalkneethling bundleWrite well-considered semantic HTML that serves all users. Use when creating components, page structures, or reviewing markup. Emphasizes native HTML elements over ARIA. Treats proper document structure and accessibility as foundations rather than afterthoughts.
- ▌ Frontend Testing · schalkneethling bundleWrite tests that start with acceptance criteria, then add implementation tests for robustness. Use when writing unit tests (Vitest), end-to-end tests (Playwright), visual regression tests, or accessibility tests. Emphasizes user-centric testing, semantic locators, accessibility validation, and the balance between acceptance and implementation testing.