dev-helper-writer

name	dev-helper-writer
description	Rephrase and polish developer-facing help texts, integration guides, and checklists to be clear, professional, and structurally sound.

Developer helper writer skill

This skill provides guidelines and patterns for rewriting, rephrasing, and polishing developer-facing documentation, integration guides, API explainers, and technical checklists in the codebase. It ensures technical concepts are explained clearly, accurately, and in accordance with modern web standards documentation.

Writing principles

• Direct and precise API terminology:
  • Refer to APIs, methods, attributes, and options by their exact names using inline code formatting (e.g., mediation: 'conditional', navigator.credentials.get(), autocomplete="username webauthn").
  • Anchor specifications with both their developer-friendly name and official specification name (e.g., "passkey form autofill (also known as Conditional UI)").
  • Link to specifications or reference docs (like MDN or developer.chrome.com) directly from API terms where helpful.
• Feature-benefit action items in checklists:
  • Format lists and checklists so that each item starts with a bolded descriptor outlining the action or benefit (e.g., Seamless Sign-In:, Orphaned Credential Cleanup:, Proactive Passkey Creation:).
  • Follow the bolded descriptor with a clear, concise explanation of the implementation mechanism.
• Categorized and labeled resources:
  • Group learning resources, codelabs, and guides clearly.
  • Prefix each resource link with its category in bold (e.g., Guide:, Codelab:, API Reference:).
  • Append the publisher or source in parentheses after the link (e.g., (web.dev), (Google Developers), (W3C)).
• Tone and style:
  • Clear, precise, and authoritative yet developer-friendly.
  • Action-oriented, focusing on how a developer can achieve the target UX or secure implementation.
  • Sentence case headings: Use sentence case for all titles and section headings (e.g. "## Integrating passkey management & registration" instead of "## Integrating Passkey Registration & Management").
  • No enumerated instructions: Do not enumerate instructions, steps, or checklist items using numbers unless a sequential order is strictly necessary. Prefer bullet points with bold descriptors instead to maintain clean, scannable documentation.

Example pattern: before & after

Before

How to integrate passkey form autofill

Use WebAuthn to build a passkey experience.

You can enable passkey form autofill by appending mediation: "conditional" to the navigator.credentials.get() call to an ordinary passkey authentication invocation. Also, the input element must contain webauthn within its autocomplete attribute.

There are a lot of tricks you can perform to make the passkey authentication experience better. Here's a checklist:

• Allow users to sign in with a passkey through form autofill.
• Signal when a passkey's matching credential is not found on the backend with PublicKeyCredential.signalUnknownCredential().
• Prompt users to manually create a passkey if the user hasn't created one after a sign-in.

Learning resources

• Sign in with a passkey through form autofill
• Server-side passkey authentication

After

Integrating passkey form autofill

To build a seamless sign-in experience, you can integrate passkey form autofill (also known as Conditional UI) using the WebAuthn API.

You can enable this by passing mediation: 'conditional' as an option to the navigator.credentials.get() call when initiating passkey authentication. Additionally, the corresponding username/password <input> element must include webauthn in its autocomplete attribute (e.g., autocomplete="username webauthn").

Best practices & advanced UX checklist

To deliver a top-tier passkey experience, consider implementing these advanced patterns and API integrations:

• Seamless Sign-In: Enable users to sign in with a passkey directly via form autofill to reduce friction.
• Orphaned Credential Cleanup: Use the WebAuthn Signal API's PublicKeyCredential.signalUnknownCredential() to notify the browser when a passkey's matching public key is not found on the server, allowing the browser to delete the invalid credential.
• Proactive Passkey Creation: Prompt users to create a passkey immediately after they successfully sign in using a traditional password.

Developer resources

• Guide: Sign in with a passkey through form autofill (web.dev)
• Guide: Server-side passkey authentication (Google Developers)