All authors
Claude Skills by VelimirMueller
github.com/VelimirMueller107 skills0 installs26 views
- Set Up Nextjs Supabase AuthUse when adding or fixing Supabase Auth in a Next.js 16 App Router app — @supabase/ssr cookie clients, session refresh in proxy.ts, verified getClaims() on the server, protected routes, PKCE callback and email-link routes, and sign-in by password, magic link or OAuth.Votes: 0GitHub stars: 5
- Set Up ObservabilityUse when a backend service should emit traces, metrics and trace-correlated logs. Wires app-side OpenTelemetry - SDK started before app code, HTTP and DB auto-instrumentation, use-case spans, RED metrics, OTEL_* env only, flush on shutdown (Hono, Go, FastAPI).Votes: 0GitHub stars: 5
- Set Up SupabaseUse when a project starts using Supabase or its supabase/ folder is missing or half-set-up — wires the CLI local stack, migrations as the only schema path, generated types, per-environment config, and one client seam per context so the secret key never reaches a bundle.Votes: 0GitHub stars: 5
- Build CliUse when creating or extending a command-line tool in TypeScript, Go, Python or Rust — subcommands, typed args, config precedence, stdout/stderr split, --json, exit codes, NO_COLOR/TTY handling, --dry-run, and spawn-the-binary tests.Votes: 0GitHub stars: 5
- Release CliUse when cutting a release of a CLI — SemVer over the CLI surface, changelog-driven release notes, tag-triggered CI, per-language distribution (npm, GoReleaser, PyPI, cargo-dist), signed or provenance-bearing artifacts, and install plus verify instructions in the README.Votes: 0GitHub stars: 5
- Set Up Dev ToolchainUse when setting up or auditing a repo's developer toolchain — mise pins and tasks or just, shared task verbs, lefthook git hooks, editorconfig, GitHub CLI conventions, and a doctor task that verifies everything.Votes: 0GitHub stars: 5
- Audit SecurityUse when asked to review a repo's security, before a release or go-live, or after adding auth, uploads, or a new integration. Scans secrets, dependencies, authz, headers and CI supply chain against security-baseline.md; reports ranked findings, fixes only what is approved.Votes: 0GitHub stars: 5
- Audit ToolchainUse when asked whether a repo's tooling is current, before a toolchain migration, or when a dependency or build step feels dated. Compares the repo to tech-radar.md and the stack profile and reports gaps with cost; changes nothing unless asked.Votes: 0GitHub stars: 5
- Extend SkillsetUse when the stack profile names a tool no installed skill covers, or the user asks for a new skill. Authors one in the house style, audit-first and profile-aware, into the project's .claude/skills or this plugin repo, then checks it.Votes: 0GitHub stars: 5
- Set Up Stack ProfileUse when starting in a repo with no .claude/stack-profile.md, when the stack changed, or when the user asks which plugins and skills to use. Detects the stack, asks only the gaps, writes the profile, and lists plugins and skill order.Votes: 0GitHub stars: 5
- Write Commit MessagesUse when committing work or writing a commit message — produces a subject and body any developer from junior to CTO can read and act on.Votes: 0GitHub stars: 5
- Write Pull RequestsUse when opening or updating a pull request — produces a bug-fix or feature description reviewers from junior to CTO can follow end to end.Votes: 0GitHub stars: 5
- Clean Frontend ScaffoldingUse when a freshly scaffolded Vite app still has the demo App, default styles, sample assets and placeholder title; reduces them to a minimal shell before real structure is added.Votes: 0GitHub stars: 5
- Configure AccessibilityUse when making a frontend accessible — turns on a11y linting (Biome a11y rules for React/JSX and, with full SFC support, for Vue templates), establishes semantic-HTML/focus/reduced-motion conventions, and adds axe checks to the test stack so accessibility regressions fail CI.Votes: 0GitHub stars: 5
- Configure AnalyticsUse when adding analytics to a frontend — one provider-agnostic seam (trackEvent/trackPageView), Core Web Vitals as real-user data, consent-gated by default (GDPR/TDDDG), path-only page views, no PII, no-op without config.Votes: 0GitHub stars: 5
- Configure CiUse when setting up CI/CD for a frontend project — a least-privilege GitHub Actions pipeline (install, lint, typecheck, audit, test, build, e2e, bundle budget) that gates merges, plus preview deploys per pull request for the project's host (Netlify, Vercel, self-hosted).Votes: 0GitHub stars: 5
- Configure Error TrackingUse when wiring production error tracking - points the captureError seam at Sentry (tracing, masked replay, explicit data collection), uploads hidden source maps with the Vite plugin, tags release and environment; no-op without a DSN.Votes: 0GitHub stars: 5
- Configure LintingUse when setting up lint and format in a frontend project - installs Biome as the only linter, formatter, import sorter and Tailwind class sorter (replacing ESLint/Prettier), with Vue SFC support, a lefthook pre-commit hook and a CI check.Votes: 0GitHub stars: 5
- Configure Test StackUse when setting up tests for a frontend project - Vitest (Node unit and integration, real-browser UI via Playwright), Storybook stories as tests, Playwright e2e and MSW, under tests/ or colocated per the stack profile.Votes: 0GitHub stars: 5
- Configure TypescriptUse when setting up or hardening TypeScript in a frontend project - strict flags, noUncheckedIndexedAccess, TS 6/7-safe paths, and one @/ alias kept in sync across tsconfig, Vite, Vitest, Storybook and Playwright.Votes: 0GitHub stars: 5
- Create ModuleUse when adding new logic to a frontend project (helper, hook, composable, wrapper, store) - routes it to the right layer (utils, libs, hooks, stores, feature folder) so components stay thin, with a unit test.Votes: 0GitHub stars: 5
- Optimize PerformanceUse when tuning frontend performance — enables the React Compiler, splits code by route and lazy-loads heavy chunks, adds bundle analysis with a size budget, measures Core Web Vitals (LCP/INP/CLS) with web-vitals, and applies image/CLS best practices. Measure first, then optimize.Votes: 0GitHub stars: 5
- Scaffold Frontend ProjectUse when starting a new frontend app from an empty directory - scaffolds a Vite 8 + TypeScript SPA (React 19 or Vue 3.5), pins the Node LTS and package manager, and wires Tailwind v4, leaving a running base.Votes: 0GitHub stars: 5
- Set Up AuthUse when adding authentication to a frontend SPA — current user as TanStack Query server state, tokens never in localStorage (httpOnly cookies, or in-memory access + refresh cookie), login/logout mutations, one 401-refresh in the fetcher, route guards.Votes: 0GitHub stars: 5
- Set Up Design SystemUse when establishing a design system — Tailwind v4 @theme tokens, class-based dark mode from a persisted theme store (CSP-safe pre-paint script), a cn() merger, and cva variant primitives; shadcn/ui is the optional component registry.Votes: 0GitHub stars: 5
- Set Up Document HeadUse when managing the document head of a frontend SPA — per-route title, meta, Open Graph, and canonical tags via TanStack Router's head option (React) or Unhead (@unhead/vue / @unhead/react), plus a correct html lang. Improves accessibility (titles announced on navigation) and SEO/social previews.Votes: 0GitHub stars: 5
- Set Up Error BoundariesUse when adding error handling to a frontend app - app-shell, page and component error boundaries with a retryable fallback, a captureError seam, and global handlers, ready for an error tracker.Votes: 0GitHub stars: 5
- Set Up Feature FlagsUse when adding feature flags to a frontend — vendor-agnostic OpenFeature SDK (useFlag hook/composable) with fail-closed defaults, user-targeting context, a dev override, and flag-gated routes. Provider swap (PostHog, GrowthBook, LaunchDarkly) is one line.Votes: 0GitHub stars: 5
- Set Up FormsUse when adding forms and validation to a frontend project — wires React Hook Form (React) or VeeValidate (Vue) with Zod schema-first validation, where one schema is the single source of truth for shape, rules, and inferred types, with accessible fields and submit wired to a TanStack Query mutation.Votes: 0GitHub stars: 5
- Set Up Frontend StructureUse when laying down the folder layout of a frontend project - atomic-design components, hooks or composables, libs, utils, stores, styles, and feature modules from the second domain on, with one example component.Votes: 0GitHub stars: 5
- Set Up I18nUse when internationalizing a frontend project — sets up i18next + react-i18next (React) or vue-i18n (Vue) with typed message keys, lazy-loaded per-locale catalogs, Intl-based number/date/relative formatting, and a persisted locale choice detected from the browser.Votes: 0GitHub stars: 5
- Set Up MotionUse when adding animation and transitions to a frontend — uses the native View Transitions API for navigation/layout changes and the Motion library (motion/react, formerly Framer Motion) for component enter/exit/gesture animation, with every animation gated behind prefers-reduced-motion.Votes: 0GitHub stars: 5
- Set Up PwaUse when making a frontend installable and offline-capable — sets up vite-plugin-pwa (service worker precaching the app shell, web manifest, auto-update), and optionally persists the TanStack Query cache so cached data is available offline, keeping the SW out of API caching.Votes: 0GitHub stars: 5
- Set Up RealtimeUse when adding live server-push updates to a frontend SPA - a WebSocket seam with backoff reconnect that writes validated pushed data into the TanStack Query cache and exposes connection status as UI state.Votes: 0GitHub stars: 5
- Set Up RoutingUse when adding client-side routing to a frontend SPA — wires TanStack Router (typed, file-based, React) or Vue Router (Vue) with lazy route code-splitting, loaders that prefetch into the TanStack Query cache, per-route error + pending UI, and a guard pattern for protected routes.Votes: 0GitHub stars: 5
- Set Up Security HeadersUse when hardening a frontend SPA's delivery — one strict Content-Security-Policy and header set (no unsafe-inline scripts), rendered for the project's host (Netlify, Vercel, or self-hosted Caddy/nginx/Traefik), plus Dependabot hygiene and an honest note on the XSS surface.Votes: 0GitHub stars: 5
- Set Up State ManagementUse when adding state management to a frontend project - TanStack Query for server state, Zustand (React) or Pinia (Vue) for UI state, a hard boundary between them, a typed query-key factory and a fetch seam.Votes: 0GitHub stars: 5
- Validate EnvUse when a frontend project reads import.meta.env - parses it once with a Zod schema at startup, fails fast with a readable message, and exports a typed env object the seams import instead of raw reads.Votes: 0GitHub stars: 5
- Manage Bevy AssetsUse when a Bevy game loads sprites, audio, levels or custom data — a loading state with handles, one asset-table seam, custom loaders, hot reload in dev, optional processing, and embedded assets so web and single-file builds work.Votes: 0GitHub stars: 5
- Optimize Bevy GameUse when a Bevy game stutters, drops frames, loads slowly, or ships a large binary or wasm — measure with diagnostics and Tracy/Chrome traces first, then fix change detection, system parallelism, batching, per-frame allocations, and release/wasm profiles.Votes: 0GitHub stars: 5
- Scaffold Bevy GameUse when starting a new Bevy game or fixing a Bevy project that compiles slowly, has fat code in main.rs, or has no CI — creates a lib+bin cargo project with fast dev builds, plugin composition, assets folder, clippy/rustfmt/nextest CI and optional wasm.Votes: 0GitHub stars: 5
- Structure Bevy AppUse when adding a feature to a Bevy game or untangling one — plugin-per-feature layout, app states with DespawnOnExit, system sets and ordering, messages vs observers, change detection, query conflicts, and where game logic ends and rendering begins.Votes: 0GitHub stars: 5
- Test Bevy SystemsUse when writing or fixing tests for a Bevy game — headless App/World tests with MinimalPlugins, running one system, asserting messages, observers and state transitions, deterministic time, ordering checks, property tests, and cargo-nextest in CI.Votes: 0GitHub stars: 5
- Containerize ServiceUse when a backend or full-stack service needs a production container image — multi-stage Dockerfile per track (Node/pnpm, Go, Python/uv), non-root, digest-pinned bases, health check, SBOM and provenance, image scan.Votes: 0GitHub stars: 5
- Deploy Otel CollectorUse when services emit OpenTelemetry and need one collector per environment — a Compose gateway with memory_limiter, batching, redaction and resource attributes, exporting to SigNoz, grafana/otel-lgtm or any OTLP backend, with a health check and a test span.Votes: 0GitHub stars: 5
- Deploy To HetznerUse when putting a containerized service on Hetzner Cloud with OpenTofu — a VM per environment, Cloud Firewall, private network, hardened cloud-init, Docker Compose with Traefik TLS, deploys by image digest, backups with a restore drill.Votes: 0GitHub stars: 5
- Deploy To IonosUse when hosting on IONOS Cloud with the ionoscloud OpenTofu provider (datacenter, LAN, server or Managed Kubernetes, DBaaS Postgres, Object Storage), or picking IONOS Deploy Now for a static site.Votes: 0GitHub stars: 5
- Deploy To VercelUse when deploying to Vercel - linking the project, env vars per environment and vercel env pull, protected previews, the config file, regions near the database, crons, rolling releases and rollback, the firewall, and gated prebuilt deploys from CI.Votes: 0GitHub stars: 5
- Manage SecretsUse when a repo handles credentials — decide where each secret lives per host (Vercel, GitHub environments, sops+age for Compose, Supabase), keep them out of images, logs, bundles and state, set up .env.example, rotation and secret scanning.Votes: 0GitHub stars: 5
- Set Up Delivery PipelineUse when a repo needs trunk-based CI/CD on GitHub Actions — PR checks, one image build per commit pushed by digest, auto-deploy to dev, tag to stg, manual approval to prd — with least-privilege permissions, SHA-pinned actions, OIDC and provenance.Votes: 0GitHub stars: 5