Avatar Upload
Let people upload a profile picture without wrecking your layout.
What it adds
Avatar upload with cropping, resizing, and a sensible fallback.
What your agent is told to do
4
What your agent is told to do
4-
1
Let the user crop and reposition before upload — never just accept and squash the image.
-
2
Resize server-side to a few fixed sizes. Do not serve a 5MB original as a 32px avatar.
-
3
Provide a deterministic fallback (initials or a generated shape) so a missing avatar never looks broken.
-
4
Strip EXIF metadata — it can contain the user's GPS location.
Edge cases it handles
4
Edge cases it handles
4- Validate the file is genuinely an image server-side; do not trust the extension or MIME type.
- Enforce a maximum file size and dimensions before processing — image bombs are a real DoS vector.
- Handle transparent PNGs and animated GIFs deliberately.
- Removing an avatar must fall back cleanly, not leave a broken image.
Definition of done
8
Definition of done
8- Users can crop and position before uploading.
- Images are validated as real images server-side.
- Size and dimension limits are enforced before processing.
- EXIF metadata is stripped.
- Resized variants are served, not the original.
- A missing avatar renders a clean fallback.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
User Roles
User Roles
Not everyone should be able to do everything.
What it does
Role-based permissions, enforced on the server, with a UI that reflects them.
How it works
-
1
Define roles and their permissions in ONE place. Scattering
if user.admin?through the codebase is how authorization bugs happen. - 2 Enforce every permission server-side, at the controller or service layer.
- 3 Hide UI the user can't use — but never rely on hiding as the enforcement.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/user-roles
Member Directory
Member Directory
Show who is in the workspace and how to identify them.
What it does
A searchable, read-only roster of workspace members with their role, status, and the profile fields they have chosen to share.
How it works
- 1 Build this as a read view. Inviting members is owned by Team Invitations, changing roles is owned by User Roles, and seat counts are owned by Seat Management — link out to those rather than duplicating their controls here.
- 2 Show each member's display name, avatar, role, and status. Status is not decoration: pending, active, suspended, deactivated, and external guest must be visually distinct and filterable.
- 3 Respect per-field profile visibility. A field the member marked private is not rendered, not returned by the API, and not searchable — hiding it in the template while shipping it in the payload is not privacy.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/member-directory
Account Linking
Account Linking
Let one account sign in several ways without spawning duplicates.
What it does
Attach and detach sign-in methods — password, OAuth providers, SSO — on a single existing account.
How it works
- 1 Model sign-in methods as separate identity records attached to one account, rather than columns on the user.
- 2 Require a fresh re-authentication before any link or unlink. A stale session is enough to read the app; it is not enough to change how the account is entered.
- 3 Refuse to link an identity that is already attached to another account. Explain the conflict and point the user at recovery — do not silently steal the identity or silently create a second account.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/account-linking
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.