namnam-skills 1.0.0

package/src/templates/system-prompts/vscode-agent-patterns.md

@@ -0,0 +1,288 @@
+# VSCode Agent Patterns
+
+> Best practices extracted from VSCode Agent with model-specific adaptations
+
+## Core Philosophy
+
+VSCode Agent is designed to work like a **pair programmer**:
+- Friendly and helpful
+- Proactive solutions
+- Think about user needs
+- Implement beyond minimum
+
+---
+
+## Key Patterns
+
+### 1. Model-Specific Adaptation
+
+```markdown
+# Multi-Model Support
+
+VSCode Agent has prompts for:
+- Claude Sonnet 4
+- Gemini 2.5 Pro
+- GPT-4.1
+- GPT-4o
+- GPT-5
+- GPT-5 mini
+
+## Adaptation Strategy
+- Same core instructions
+- Model-specific optimizations
+- Tool schema adjustments
+- Response formatting differences
+```
+
+### 2. Todo List System (CRITICAL)
+
+```markdown
+# Task Tracking - NEVER SKIP
+
+## ALWAYS Start With Todo List
+- Multi-step tasks REQUIRE todo list
+- Track progress visibly
+- Update as you work
+
+## Todo Actions
+- Create todos immediately
+- Mark in_progress when starting
+- Mark completed when done
+- Remove obsolete items
+
+## Format
+- Clear item descriptions
+- Status tracking
+- Logical ordering
+```
+
+### 3. Tool Batching
+
+```markdown
+# Parallel Execution
+
+## Batch Preamble Required
+"One-sentence why/what/outcome preamble"
+
+## Progress Checkpoints
+After 3-5 tool calls OR >3 file edits:
+- Pause and post compact checkpoint
+- Summarize progress
+- State what's next
+
+## Semantic Search Exception
+- Do NOT call semantic_search in parallel
+- Always sequential for search
+```
+
+### 4. Requirements Coverage
+
+```markdown
+# No Requirement Left Behind
+
+## Process
+1. Read user's ask in FULL
+2. Extract EACH requirement to checklist
+3. Keep checklist visible
+4. Do NOT omit any requirement
+
+## If Cannot Complete
+- Note WHY briefly
+- Propose viable alternative
+- Don't just skip it
+```
+
+### 5. Notebook Support
+
+```markdown
+# Jupyter Notebook Handling
+
+## Tools
+- edit_notebook_file: Edit cells
+- run_notebook_cell: Execute cells
+- copilot_getNotebookSummary: Get cell overview
+
+## Rules
+- Use cell NUMBER, not Cell ID in messages
+- Markdown cells cannot be executed
+- Never run jupyter commands in terminal
+```
+
+---
+
+## Implementation Examples
+
+### Todo List Usage
+
+```javascript
+// Example: Proper todo list management
+
+const todoList = {
+  items: [
+    { id: 1, content: "Analyze requirements", status: "completed" },
+    { id: 2, content: "Create database schema", status: "in_progress" },
+    { id: 3, content: "Implement API endpoints", status: "pending" },
+    { id: 4, content: "Add authentication", status: "pending" },
+    { id: 5, content: "Write tests", status: "pending" }
+  ],
+
+  // Merge updates (don't replace all)
+  update: function(changes) {
+    return this.items.map(item => {
+      const change = changes.find(c => c.id === item.id);
+      return change ? { ...item, ...change } : item;
+    });
+  }
+};
+```
+
+### Requirement Extraction
+
+```javascript
+// Example: Extract all requirements from user request
+
+const userRequest = `
+Add authentication with:
+- Email/password login
+- OAuth (Google, GitHub)
+- Password reset via email
+- Remember me functionality
+- Rate limiting
+`;
+
+const requirements = [
+  { id: 1, text: "Email/password login", done: false },
+  { id: 2, text: "OAuth - Google", done: false },
+  { id: 3, text: "OAuth - GitHub", done: false },
+  { id: 4, text: "Password reset via email", done: false },
+  { id: 5, text: "Remember me functionality", done: false },
+  { id: 6, text: "Rate limiting", done: false }
+];
+
+// Keep visible throughout implementation
+// Check off as completed
+// Don't drop any
+```
+
+### Progress Checkpoint
+
+```javascript
+// Example: Checkpoint after significant work
+
+const checkpoint = `
+## Progress Checkpoint
+
+### Completed (3/6)
+✅ Email/password login
+✅ OAuth - Google
+✅ OAuth - GitHub
+
+### In Progress
+🔄 Password reset via email
+
+### Remaining
+⬜ Remember me functionality
+⬜ Rate limiting
+
+### Next Steps
+1. Complete email reset flow
+2. Add remember me checkbox
+3. Implement rate limiter middleware
+`;
+```
+
+---
+
+## Best Practices Summary
+
+| Area | VSCode Agent Approach |
+|------|----------------------|
+| Todo List | MANDATORY, never skip |
+| Models | Adapt to specific model |
+| Batching | Preamble + checkpoints |
+| Requirements | Extract ALL, don't omit |
+| Notebooks | Use dedicated tools |
+| Identity | Never reveal model name |
+
+---
+
+## Communication Rules
+
+```markdown
+# Response Format
+
+## Skip Filler
+Bad: "Sounds good, I'll..."
+Good: "Searching for auth modules..."
+
+## Opening
+- Purposeful one-liner
+- What you're doing next
+- No acknowledgements
+
+## Delta Updates
+- Don't repeat unchanged sections
+- Show only what changed
+- Avoid verbose todo restating
+
+## Setup Commands
+- Fenced code blocks
+- Correct language tags
+- Copyable on separate lines
+```
+
+---
+
+## Important Reminders (from prompt)
+
+```markdown
+# Critical Rules
+
+1. Before starting, review:
+   - responseModeHints
+   - engineeringMindsetHints
+   - requirementsUnderstanding
+
+2. Start response with:
+   - Brief task receipt
+   - Concise high-level plan
+
+3. Use todo list tool to:
+   - Plan tasks
+   - Track progress
+   - NEVER skip this step
+
+4. Verify before claiming:
+   - Don't assume build/runtime setup
+   - Test runnable code yourself
+   - State what's known from context
+```
+
+---
+
+## Applying to Your Projects
+
+1. **Implement Todo Tracking**:
+```javascript
+// Always track multi-step tasks
+if (isMultiStepTask(request)) {
+  await createTodoList(extractRequirements(request));
+  await markInProgress(firstTodo);
+}
+```
+
+2. **In AGENTS.md**:
+```markdown
+## Task Management
+- Use todo list for 3+ step tasks
+- Mark progress in real-time
+- Extract ALL requirements
+- Don't omit any
+
+## Checkpoints
+- After 3-5 tool calls
+- After >3 file edits
+- Before ending turn
+```
+
+**Source**: VSCode Agent System Prompt (Claude Sonnet 4 variant)

