Add taking-screenshots skill for standardized documentation screenshots

[btiernay]

📝 Before you begin

By opening this PR, you agree to the terms of the Auth0 Code of Conduct. For guidance on creating a high-quality PR, see the Contributing Guidelines.

✏️ Changes

Adds a new Claude Code skill (taking-screenshots) that provides standardized guidance for taking and updating screenshots across Auth0 documentation sites.

• Problem solved: Ensures consistent screenshot workflow, viewport settings, file naming, and accessibility practices when Claude Code takes or updates documentation screenshots
• Docs/UI areas affected: Provides guidance for all three areas: main/, auth4genai/, and ui/
• Scope: Infrastructure/tooling only - this is a Claude Code skill file, not changes to documentation content

📁 Documentation scope

Docs site(s) affected

• main/
• auth4genai/

Other areas

• Shared UI library (ui/)
• GitHub workflows (.github/workflows/)
• Tooling or scripts (tools/)

Type of change

• New page or major section
• Update to existing content
• Navigation or structure change
• Code examples or snippets
• UI component or Mintlify configuration
• GitHub workflows (.github/workflows/)
• Scripts or tooling (tools/)

Paths: .claude/skills/taking-screenshots/

🔗 References

Claude Code Skills:

• Introducing Skills for Claude Code - What skills are and how they work

Sources:

• Screenshot Use Policy - Official screenshot guidelines
• PR #329 - Add screenshot usage patterns and metadata

🎯 Testing

Local validation

• Content-only change (no build or navigation impact) - Skill files are markdown documentation for Claude Code
• mint dev in affected folders - Not applicable (skill files, not docs content)
• mint broken-links (when applicable) - Not applicable
• mint a11y (when applicable) - Not applicable
• npm run build in ui/ (for UI changes) - Not applicable

Style and structure

• Follows the Contributing Guidelines
• Uses correct Auth0 terminology
• Code blocks include language and filenames when needed

Repo checks

• All required GitHub checks are passing
• The correct base branch is used

Note: This PR adds Claude Code skill files only. Testing will occur when the skill is used in practice to take screenshots.

🔄 Redirects

Not applicable - no URL changes.

🌍 Internationalization (main docs only)

• Not applicable - no English content changes in main/

🧩 Impact and dependencies

User-facing impact

No direct user-facing impact. This is a tooling change that affects how Claude Code takes screenshots for documentation, not the documentation content itself.

Dependencies

• Requires Playwright MCP server to be installed for screenshot capture
• Complements existing screenshot guidelines documented in wiki and PR Contribution Guide #329

🚀 Deployment

• Safe to deploy on merge

📝 Follow-up

• No follow-up needed
• Follow-up work required

Next steps:

• Test skill usage in practice when taking screenshots for Auth0 Dashboard UI
• Validate that file path patterns work correctly for each docs site
• Verify alt text guidelines produce accessible descriptions

💬 Additional context

This skill will be invoked automatically by Claude Code when users request screenshot capture or updates for documentation. It ensures:

• Consistent viewport settings (1280x720 for desktop, 375x667 for mobile)
• Correct file paths and naming conventions for each docs site
• Proper Playwright MCP usage for screenshot capture
• Accessible alt text following WCAG guidelines
• Integration with Mintlify <Frame> components

Learn more about Claude Code skills: Introducing Skills for Claude Code

🤖 Generated with Claude Code

Tip

Useful references:

• Contributing Guidelines
• Mintlify documentation: https://www.mintlify.com/docs
• main README
• auth4genai README

[KarimTantawy5]

Looks good