Core (personio-*)v1.3.1

personio-eng-frontend

Skills and conventions for frontend development at Personio

by DX TeamView on GitHub ↗
personiofrontendreacttypescript

personio-eng-frontend

Skills and conventions for frontend development at Personio.

Installation

claude plugin install personio-eng-frontend@personio-claude-code-marketplace

What does this plugin do?

This plugin ships skills and an agent for frontend development at Personio — incident response, CI failure diagnosis, and project orientation — alongside three MCP servers (Playwright, Figma, Chrome DevTools).

debug-failed-ci-task

Diagnose a failing Nx task on main from a CI job ID and surface the exact fix command. Delegates to the bundled nx-task-debugger agent.

What you need:

  • gh CLI authenticated against Personio-Internal/personio-web

Quick Start:

/debug-failed-ci-task 73084724080

Why would you want this?

  • Pattern-matched root cause — covers stale translations, missing feature flags, type/test/snapshot/Playwright/lint/build/coverage failures so you skip the manual log scan.
  • Blast-radius check — flags whether the triggering commit even touched the failing project; saves engineers from blaming the wrong PR for a pre-existing flake.
  • Single fix command — the verdict ends with the exact pnpm nx run … to run.

incident-triage

Automates the routine first 5–10 minutes of on-call response into a single invocation: runbook → Datadog state → blast radius → probable causes → draft Slack post. Read-only by design.

What you need:

  • Optional: pup CLI for live Datadog state (skill falls back to dashboard links if unavailable)
  • Optional: Atlassian MCP for Confluence runbook search

Quick Start:

# Monitor ID
/incident-triage 95888696

# Symptom + service
/incident-triage "payroll views are slow"

Why would you want this?

  • Read-only by design — never acks monitors, deploys, or rolls back; the engineer keeps full control.
  • Owner + on-call lookup — combines monitor team: tag, Backstage, and helm-chart fallback; on-call pulled via personio-common:find-firefighter.
  • Confidence-calibrated hypotheses — probable causes are explicitly ranked High/Medium/Low so weak signals don't masquerade as authoritative.

project-info

Day-one rundown of an unfamiliar Nx project, lib, app, or product area — owner team, mounting routes, feature flags, reverse dependencies, federation surface, and dev commands.

What you need:

  • Running from inside personio-web

Quick Start:

/project-info recruiting-feature-job-ai-signals
/project-info product-areas/payroll/views/pay-runs-list
/project-info design-system

Why would you want this?

  • Reverse-dep visibility before refactoring — surfaces what imports the target so you don't break consumers silently.
  • Routes + flags + federation in one place — answers "where is this mounted, what gates it, what does it expose" without grepping across the monorepo yourself.
  • Pinpointed local commands — the report ends with the exact pnpm nx … invocations to run the project locally.

MCP Servers

This plugin includes three MCP servers for frontend development:

Playwright

Control browsers to test, debug, and verify your frontend applications.

  • Visual debugging with real browsers
  • Interactive testing of user flows
  • Accessibility verification
  • Responsive design testing across viewports

What you need: Node.js installed (Playwright installs automatically on first use)

"Open my local dev server at localhost:3000 and check if the navbar renders correctly"
"Take screenshots at mobile and desktop breakpoints"

Figma

Connect Claude to Figma for design context and code generation.

  • Read Figma files and component specs
  • Extract design tokens (colors, spacing, typography)
  • Generate React code from designs

What you need: Access to Figma files with appropriate permissions

"Read the button component from this Figma file and generate React code"
"What colors are used in this design?"

Chrome DevTools

Inspect a live Chrome browser for performance analysis and debugging.

  • Network request analysis
  • Performance profiling and Core Web Vitals
  • JavaScript error debugging
  • Accessibility audits

What you need: Node.js v20.19+ and Chrome browser installed

"Check the performance of our product page at localhost:3000/products"
"What JavaScript errors are in the console?"