skills/nav-sop/SKILL.md
Create Standard Operating Procedures after solving novel issues, establishing patterns, or documenting workflows. Use when user says "document this solution", "save this for next time", "create SOP".
npx skillsauth add alekspetrov/navigator nav-sopInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Create Standard Operating Procedures (SOPs) - reusable documentation for processes, integrations, debugging solutions, and workflows.
Invoke this skill when the user:
DO NOT invoke if:
Ask user which category (or infer from context):
Categories:
Examples:
integrations/debugging/development/deployment/If user provided name:
If no name provided:
{service}-{action}Check existing SOPs in category:
ls .agent/sops/{category}/*.md 2>/dev/null
If similar SOP exists:
⚠️ Similar SOP found:
.agent/sops/{category}/{similar-name}.md
Options:
1. Read existing SOP (don't duplicate)
2. Update existing SOP (add to it)
3. Create new SOP (different enough)
Your choice [1-3]:
Create SOP document from conversation:
# {SOP Title}
**Category**: {integrations|debugging|development|deployment}
**Created**: {YYYY-MM-DD}
**Last Updated**: {YYYY-MM-DD}
---
## Context
**When to use this SOP**:
[Describe the scenario where this applies]
**Problem it solves**:
[What issue does this address?]
**Prerequisites**:
- [Requirement 1]
- [Requirement 2]
---
## The Problem
### Symptoms
[What does the issue look like?]
- Error message: `{specific error}`
- Behavior: [Unexpected behavior]
- Impact: [What breaks]
### Root Cause
[Why does this happen? Technical explanation]
---
## The Solution
### Step 1: {Action}
**Do this**:
```bash
# Command or code
npm install stripe
Why: [Explanation of what this accomplishes]
Expected output:
+ [email protected]
added 1 package
Do this:
// Code example
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
Why: [Explanation]
Configuration:
Add to .env:
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
...
File: src/services/stripe.ts
import Stripe from 'stripe';
export class StripeService {
private stripe: Stripe;
constructor() {
this.stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2023-10-16',
});
}
async createPaymentIntent(amount: number) {
return await this.stripe.paymentIntents.create({
amount: amount * 100, // Convert to cents
currency: 'usd',
});
}
}
File: src/routes/webhook.ts
export async function handleStripeWebhook(req: Request, res: Response) {
const sig = req.headers['stripe-signature'];
try {
const event = stripe.webhooks.constructEvent(
req.body,
sig,
process.env.STRIPE_WEBHOOK_SECRET!
);
// Handle event
switch (event.type) {
case 'payment_intent.succeeded':
// Process successful payment
break;
}
res.json({ received: true });
} catch (err) {
res.status(400).send(`Webhook Error: ${err.message}`);
}
}
Test 1: Create payment intent
curl -X POST http://localhost:3000/api/create-payment \
-H "Content-Type: application/json" \
-d '{"amount": 10}'
Expected result:
{
"clientSecret": "pi_xxx_secret_yyy"
}
Test 2: Webhook delivery
stripe listen --forward-to localhost:3000/webhook
Expected result:
Ready! You are using Stripe API Version [2023-10-16]
How to avoid this issue in future:
Red flags to watch for:
Symptoms:
Error: No signatures found matching the expected signature
Cause: Webhook secret mismatch or body already parsed
Fix:
// Use raw body for webhook verification
app.post('/webhook', express.raw({type: 'application/json'}), handleStripeWebhook);
Symptoms: Charged wrong amount
Cause: Forgot to convert to cents
Fix: Always multiply by 100 for Stripe amounts
Stripe Docs:
Our Docs:
.agent/tasks/TASK-04-stripe-integration.md.agent/system/project-architecture.md (payments section)External:
Update when:
Owner: [Team or person responsible]
Last Updated: {YYYY-MM-DD} Tested With: Stripe API v2023-10-16, Node.js v18+
### Step 5: Save SOP File
Write to appropriate category:
Write( file_path: ".agent/sops/{category}/{name}.md", content: [generated SOP] )
Filename: `.agent/sops/{category}/{name}.md`
### Step 6: Update Navigator Index
Edit `.agent/DEVELOPMENT-README.md` to add SOP to index:
```markdown
## Standard Operating Procedures
### Integrations
- **{Service}**: `.agent/sops/integrations/{name}.md` - {One-line description}
### Debugging
- **{Issue}**: `.agent/sops/debugging/{name}.md` - {Description}
### Development
...
### Deployment
...
If SOP came from specific task, add reference:
In task doc:
## Related SOPs
- `.agent/sops/integrations/stripe-payment-setup.md`
In SOP:
## Related Documentation
- Task: `.agent/tasks/TASK-04-stripe-integration.md`
Cross-linking helps discoverability.
Show completion message:
✅ SOP created successfully!
Title: {SOP Title}
Category: {category}
File: .agent/sops/{category}/{name}.md
Size: {X} KB (~{Y} tokens)
📚 SOP includes:
- Problem description & symptoms
- Step-by-step solution
- Complete code examples
- Testing instructions
- Troubleshooting guide
🔗 Navigator index updated
[If linked: Linked to TASK-{XX}]
To reference later:
Read .agent/sops/{category}/{name}.md
Purpose: How to set up third-party services
Examples:
stripe-payment-setup.mdgithub-oauth-integration.mdsendgrid-email-config.mdredis-session-store.mdStructure: Setup steps + Configuration + Testing
Purpose: How to solve common issues
Examples:
cors-proxy-errors.mdjwt-token-expiration.mddatabase-connection-timeout.mdbuild-errors-typescript.mdStructure: Symptoms + Root cause + Fix + Prevention
Purpose: Development workflows & patterns
Examples:
testing-authenticated-routes.mdadding-new-api-endpoint.mddatabase-migration-workflow.mdcomponent-testing-patterns.mdStructure: When to use + Steps + Example + Best practices
Purpose: Deploy, CI/CD, infrastructure
Examples:
deploy-to-production.mdrollback-failed-deploy.mdsetup-github-actions.mdenvironment-variables.mdStructure: Prerequisites + Steps + Verification + Rollback
User: "Finally fixed CORS issue, save this so we don't hit it again"
→ Creates: .agent/sops/debugging/cors-proxy-errors.md
→ Captures: Error, root cause, fix, prevention
→ Team won't repeat mistake
User: "Stripe webhooks working, document the setup"
→ Creates: .agent/sops/integrations/stripe-webhooks.md
→ Captures: All config steps, code, testing
→ Next integration is copy-paste
User: "Document how we test protected routes"
→ Creates: .agent/sops/development/testing-auth-routes.md
→ Captures: Pattern, examples, best practices
→ Team follows consistent approach
Category directory doesn't exist:
Creating category: .agent/sops/{category}/
✅ Directory created
SOPs directory missing entirely:
❌ Navigator not initialized
Run /nav:init to create .agent/ structure.
Duplicate SOP name:
⚠️ SOP already exists: {name}.md
Options:
1. Read existing (don't duplicate)
2. Update existing (add new info)
3. Rename new SOP ({name}-v2.md)
Your choice [1-3]:
SOP creation is successful when:
generate_sop.py: Create SOP from conversation
Good SOP names:
stripe-payment-integration (specific, descriptive)cors-proxy-configuration (clear purpose)jwt-token-refresh (explains what)Bad SOP names:
fix (too vague)integration (not specific)sop1 (meaningless)When to create SOPs:
SOP quality checklist:
SOPs are living documents:
They transform:
Impact: Zero repeated mistakes over time
This skill provides same functionality as /nav:doc sop command but with natural language invocation.
tools
Sync project CLAUDE.md to the installed Navigator version, preserving customizations. Use when user says "sync CLAUDE.md", "update CLAUDE.md", or when detecting outdated Navigator configuration.
tools
Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.
tools
Automates Navigator plugin updates. Detects current version, updates plugin, verifies installation, updates project CLAUDE.md, and validates new features. Auto-invoke when user mentions upgrading Navigator or getting new features.
documentation
Manage Navigator task documentation - create implementation plans, archive completed tasks, update task index. Use when user starts new feature, completes work, or says "document this feature".