Build

Branded Sign-In

Branded authentication surfaces, provider and method artwork, original logo geometry and browser acceptance.

Supported chat agents

ChatGPT
Claude
Cursor

Paste into your agent, then send.

Read or select the full prompt

Get started with Branded Sign-In

Read https://starter.uppercut-labs.com/skills/branded-sign-in.md and help me install and use Branded Sign-In for my project.

On iPhone, touch and hold the text, then choose Copy. Use Select All if needed.

Use with dvn

Get Branded Sign-In

@uppercut-labs/skills is the premier and primary way to get Uppercut Labs agent skills. Pick a skill and the installer brings along its required skill dependencies. Requires Node.js 22 or newer.

Meet @uppercut-labs/skills on npm (opens in a new tab)

Your agent

npx @uppercut-labs/skills add branded-sign-in --host codex --project .

Run in your project folder.

Read or select the command

Terminal command

npx @uppercut-labs/skills add branded-sign-in --host codex --project .

On iPhone, touch and hold the text, then choose Copy. Use Select All if needed.

Let your agent take it from here

Paste into your agent, then send.

Read or select the full prompt

Install Branded Sign-In with your agent

Install the Branded Sign-In skill (branded-sign-in) for this project using @uppercut-labs/skills, the primary Uppercut Labs skills installer. Identify my agent host and project folder, then run npx @uppercut-labs/skills add branded-sign-in --host <host> --project <project-folder> with the actual values. Supported hosts: codex, claude, cursor, antigravity, grokbot, grokcli. Keep required skill dependencies enabled. Read the installed skill and help me use it for my next task. Report any installation failure or existing-file conflict.

On iPhone, touch and hold the text, then choose Copy. Use Select All if needed.

Build recognizable authentication interfaces with authentic provider artwork and verified interactions.

Use this when

Create or review sign-in, registration, account linking, recovery, or provider-choice screens. Backend-only authentication changes do not require this presentation workflow.

How it works

The agent checks the product identity, supported authentication methods, existing assets, and actual provider requirements. It uses authentic provider and method marks with visible names, preserves original logo geometry, and matches the product's visual language.

The review covers success, cancellation, errors, loading, focus, keyboard use, narrow screens, and theme changes. Appearance checks are separate from proving a successful authenticated session.

Try it

Use Branded Sign-In to review this account page and fix provider recognition, logo treatment, and keyboard behavior.

Pair it with Surface Sweep for a broader interface review.

Related skills

Surface Sweep — Broad visual QA and correction for existing web apps using automated browser probes and manual inspection.

Source

Canonical implementation: devin-thomas/skills (opens in a new tab)

All skills