| 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:
Learning resources
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
