- Add date_added to all 950+ skills for complete tracking - Update version to 6.5.0 in package.json and README - Regenerate all indexes and catalog - Sync all generated files Features from merged PR #150: - Stars/Upvotes system for community-driven discovery - Auto-update mechanism via START_APP.bat - Interactive Prompt Builder - Date tracking badges - Smart auto-categorization All skills validated and indexed. Made-with: Cursor
279 lines
6.4 KiB
Markdown
279 lines
6.4 KiB
Markdown
---
|
|
name: ai-wrapper-product
|
|
description: "Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Cov..."
|
|
risk: unknown
|
|
source: "vibeship-spawner-skills (Apache 2.0)"
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# AI Wrapper Product
|
|
|
|
**Role**: AI Product Architect
|
|
|
|
You know AI wrappers get a bad rap, but the good ones solve real problems.
|
|
You build products where AI is the engine, not the gimmick. You understand
|
|
prompt engineering is product development. You balance costs with user
|
|
experience. You create AI products people actually pay for and use daily.
|
|
|
|
## Capabilities
|
|
|
|
- AI product architecture
|
|
- Prompt engineering for products
|
|
- API cost management
|
|
- AI usage metering
|
|
- Model selection
|
|
- AI UX patterns
|
|
- Output quality control
|
|
- AI product differentiation
|
|
|
|
## Patterns
|
|
|
|
### AI Product Architecture
|
|
|
|
Building products around AI APIs
|
|
|
|
**When to use**: When designing an AI-powered product
|
|
|
|
```python
|
|
## AI Product Architecture
|
|
|
|
### The Wrapper Stack
|
|
```
|
|
User Input
|
|
↓
|
|
Input Validation + Sanitization
|
|
↓
|
|
Prompt Template + Context
|
|
↓
|
|
AI API (OpenAI/Anthropic/etc.)
|
|
↓
|
|
Output Parsing + Validation
|
|
↓
|
|
User-Friendly Response
|
|
```
|
|
|
|
### Basic Implementation
|
|
```javascript
|
|
import Anthropic from '@anthropic-ai/sdk';
|
|
|
|
const anthropic = new Anthropic();
|
|
|
|
async function generateContent(userInput, context) {
|
|
// 1. Validate input
|
|
if (!userInput || userInput.length > 5000) {
|
|
throw new Error('Invalid input');
|
|
}
|
|
|
|
// 2. Build prompt
|
|
const systemPrompt = `You are a ${context.role}.
|
|
Always respond in ${context.format}.
|
|
Tone: ${context.tone}`;
|
|
|
|
// 3. Call API
|
|
const response = await anthropic.messages.create({
|
|
model: 'claude-3-haiku-20240307',
|
|
max_tokens: 1000,
|
|
system: systemPrompt,
|
|
messages: [{
|
|
role: 'user',
|
|
content: userInput
|
|
}]
|
|
});
|
|
|
|
// 4. Parse and validate output
|
|
const output = response.content[0].text;
|
|
return parseOutput(output);
|
|
}
|
|
```
|
|
|
|
### Model Selection
|
|
| Model | Cost | Speed | Quality | Use Case |
|
|
|-------|------|-------|---------|----------|
|
|
| GPT-4o | $$$ | Fast | Best | Complex tasks |
|
|
| GPT-4o-mini | $ | Fastest | Good | Most tasks |
|
|
| Claude 3.5 Sonnet | $$ | Fast | Excellent | Balanced |
|
|
| Claude 3 Haiku | $ | Fastest | Good | High volume |
|
|
```
|
|
|
|
### Prompt Engineering for Products
|
|
|
|
Production-grade prompt design
|
|
|
|
**When to use**: When building AI product prompts
|
|
|
|
```javascript
|
|
## Prompt Engineering for Products
|
|
|
|
### Prompt Template Pattern
|
|
```javascript
|
|
const promptTemplates = {
|
|
emailWriter: {
|
|
system: `You are an expert email writer.
|
|
Write professional, concise emails.
|
|
Match the requested tone.
|
|
Never include placeholder text.`,
|
|
user: (input) => `Write an email:
|
|
Purpose: ${input.purpose}
|
|
Recipient: ${input.recipient}
|
|
Tone: ${input.tone}
|
|
Key points: ${input.points.join(', ')}
|
|
Length: ${input.length} sentences`,
|
|
},
|
|
};
|
|
```
|
|
|
|
### Output Control
|
|
```javascript
|
|
// Force structured output
|
|
const systemPrompt = `
|
|
Always respond with valid JSON in this format:
|
|
{
|
|
"title": "string",
|
|
"content": "string",
|
|
"suggestions": ["string"]
|
|
}
|
|
Never include any text outside the JSON.
|
|
`;
|
|
|
|
// Parse with fallback
|
|
function parseAIOutput(text) {
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch {
|
|
// Fallback: extract JSON from response
|
|
const match = text.match(/\{[\s\S]*\}/);
|
|
if (match) return JSON.parse(match[0]);
|
|
throw new Error('Invalid AI output');
|
|
}
|
|
}
|
|
```
|
|
|
|
### Quality Control
|
|
| Technique | Purpose |
|
|
|-----------|---------|
|
|
| Examples in prompt | Guide output style |
|
|
| Output format spec | Consistent structure |
|
|
| Validation | Catch malformed responses |
|
|
| Retry logic | Handle failures |
|
|
| Fallback models | Reliability |
|
|
```
|
|
|
|
### Cost Management
|
|
|
|
Controlling AI API costs
|
|
|
|
**When to use**: When building profitable AI products
|
|
|
|
```javascript
|
|
## AI Cost Management
|
|
|
|
### Token Economics
|
|
```javascript
|
|
// Track usage
|
|
async function callWithCostTracking(userId, prompt) {
|
|
const response = await anthropic.messages.create({...});
|
|
|
|
// Log usage
|
|
await db.usage.create({
|
|
userId,
|
|
inputTokens: response.usage.input_tokens,
|
|
outputTokens: response.usage.output_tokens,
|
|
cost: calculateCost(response.usage),
|
|
model: 'claude-3-haiku',
|
|
});
|
|
|
|
return response;
|
|
}
|
|
|
|
function calculateCost(usage) {
|
|
const rates = {
|
|
'claude-3-haiku': { input: 0.25, output: 1.25 }, // per 1M tokens
|
|
};
|
|
const rate = rates['claude-3-haiku'];
|
|
return (usage.input_tokens * rate.input +
|
|
usage.output_tokens * rate.output) / 1_000_000;
|
|
}
|
|
```
|
|
|
|
### Cost Reduction Strategies
|
|
| Strategy | Savings |
|
|
|----------|---------|
|
|
| Use cheaper models | 10-50x |
|
|
| Limit output tokens | Variable |
|
|
| Cache common queries | High |
|
|
| Batch similar requests | Medium |
|
|
| Truncate input | Variable |
|
|
|
|
### Usage Limits
|
|
```javascript
|
|
async function checkUsageLimits(userId) {
|
|
const usage = await db.usage.sum({
|
|
where: {
|
|
userId,
|
|
createdAt: { gte: startOfMonth() }
|
|
}
|
|
});
|
|
|
|
const limits = await getUserLimits(userId);
|
|
if (usage.cost >= limits.monthlyCost) {
|
|
throw new Error('Monthly limit reached');
|
|
}
|
|
return true;
|
|
}
|
|
```
|
|
```
|
|
|
|
## Anti-Patterns
|
|
|
|
### ❌ Thin Wrapper Syndrome
|
|
|
|
**Why bad**: No differentiation.
|
|
Users just use ChatGPT.
|
|
No pricing power.
|
|
Easy to replicate.
|
|
|
|
**Instead**: Add domain expertise.
|
|
Perfect the UX for specific task.
|
|
Integrate into workflows.
|
|
Post-process outputs.
|
|
|
|
### ❌ Ignoring Costs Until Scale
|
|
|
|
**Why bad**: Surprise bills.
|
|
Negative unit economics.
|
|
Can't price properly.
|
|
Business isn't viable.
|
|
|
|
**Instead**: Track every API call.
|
|
Know your cost per user.
|
|
Set usage limits.
|
|
Price with margin.
|
|
|
|
### ❌ No Output Validation
|
|
|
|
**Why bad**: AI hallucinates.
|
|
Inconsistent formatting.
|
|
Bad user experience.
|
|
Trust issues.
|
|
|
|
**Instead**: Validate all outputs.
|
|
Parse structured responses.
|
|
Have fallback handling.
|
|
Post-process for consistency.
|
|
|
|
## ⚠️ Sharp Edges
|
|
|
|
| Issue | Severity | Solution |
|
|
|-------|----------|----------|
|
|
| AI API costs spiral out of control | high | ## Controlling AI Costs |
|
|
| App breaks when hitting API rate limits | high | ## Handling Rate Limits |
|
|
| AI gives wrong or made-up information | high | ## Handling Hallucinations |
|
|
| AI responses too slow for good UX | medium | ## Improving AI Latency |
|
|
|
|
## Related Skills
|
|
|
|
Works well with: `llm-architect`, `micro-saas-launcher`, `frontend`, `backend`
|
|
|
|
## When to Use
|
|
This skill is applicable to execute the workflow or actions described in the overview.
|