SkateSpots/.agents/skills/edit-profile/SKILL.md

name	description
edit-profile	Add a form that lets users edit their Nostr profile metadata (NIP-01 kind 0). Provides EditProfileForm with fields for name, about, picture, banner, website, nip05, and a bot flag, plus Blossom image uploads wired up through useUploadFile.

Edit Profile Form

This skill provides EditProfileForm, a drop-in React component that lets a logged-in user update their Nostr profile metadata (NIP-01 kind 0). The form covers the common metadata fields, handles image uploads through the project's existing useUploadFile hook, publishes a new kind 0 event on save, and invalidates the relevant TanStack Query caches so the rest of the app reflects the change.

This component is not included in the project by default. When the user wants profile editing, follow the setup instructions below to install the component.

Files Provided by This Skill

Skill file	Copy to
files/components/EditProfileForm.tsx	src/components/EditProfileForm.tsx

Setup Instructions

1. Dependencies

No extra npm packages are required. The component uses packages already present in the template:

• react-hook-form + @hookform/resolvers — form state and validation
• zod (via NSchema in @nostrify/nostrify) — metadata schema validation
• @tanstack/react-query — cache invalidation after publish
• @nostrify/nostrify — NSchema.metadata() Zod schema + NostrMetadata type
• lucide-react — icons
• shadcn/ui — Button, Form, Input, Textarea, Switch

2. Copy the Skill File Into src/

Copy .agents/skills/edit-profile/files/components/EditProfileForm.tsx into src/components/EditProfileForm.tsx. The component imports:

• @/hooks/useCurrentUser — current logged-in user and their existing metadata
• @/hooks/useNostrPublish — publishes the kind 0 event
• @/hooks/useToast — success/error feedback
• @/hooks/useUploadFile — Blossom uploads for picture/banner

All of these are standard in the template; no extra work is needed beyond copying the file.

Usage

Place the component anywhere a logged-in user should be able to edit their profile. It renders the form itself, with no surrounding layout:

import { EditProfileForm } from '@/components/EditProfileForm';

export default function EditProfilePage() {
  return (
    <div className="container mx-auto max-w-2xl py-8">
      <h1 className="text-2xl font-semibold mb-6">Edit Profile</h1>
      <EditProfileForm />
    </div>
  );
}

The component takes no props. It reads the current user's existing metadata via useCurrentUser and pre-populates every field, so the user can tweak values without losing anything else on their profile.

Fields

Field	NIP-01 key	Input	Notes
Name	name	text	Short handle
About	about	textarea	Bio / description
Picture	picture	URL + upload button	Profile avatar. Upload button calls useUploadFile and sets the resulting URL.
Banner	banner	URL + upload button	Profile banner. Same upload flow as picture.
Website	website	URL	Any related web URL
NIP-05	nip05	text	Email-like Nostr identifier (e.g. alice@example.com)
Bot	bot	switch	Marks the account as automated (NIP-24)

On submit, the component publishes a kind 0 event whose content is the JSON-stringified metadata, and invalidates any useAuthor/profile queries so the UI reflects the new values immediately.

Routing

The form is just a component. If you want a dedicated route for it, wire it up in AppRouter.tsx:

// AppRouter.tsx
import EditProfilePage from './pages/EditProfilePage';

<Route path="/settings/profile" element={<EditProfilePage />} />

Related Hooks

If you're building a profile page that displays the user's metadata (as opposed to editing it), use:

• useCurrentUser — the logged-in user and their metadata
• useAuthor(pubkey) — any user's metadata by pubkey

Both are part of the core template.