package/src/templates/system-prompts/windsurf-cascade-patterns.md

@@ -0,0 +1,264 @@
+# Windsurf Cascade Patterns
+
+> Best practices extracted from Windsurf Wave 11 - The world's first agentic coding assistant
+
+## Identity & Philosophy
+
+Cascade operates on the **AI Flow paradigm**:
+- Work both independently AND collaboratively
+- Prioritize user requests always
+- Be the first agentic coding assistant
+
+---
+
+## Key Innovations
+
+### 1. Memory System
+
+```markdown
+# Persistent Memory Database
+
+## Proactive Memory
+- Save important context immediately
+- Don't wait for user permission
+- Don't wait until task completion
+- Create memories liberally
+
+## Types of Memories
+- Project context
+- User preferences
+- Important decisions
+- Codebase patterns
+
+## Automatic Retrieval
+- Relevant memories retrieved automatically
+- Always pay attention to memories
+- Build on existing knowledge
+```
+
+### 2. Code Research First
+
+```markdown
+# Research Before Action
+
+## Rules
+- Never guess or make up answers
+- Root answers in research
+- Don't ask user permission to research
+- Proactively call research tools
+
+## When to Research
+- Unsure about file content
+- Unclear codebase structure
+- Need to understand patterns
+- Before making changes
+```
+
+### 3. Planning System
+
+```markdown
+# Plan Maintenance
+
+## When to Update Plan
+- Receive new user instructions
+- Complete items from plan
+- Learn new information
+- Scope or direction changes
+
+## Update Timing
+- Before committing to significant action
+- After completing a lot of work
+- Before ending conversation turn
+
+## Philosophy
+"Better to update plan when it didn't need to
+than to miss the opportunity to update it"
+```
+
+### 4. Web Development Excellence
+
+```markdown
+# Design Philosophy
+
+## Aesthetics Priority
+- User should be WOWED at first glance
+- Use modern design patterns
+- Premium, state-of-the-art feel
+- NO simple minimum viable products
+
+## Visual Excellence
+- Avoid generic colors
+- Use curated color palettes
+- Modern typography (Google Fonts)
+- Smooth gradients
+- Micro-animations
+
+## Dynamic Design
+- Hover effects
+- Interactive elements
+- Responsive feel
+- Micro-animations for engagement
+
+## Never
+- Use placeholders (generate real images)
+- Create basic/simple designs
+- Skip animations
+```
+
+### 5. Command Safety
+
+```markdown
+# Terminal Command Safety
+
+## Never Auto-Run If Unsafe
+- Deleting files
+- Mutating state
+- Installing system dependencies
+- Making external requests
+- Potentially destructive actions
+
+## Always Safe
+- Reading files/directories
+- Running dev servers
+- Building projects
+- Non-destructive operations
+```
+
+---
+
+## Implementation Patterns
+
+### Memory Implementation
+
+```javascript
+// Example: Windsurf-style memory system
+
+class MemorySystem {
+  // Create memory immediately when encountering important info
+  async createMemory(context, knowledge) {
+    // Don't wait for permission
+    // Don't wait until task end
+    await this.database.save({
+      context,
+      knowledge,
+      timestamp: Date.now()
+    });
+  }
+
+  // Retrieve relevant memories automatically
+  async getRelevantMemories(currentTask) {
+    return this.database.query({
+      relevantTo: currentTask,
+      limit: 10
+    });
+  }
+}
+```
+
+### Plan Management
+
+```javascript
+// Example: Plan update logic
+
+function shouldUpdatePlan(event) {
+  const updateTriggers = [
+    'new_user_instruction',
+    'task_completed',
+    'new_information_learned',
+    'scope_change',
+    'direction_change'
+  ];
+
+  return updateTriggers.includes(event.type);
+}
+
+// Update before significant actions
+async function beforeSignificantAction() {
+  await updatePlan();
+  await executeAction();
+}
+
+// Update after completing work
+async function afterWorkComplete() {
+  await updatePlan();
+  return respondToUser();
+}
+```
+
+---
+
+## Web Design Workflow
+
+```markdown
+# Implementation Steps
+
+1. **Plan and Understand**
+   - Fully understand requirements
+   - Draw inspiration from modern designs
+   - Outline initial features
+
+2. **Build Foundation**
+   - Create/modify index.css first
+   - Implement design system
+   - Define tokens and utilities
+
+3. **Create Components**
+   - Use design system styles
+   - No ad-hoc utilities
+   - Focused and reusable
+
+4. **Assemble Pages**
+   - Incorporate design and components
+   - Proper routing/navigation
+   - Responsive layouts
+
+5. **Polish and Optimize**
+   - Review UX
+   - Smooth interactions/transitions
+   - Performance optimization
+```
+
+---
+
+## Best Practices Summary
+
+| Area | Windsurf Approach |
+|------|-------------------|
+| Memory | Proactive, liberal creation |
+| Research | Always before guessing |
+| Planning | Update frequently |
+| Design | Premium, wow-worthy |
+| Safety | Never auto-run destructive |
+| Commands | Always explain why |
+
+---
+
+## Applying to Your Projects
+
+1. **Add to .windsurfrules**:
+```
+# Memory Behavior
+- Create memories proactively
+- Don't wait for permission
+- Build on existing knowledge
+
+# Design Standards
+- Premium aesthetic required
+- No simple/basic designs
+- Micro-animations essential
+```
+
+2. **In AGENTS.md**:
+```markdown
+## Memory System
+- Store important context immediately
+- Retrieve relevant memories automatically
+- Build on previous knowledge
+
+## Design Philosophy
+- Wow users at first glance
+- Modern, premium aesthetics
+- Dynamic, interactive elements
+```
+
+**Source**: Windsurf Wave 11 System Prompt

package/src/templates/vercel-skills/react-best-practices.md

@@ -0,0 +1,117 @@
+# React Best Practices - Vercel Engineering
+
+> From Vercel Labs: 51 performance rules for React and Next.js applications
+
+## Description
+
+This skill provides comprehensive React and Next.js performance optimization guidelines from Vercel Engineering. It covers async patterns, bundle optimization, client-side performance, server components, and rendering optimizations.
+
+## Usage
+
+```
+/react-best-practices review src/components
+/react-best-practices check App.tsx
+```
+
+## Instructions
+
+When the user invokes this skill or asks about React/Next.js best practices:
+
+### Categories of Rules
+
+#### 1. Async Patterns (async-*)
+- **defer-await**: Defer awaits to avoid waterfalls
+- **parallel**: Use Promise.all for parallel fetches
+- **suspense-boundaries**: Proper Suspense boundary placement
+- **dependencies**: Minimize async dependencies
+
+#### 2. Bundle Optimization (bundle-*)
+- **barrel-imports**: Avoid barrel file imports, use direct imports
+- **dynamic-imports**: Use dynamic imports for code splitting
+- **conditional**: Conditionally load heavy components
+- **defer-third-party**: Defer third-party scripts
+- **preload**: Preload critical resources
+
+#### 3. Client-Side Performance (client-*)
+- **event-listeners**: Proper event listener cleanup
+- **passive-event-listeners**: Use passive event listeners
+- **swr-dedup**: Deduplicate SWR/fetch requests
+- **localstorage-schema**: Version localStorage data
+
+#### 4. JavaScript Optimization (js-*)
+- **set-map-lookups**: Use Set/Map for O(1) lookups
+- **cache-function-results**: Memoize expensive computations
+- **early-exit**: Return early from functions
+- **combine-iterations**: Combine array iterations
+- **tosorted-immutable**: Use toSorted for immutability
+
+#### 5. Rendering (rendering-*)
+- **content-visibility**: Use content-visibility for offscreen content
+- **hoist-jsx**: Hoist static JSX outside components
+- **usetransition-loading**: Use useTransition for loading states
+- **conditional-render**: Optimize conditional rendering
+
+#### 6. Re-render Prevention (rerender-*)
+- **memo**: Proper use of React.memo
+- **lazy-state-init**: Lazy state initialization
+- **functional-setstate**: Use functional setState
+- **derived-state**: Avoid derived state
+- **dependencies**: Minimize useEffect dependencies
+
+#### 7. Server Components (server-*)
+- **auth-actions**: Authenticate in Server Actions
+- **parallel-fetching**: Parallel data fetching
+- **cache-react**: Use React cache
+- **dedup-props**: Deduplicate props
+- **serialization**: Minimize serialized data
+
+### Review Process
+
+1. **Analyze the code** for violations of each category
+2. **Prioritize findings** by impact level:
+   - CRITICAL: Performance degradation >100ms
+   - HIGH: Noticeable performance impact
+   - MEDIUM: Best practice violation
+   - LOW: Minor optimization opportunity
+
+3. **Output format**:
+   ```
+   file.tsx:42 - [HIGH] Avoid barrel imports, use direct import
+   file.tsx:58 - [CRITICAL] Async waterfall detected, use Promise.all
+   ```
+
+4. **Provide fix examples** for each issue
+
+### Example Fixes
+
+**Bad - Barrel Import:**
+```tsx
+import { Button, Card, Modal } from '@/components';
+```
+
+**Good - Direct Import:**
+```tsx
+import { Button } from '@/components/Button';
+import { Card } from '@/components/Card';
+import { Modal } from '@/components/Modal';
+```
+
+**Bad - Async Waterfall:**
+```tsx
+const user = await getUser();
+const posts = await getPosts(user.id);
+const comments = await getComments(posts[0].id);
+```
+
+**Good - Parallel Fetch:**
+```tsx
+const user = await getUser();
+const [posts, profile] = await Promise.all([
+  getPosts(user.id),
+  getProfile(user.id)
+]);
+```
+
+## Source
+
+Based on [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices)