diff --git a/README.md b/README.md index fa60da6f..18298b71 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# 🌌 Antigravity Awesome Skills: 179+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More +# 🌌 Antigravity Awesome Skills: 223+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **The Ultimate Collection of 179+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode** +> **The Ultimate Collection of 223+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode** [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](https://claude.ai) @@ -11,7 +11,7 @@ [![OpenCode](https://img.shields.io/badge/OpenCode-CLI-gray)](https://github.com/opencode-ai/opencode) [![Antigravity](https://img.shields.io/badge/Antigravity-DeepMind-red)](https://github.com/anthropics/antigravity) -**Antigravity Awesome Skills** is a curated, battle-tested library of **179 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: +**Antigravity Awesome Skills** is a curated, battle-tested library of **223 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: - 🟣 **Claude Code** (Anthropic CLI) - šŸ”µ **Gemini CLI** (Google DeepMind) @@ -46,6 +46,7 @@ This repository provides essential skills to transform your AI assistant into a - **[VISUAL_GUIDE.md](docs/VISUAL_GUIDE.md)** - Visual guide with diagrams **Quick Start:** + ```bash # 1. Install skills git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills @@ -54,9 +55,10 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skill @brainstorming help me design a todo app ``` -That's it! Your AI assistant now has 179 specialized skills. šŸŽ‰ +That's it! Your AI assistant now has 223 specialized skills. šŸŽ‰ **Additional Resources:** + - šŸ’” **[Real-World Examples](docs/EXAMPLES.md)** - See skills in action - ā“ **[FAQ](FAQ.md)** - Common questions answered @@ -107,7 +109,7 @@ The repository is organized into several key areas of expertise: --- -## Full Skill Registry (179/179) +## Full Skill Registry (223/223) Below is the complete list of available skills. Each skill folder contains a `SKILL.md` that can be imported into Antigravity or Claude Code. @@ -358,6 +360,7 @@ This collection would not be possible without the incredible work of the Claude - **[zircote/.claude](https://github.com/zircote/.claude)**: Shopify development skill reference. - **[vibeforge1111/vibeship-spawner-skills](https://github.com/vibeforge1111/vibeship-spawner-skills)**: AI Agents, Integrations, Maker Tools (57 skills, Apache 2.0). - **[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills)**: Marketing skills for CRO, copywriting, SEO, paid ads, and growth (23 skills, MIT). +- **[vudovn/antigravity-kit](https://github.com/vudovn/antigravity-kit)**: AI Agent templates with Skills, Agents, and Workflows (33 skills, MIT). ### Inspirations diff --git a/skills/api-patterns/SKILL.md b/skills/api-patterns/SKILL.md new file mode 100644 index 00000000..fbd4bef4 --- /dev/null +++ b/skills/api-patterns/SKILL.md @@ -0,0 +1,81 @@ +--- +name: api-patterns +description: API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination. +allowed-tools: Read, Write, Edit, Glob, Grep +--- + +# API Patterns + +> API design principles and decision-making for 2025. +> **Learn to THINK, not copy fixed patterns.** + +## šŸŽÆ Selective Reading Rule + +**Read ONLY files relevant to the request!** Check the content map, find what you need. + +--- + +## šŸ“‘ Content Map + +| File | Description | When to Read | +|------|-------------|--------------| +| `api-style.md` | REST vs GraphQL vs tRPC decision tree | Choosing API type | +| `rest.md` | Resource naming, HTTP methods, status codes | Designing REST API | +| `response.md` | Envelope pattern, error format, pagination | Response structure | +| `graphql.md` | Schema design, when to use, security | Considering GraphQL | +| `trpc.md` | TypeScript monorepo, type safety | TS fullstack projects | +| `versioning.md` | URI/Header/Query versioning | API evolution planning | +| `auth.md` | JWT, OAuth, Passkey, API Keys | Auth pattern selection | +| `rate-limiting.md` | Token bucket, sliding window | API protection | +| `documentation.md` | OpenAPI/Swagger best practices | Documentation | +| `security-testing.md` | OWASP API Top 10, auth/authz testing | Security audits | + +--- + +## šŸ”— Related Skills + +| Need | Skill | +|------|-------| +| API implementation | `@[skills/backend-development]` | +| Data structure | `@[skills/database-design]` | +| Security details | `@[skills/security-hardening]` | + +--- + +## āœ… Decision Checklist + +Before designing an API: + +- [ ] **Asked user about API consumers?** +- [ ] **Chosen API style for THIS context?** (REST/GraphQL/tRPC) +- [ ] **Defined consistent response format?** +- [ ] **Planned versioning strategy?** +- [ ] **Considered authentication needs?** +- [ ] **Planned rate limiting?** +- [ ] **Documentation approach defined?** + +--- + +## āŒ Anti-Patterns + +**DON'T:** +- Default to REST for everything +- Use verbs in REST endpoints (/getUsers) +- Return inconsistent response formats +- Expose internal errors to clients +- Skip rate limiting + +**DO:** +- Choose API style based on context +- Ask about client requirements +- Document thoroughly +- Use appropriate status codes + +--- + +## Script + +| Script | Purpose | Command | +|--------|---------|---------| +| `scripts/api_validator.py` | API endpoint validation | `python scripts/api_validator.py ` | + diff --git a/skills/api-patterns/api-style.md b/skills/api-patterns/api-style.md new file mode 100644 index 00000000..c94cb8a4 --- /dev/null +++ b/skills/api-patterns/api-style.md @@ -0,0 +1,42 @@ +# API Style Selection (2025) + +> REST vs GraphQL vs tRPC - Hangi durumda hangisi? + +## Decision Tree + +``` +Who are the API consumers? +│ +ā”œā”€ā”€ Public API / Multiple platforms +│ └── REST + OpenAPI (widest compatibility) +│ +ā”œā”€ā”€ Complex data needs / Multiple frontends +│ └── GraphQL (flexible queries) +│ +ā”œā”€ā”€ TypeScript frontend + backend (monorepo) +│ └── tRPC (end-to-end type safety) +│ +ā”œā”€ā”€ Real-time / Event-driven +│ └── WebSocket + AsyncAPI +│ +└── Internal microservices + └── gRPC (performance) or REST (simplicity) +``` + +## Comparison + +| Factor | REST | GraphQL | tRPC | +|--------|------|---------|------| +| **Best for** | Public APIs | Complex apps | TS monorepos | +| **Learning curve** | Low | Medium | Low (if TS) | +| **Over/under fetching** | Common | Solved | Solved | +| **Type safety** | Manual (OpenAPI) | Schema-based | Automatic | +| **Caching** | HTTP native | Complex | Client-based | + +## Selection Questions + +1. Who are the API consumers? +2. Is the frontend TypeScript? +3. How complex are the data relationships? +4. Is caching critical? +5. Public or internal API? diff --git a/skills/api-patterns/auth.md b/skills/api-patterns/auth.md new file mode 100644 index 00000000..c04030d3 --- /dev/null +++ b/skills/api-patterns/auth.md @@ -0,0 +1,24 @@ +# Authentication Patterns + +> Choose auth pattern based on use case. + +## Selection Guide + +| Pattern | Best For | +|---------|----------| +| **JWT** | Stateless, microservices | +| **Session** | Traditional web, simple | +| **OAuth 2.0** | Third-party integration | +| **API Keys** | Server-to-server, public APIs | +| **Passkey** | Modern passwordless (2025+) | + +## JWT Principles + +``` +Important: +ā”œā”€ā”€ Always verify signature +ā”œā”€ā”€ Check expiration +ā”œā”€ā”€ Include minimal claims +ā”œā”€ā”€ Use short expiry + refresh tokens +└── Never store sensitive data in JWT +``` diff --git a/skills/api-patterns/documentation.md b/skills/api-patterns/documentation.md new file mode 100644 index 00000000..5e199da0 --- /dev/null +++ b/skills/api-patterns/documentation.md @@ -0,0 +1,26 @@ +# API Documentation Principles + +> Good docs = happy developers = API adoption. + +## OpenAPI/Swagger Essentials + +``` +Include: +ā”œā”€ā”€ All endpoints with examples +ā”œā”€ā”€ Request/response schemas +ā”œā”€ā”€ Authentication requirements +ā”œā”€ā”€ Error response formats +└── Rate limiting info +``` + +## Good Documentation Has + +``` +Essentials: +ā”œā”€ā”€ Quick start / Getting started +ā”œā”€ā”€ Authentication guide +ā”œā”€ā”€ Complete API reference +ā”œā”€ā”€ Error handling guide +ā”œā”€ā”€ Code examples (multiple languages) +└── Changelog +``` diff --git a/skills/api-patterns/graphql.md b/skills/api-patterns/graphql.md new file mode 100644 index 00000000..1e5632ce --- /dev/null +++ b/skills/api-patterns/graphql.md @@ -0,0 +1,41 @@ +# GraphQL Principles + +> Flexible queries for complex, interconnected data. + +## When to Use + +``` +āœ… Good fit: +ā”œā”€ā”€ Complex, interconnected data +ā”œā”€ā”€ Multiple frontend platforms +ā”œā”€ā”€ Clients need flexible queries +ā”œā”€ā”€ Evolving data requirements +└── Reducing over-fetching matters + +āŒ Poor fit: +ā”œā”€ā”€ Simple CRUD operations +ā”œā”€ā”€ File upload heavy +ā”œā”€ā”€ HTTP caching important +└── Team unfamiliar with GraphQL +``` + +## Schema Design Principles + +``` +Principles: +ā”œā”€ā”€ Think in graphs, not endpoints +ā”œā”€ā”€ Design for evolvability (no versions) +ā”œā”€ā”€ Use connections for pagination +ā”œā”€ā”€ Be specific with types (not generic "data") +└── Handle nullability thoughtfully +``` + +## Security Considerations + +``` +Protect against: +ā”œā”€ā”€ Query depth attacks → Set max depth +ā”œā”€ā”€ Query complexity → Calculate cost +ā”œā”€ā”€ Batching abuse → Limit batch size +ā”œā”€ā”€ Introspection → Disable in production +``` diff --git a/skills/api-patterns/rate-limiting.md b/skills/api-patterns/rate-limiting.md new file mode 100644 index 00000000..cffaa290 --- /dev/null +++ b/skills/api-patterns/rate-limiting.md @@ -0,0 +1,31 @@ +# Rate Limiting Principles + +> Protect your API from abuse and overload. + +## Why Rate Limit + +``` +Protect against: +ā”œā”€ā”€ Brute force attacks +ā”œā”€ā”€ Resource exhaustion +ā”œā”€ā”€ Cost overruns (if pay-per-use) +└── Unfair usage +``` + +## Strategy Selection + +| Type | How | When | +|------|-----|------| +| **Token bucket** | Burst allowed, refills over time | Most APIs | +| **Sliding window** | Smooth distribution | Strict limits | +| **Fixed window** | Simple counters per window | Basic needs | + +## Response Headers + +``` +Include in headers: +ā”œā”€ā”€ X-RateLimit-Limit (max requests) +ā”œā”€ā”€ X-RateLimit-Remaining (requests left) +ā”œā”€ā”€ X-RateLimit-Reset (when limit resets) +└── Return 429 when exceeded +``` diff --git a/skills/api-patterns/response.md b/skills/api-patterns/response.md new file mode 100644 index 00000000..3c6ab141 --- /dev/null +++ b/skills/api-patterns/response.md @@ -0,0 +1,37 @@ +# Response Format Principles + +> Consistency is key - choose a format and stick to it. + +## Common Patterns + +``` +Choose one: +ā”œā”€ā”€ Envelope pattern ({ success, data, error }) +ā”œā”€ā”€ Direct data (just return the resource) +└── HAL/JSON:API (hypermedia) +``` + +## Error Response + +``` +Include: +ā”œā”€ā”€ Error code (for programmatic handling) +ā”œā”€ā”€ User message (for display) +ā”œā”€ā”€ Details (for debugging, field-level errors) +ā”œā”€ā”€ Request ID (for support) +└── NOT internal details (security!) +``` + +## Pagination Types + +| Type | Best For | Trade-offs | +|------|----------|------------| +| **Offset** | Simple, jumpable | Performance on large datasets | +| **Cursor** | Large datasets | Can't jump to page | +| **Keyset** | Performance critical | Requires sortable key | + +### Selection Questions + +1. How large is the dataset? +2. Do users need to jump to specific pages? +3. Is data frequently changing? diff --git a/skills/api-patterns/rest.md b/skills/api-patterns/rest.md new file mode 100644 index 00000000..c04aa7ca --- /dev/null +++ b/skills/api-patterns/rest.md @@ -0,0 +1,40 @@ +# REST Principles + +> Resource-based API design - nouns not verbs. + +## Resource Naming Rules + +``` +Principles: +ā”œā”€ā”€ Use NOUNS, not verbs (resources, not actions) +ā”œā”€ā”€ Use PLURAL forms (/users not /user) +ā”œā”€ā”€ Use lowercase with hyphens (/user-profiles) +ā”œā”€ā”€ Nest for relationships (/users/123/posts) +└── Keep shallow (max 3 levels deep) +``` + +## HTTP Method Selection + +| Method | Purpose | Idempotent? | Body? | +|--------|---------|-------------|-------| +| **GET** | Read resource(s) | Yes | No | +| **POST** | Create new resource | No | Yes | +| **PUT** | Replace entire resource | Yes | Yes | +| **PATCH** | Partial update | No | Yes | +| **DELETE** | Remove resource | Yes | No | + +## Status Code Selection + +| Situation | Code | Why | +|-----------|------|-----| +| Success (read) | 200 | Standard success | +| Created | 201 | New resource created | +| No content | 204 | Success, nothing to return | +| Bad request | 400 | Malformed request | +| Unauthorized | 401 | Missing/invalid auth | +| Forbidden | 403 | Valid auth, no permission | +| Not found | 404 | Resource doesn't exist | +| Conflict | 409 | State conflict (duplicate) | +| Validation error | 422 | Valid syntax, invalid data | +| Rate limited | 429 | Too many requests | +| Server error | 500 | Our fault | diff --git a/skills/api-patterns/scripts/api_validator.py b/skills/api-patterns/scripts/api_validator.py new file mode 100644 index 00000000..930db829 --- /dev/null +++ b/skills/api-patterns/scripts/api_validator.py @@ -0,0 +1,211 @@ +#!/usr/bin/env python3 +""" +API Validator - Checks API endpoints for best practices. +Validates OpenAPI specs, response formats, and common issues. +""" +import sys +import json +import re +from pathlib import Path + +# Fix Windows console encoding for Unicode output +try: + sys.stdout.reconfigure(encoding='utf-8', errors='replace') + sys.stderr.reconfigure(encoding='utf-8', errors='replace') +except AttributeError: + pass # Python < 3.7 + +def find_api_files(project_path: Path) -> list: + """Find API-related files.""" + patterns = [ + "**/*api*.ts", "**/*api*.js", "**/*api*.py", + "**/routes/*.ts", "**/routes/*.js", "**/routes/*.py", + "**/controllers/*.ts", "**/controllers/*.js", + "**/endpoints/*.ts", "**/endpoints/*.py", + "**/*.openapi.json", "**/*.openapi.yaml", + "**/swagger.json", "**/swagger.yaml", + "**/openapi.json", "**/openapi.yaml" + ] + + files = [] + for pattern in patterns: + files.extend(project_path.glob(pattern)) + + # Exclude node_modules, etc. + return [f for f in files if not any(x in str(f) for x in ['node_modules', '.git', 'dist', 'build', '__pycache__'])] + +def check_openapi_spec(file_path: Path) -> dict: + """Check OpenAPI/Swagger specification.""" + issues = [] + passed = [] + + try: + content = file_path.read_text(encoding='utf-8') + + if file_path.suffix == '.json': + spec = json.loads(content) + else: + # Basic YAML check + if 'openapi:' in content or 'swagger:' in content: + passed.append("[OK] OpenAPI/Swagger version defined") + else: + issues.append("[X] No OpenAPI version found") + + if 'paths:' in content: + passed.append("[OK] Paths section exists") + else: + issues.append("[X] No paths defined") + + if 'components:' in content or 'definitions:' in content: + passed.append("[OK] Schema components defined") + + return {'file': str(file_path), 'passed': passed, 'issues': issues, 'type': 'openapi'} + + # JSON OpenAPI checks + if 'openapi' in spec or 'swagger' in spec: + passed.append("[OK] OpenAPI version defined") + + if 'info' in spec: + if 'title' in spec['info']: + passed.append("[OK] API title defined") + if 'version' in spec['info']: + passed.append("[OK] API version defined") + if 'description' not in spec['info']: + issues.append("[!] API description missing") + + if 'paths' in spec: + path_count = len(spec['paths']) + passed.append(f"[OK] {path_count} endpoints defined") + + # Check each path + for path, methods in spec['paths'].items(): + for method, details in methods.items(): + if method in ['get', 'post', 'put', 'patch', 'delete']: + if 'responses' not in details: + issues.append(f"[X] {method.upper()} {path}: No responses defined") + if 'summary' not in details and 'description' not in details: + issues.append(f"[!] {method.upper()} {path}: No description") + + except Exception as e: + issues.append(f"[X] Parse error: {e}") + + return {'file': str(file_path), 'passed': passed, 'issues': issues, 'type': 'openapi'} + +def check_api_code(file_path: Path) -> dict: + """Check API code for common issues.""" + issues = [] + passed = [] + + try: + content = file_path.read_text(encoding='utf-8') + + # Check for error handling + error_patterns = [ + r'try\s*{', r'try:', r'\.catch\(', + r'except\s+', r'catch\s*\(' + ] + has_error_handling = any(re.search(p, content) for p in error_patterns) + if has_error_handling: + passed.append("[OK] Error handling present") + else: + issues.append("[X] No error handling found") + + # Check for status codes + status_patterns = [ + r'status\s*\(\s*\d{3}\s*\)', r'statusCode\s*[=:]\s*\d{3}', + r'HttpStatus\.', r'status_code\s*=\s*\d{3}', + r'\.status\(\d{3}\)', r'res\.status\(' + ] + has_status = any(re.search(p, content) for p in status_patterns) + if has_status: + passed.append("[OK] HTTP status codes used") + else: + issues.append("[!] No explicit HTTP status codes") + + # Check for validation + validation_patterns = [ + r'validate', r'schema', r'zod', r'joi', r'yup', + r'pydantic', r'@Body\(', r'@Query\(' + ] + has_validation = any(re.search(p, content, re.I) for p in validation_patterns) + if has_validation: + passed.append("[OK] Input validation present") + else: + issues.append("[!] No input validation detected") + + # Check for auth middleware + auth_patterns = [ + r'auth', r'jwt', r'bearer', r'token', + r'middleware', r'guard', r'@Authenticated' + ] + has_auth = any(re.search(p, content, re.I) for p in auth_patterns) + if has_auth: + passed.append("[OK] Authentication/authorization detected") + + # Check for rate limiting + rate_patterns = [r'rateLimit', r'throttle', r'rate.?limit'] + has_rate = any(re.search(p, content, re.I) for p in rate_patterns) + if has_rate: + passed.append("[OK] Rate limiting present") + + # Check for logging + log_patterns = [r'console\.log', r'logger\.', r'logging\.', r'log\.'] + has_logging = any(re.search(p, content) for p in log_patterns) + if has_logging: + passed.append("[OK] Logging present") + + except Exception as e: + issues.append(f"[X] Read error: {e}") + + return {'file': str(file_path), 'passed': passed, 'issues': issues, 'type': 'code'} + +def main(): + target = sys.argv[1] if len(sys.argv) > 1 else "." + project_path = Path(target) + + print("\n" + "=" * 60) + print(" API VALIDATOR - Endpoint Best Practices Check") + print("=" * 60 + "\n") + + api_files = find_api_files(project_path) + + if not api_files: + print("[!] No API files found.") + print(" Looking for: routes/, controllers/, api/, openapi.json/yaml") + sys.exit(0) + + results = [] + for file_path in api_files[:15]: # Limit + if 'openapi' in file_path.name.lower() or 'swagger' in file_path.name.lower(): + result = check_openapi_spec(file_path) + else: + result = check_api_code(file_path) + results.append(result) + + # Print results + total_issues = 0 + total_passed = 0 + + for result in results: + print(f"\n[FILE] {result['file']} [{result['type']}]") + for item in result['passed']: + print(f" {item}") + total_passed += 1 + for item in result['issues']: + print(f" {item}") + if item.startswith("[X]"): + total_issues += 1 + + print("\n" + "=" * 60) + print(f"[RESULTS] {total_passed} passed, {total_issues} critical issues") + print("=" * 60) + + if total_issues == 0: + print("[OK] API validation passed") + sys.exit(0) + else: + print("[X] Fix critical issues before deployment") + sys.exit(1) + +if __name__ == "__main__": + main() diff --git a/skills/api-patterns/security-testing.md b/skills/api-patterns/security-testing.md new file mode 100644 index 00000000..265023fa --- /dev/null +++ b/skills/api-patterns/security-testing.md @@ -0,0 +1,122 @@ +# API Security Testing + +> Principles for testing API security. OWASP API Top 10, authentication, authorization testing. + +--- + +## OWASP API Security Top 10 + +| Vulnerability | Test Focus | +|---------------|------------| +| **API1: BOLA** | Access other users' resources | +| **API2: Broken Auth** | JWT, session, credentials | +| **API3: Property Auth** | Mass assignment, data exposure | +| **API4: Resource Consumption** | Rate limiting, DoS | +| **API5: Function Auth** | Admin endpoints, role bypass | +| **API6: Business Flow** | Logic abuse, automation | +| **API7: SSRF** | Internal network access | +| **API8: Misconfiguration** | Debug endpoints, CORS | +| **API9: Inventory** | Shadow APIs, old versions | +| **API10: Unsafe Consumption** | Third-party API trust | + +--- + +## Authentication Testing + +### JWT Testing + +| Check | What to Test | +|-------|--------------| +| Algorithm | None, algorithm confusion | +| Secret | Weak secrets, brute force | +| Claims | Expiration, issuer, audience | +| Signature | Manipulation, key injection | + +### Session Testing + +| Check | What to Test | +|-------|--------------| +| Generation | Predictability | +| Storage | Client-side security | +| Expiration | Timeout enforcement | +| Invalidation | Logout effectiveness | + +--- + +## Authorization Testing + +| Test Type | Approach | +|-----------|----------| +| **Horizontal** | Access peer users' data | +| **Vertical** | Access higher privilege functions | +| **Context** | Access outside allowed scope | + +### BOLA/IDOR Testing + +1. Identify resource IDs in requests +2. Capture request with user A's session +3. Replay with user B's session +4. Check for unauthorized access + +--- + +## Input Validation Testing + +| Injection Type | Test Focus | +|----------------|------------| +| SQL | Query manipulation | +| NoSQL | Document queries | +| Command | System commands | +| LDAP | Directory queries | + +**Approach:** Test all parameters, try type coercion, test boundaries, check error messages. + +--- + +## Rate Limiting Testing + +| Aspect | Check | +|--------|-------| +| Existence | Is there any limit? | +| Bypass | Headers, IP rotation | +| Scope | Per-user, per-IP, global | + +**Bypass techniques:** X-Forwarded-For, different HTTP methods, case variations, API versioning. + +--- + +## GraphQL Security + +| Test | Focus | +|------|-------| +| Introspection | Schema disclosure | +| Batching | Query DoS | +| Nesting | Depth-based DoS | +| Authorization | Field-level access | + +--- + +## Security Testing Checklist + +**Authentication:** +- [ ] Test for bypass +- [ ] Check credential strength +- [ ] Verify token security + +**Authorization:** +- [ ] Test BOLA/IDOR +- [ ] Check privilege escalation +- [ ] Verify function access + +**Input:** +- [ ] Test all parameters +- [ ] Check for injection + +**Config:** +- [ ] Check CORS +- [ ] Verify headers +- [ ] Test error handling + +--- + +> **Remember:** APIs are the backbone of modern apps. Test them like attackers will. diff --git a/skills/api-patterns/trpc.md b/skills/api-patterns/trpc.md new file mode 100644 index 00000000..10976866 --- /dev/null +++ b/skills/api-patterns/trpc.md @@ -0,0 +1,41 @@ +# tRPC Principles + +> End-to-end type safety for TypeScript monorepos. + +## When to Use + +``` +āœ… Perfect fit: +ā”œā”€ā”€ TypeScript on both ends +ā”œā”€ā”€ Monorepo structure +ā”œā”€ā”€ Internal tools +ā”œā”€ā”€ Rapid development +└── Type safety critical + +āŒ Poor fit: +ā”œā”€ā”€ Non-TypeScript clients +ā”œā”€ā”€ Public API +ā”œā”€ā”€ Need REST conventions +└── Multiple language backends +``` + +## Key Benefits + +``` +Why tRPC: +ā”œā”€ā”€ Zero schema maintenance +ā”œā”€ā”€ End-to-end type inference +ā”œā”€ā”€ IDE autocomplete across stack +ā”œā”€ā”€ Instant API changes reflected +└── No code generation step +``` + +## Integration Patterns + +``` +Common setups: +ā”œā”€ā”€ Next.js + tRPC (most common) +ā”œā”€ā”€ Monorepo with shared types +ā”œā”€ā”€ Remix + tRPC +└── Any TS frontend + backend +``` diff --git a/skills/api-patterns/versioning.md b/skills/api-patterns/versioning.md new file mode 100644 index 00000000..5ead01b2 --- /dev/null +++ b/skills/api-patterns/versioning.md @@ -0,0 +1,22 @@ +# Versioning Strategies + +> Plan for API evolution from day one. + +## Decision Factors + +| Strategy | Implementation | Trade-offs | +|----------|---------------|------------| +| **URI** | /v1/users | Clear, easy caching | +| **Header** | Accept-Version: 1 | Cleaner URLs, harder discovery | +| **Query** | ?version=1 | Easy to add, messy | +| **None** | Evolve carefully | Best for internal, risky for public | + +## Versioning Philosophy + +``` +Consider: +ā”œā”€ā”€ Public API? → Version in URI +ā”œā”€ā”€ Internal only? → May not need versioning +ā”œā”€ā”€ GraphQL? → Typically no versions (evolve schema) +ā”œā”€ā”€ tRPC? → Types enforce compatibility +``` diff --git a/skills/app-builder/SKILL.md b/skills/app-builder/SKILL.md new file mode 100644 index 00000000..2850e08e --- /dev/null +++ b/skills/app-builder/SKILL.md @@ -0,0 +1,75 @@ +--- +name: app-builder +description: Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents. +allowed-tools: Read, Write, Edit, Glob, Grep, Bash, Agent +--- + +# App Builder - Application Building Orchestrator + +> Analyzes user's requests, determines tech stack, plans structure, and coordinates agents. + +## šŸŽÆ Selective Reading Rule + +**Read ONLY files relevant to the request!** Check the content map, find what you need. + +| File | Description | When to Read | +|------|-------------|--------------| +| `project-detection.md` | Keyword matrix, project type detection | Starting new project | +| `tech-stack.md` | 2025 default stack, alternatives | Choosing technologies | +| `agent-coordination.md` | Agent pipeline, execution order | Coordinating multi-agent work | +| `scaffolding.md` | Directory structure, core files | Creating project structure | +| `feature-building.md` | Feature analysis, error handling | Adding features to existing project | +| `templates/SKILL.md` | **Project templates** | Scaffolding new project | + +--- + +## šŸ“¦ Templates (13) + +Quick-start scaffolding for new projects. **Read the matching template only!** + +| Template | Tech Stack | When to Use | +|----------|------------|-------------| +| [nextjs-fullstack](templates/nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack web app | +| [nextjs-saas](templates/nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS product | +| [nextjs-static](templates/nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page | +| [nuxt-app](templates/nuxt-app/TEMPLATE.md) | Nuxt 3 + Pinia | Vue full-stack app | +| [express-api](templates/express-api/TEMPLATE.md) | Express + JWT | REST API | +| [python-fastapi](templates/python-fastapi/TEMPLATE.md) | FastAPI | Python API | +| [react-native-app](templates/react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app | +| [flutter-app](templates/flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform mobile | +| [electron-desktop](templates/electron-desktop/TEMPLATE.md) | Electron + React | Desktop app | +| [chrome-extension](templates/chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension | +| [cli-tool](templates/cli-tool/TEMPLATE.md) | Node.js + Commander | CLI app | +| [monorepo-turborepo](templates/monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo | + +--- + +## šŸ”— Related Agents + +| Agent | Role | +|-------|------| +| `project-planner` | Task breakdown, dependency graph | +| `frontend-specialist` | UI components, pages | +| `backend-specialist` | API, business logic | +| `database-architect` | Schema, migrations | +| `devops-engineer` | Deployment, preview | + +--- + +## Usage Example + +``` +User: "Make an Instagram clone with photo sharing and likes" + +App Builder Process: +1. Project type: Social Media App +2. Tech stack: Next.js + Prisma + Cloudinary + Clerk +3. Create plan: + ā”œā”€ Database schema (users, posts, likes, follows) + ā”œā”€ API routes (12 endpoints) + ā”œā”€ Pages (feed, profile, upload) + └─ Components (PostCard, Feed, LikeButton) +4. Coordinate agents +5. Report progress +6. Start preview +``` diff --git a/skills/app-builder/agent-coordination.md b/skills/app-builder/agent-coordination.md new file mode 100644 index 00000000..e8a07faf --- /dev/null +++ b/skills/app-builder/agent-coordination.md @@ -0,0 +1,71 @@ +# Agent Coordination + +> How App Builder orchestrates specialist agents. + +## Agent Pipeline + +``` +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ APP BUILDER (Orchestrator) │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + │ + ā–¼ +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ PROJECT PLANNER │ +│ • Task breakdown │ +│ • Dependency graph │ +│ • File structure planning │ +│ • Create {task-slug}.md in project root (MANDATORY) │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + │ + ā–¼ +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ CHECKPOINT: PLAN VERIFICATION │ +│ šŸ”“ VERIFY: Does {task-slug}.md exist in project root? │ +│ šŸ”“ If NO → STOP → Create plan file first │ +│ šŸ”“ If YES → Proceed to specialist agents │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + │ + ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¼ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” + ā–¼ ā–¼ ā–¼ +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ DATABASE │ │ BACKEND │ │ FRONTEND │ +│ ARCHITECT │ │ SPECIALIST │ │ SPECIALIST │ +│ │ │ │ │ │ +│ • Schema design │ │ • API routes │ │ • Components │ +│ • Migrations │ │ • Controllers │ │ • Pages │ +│ • Seed data │ │ • Middleware │ │ • Styling │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + │ │ │ + ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”¼ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + ā–¼ +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ PARALLEL PHASE (Optional) │ +│ • Security Auditor → Vulnerability check │ +│ • Test Engineer → Unit tests │ +│ • Performance Optimizer → Bundle analysis │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ + │ + ā–¼ +ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” +│ DEVOPS ENGINEER │ +│ • Environment setup │ +│ • Preview deployment │ +│ • Health check │ +ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜ +``` + +## Execution Order + +| Phase | Agent(s) | Parallel? | Prerequisite | CHECKPOINT | +|-------|----------|-----------|--------------|------------| +| 0 | Socratic Gate | āŒ | - | āœ… Ask 3 questions | +| 1 | Project Planner | āŒ | Questions answered | āœ… **PLAN.md created** | +| 1.5 | **PLAN VERIFICATION** | āŒ | PLAN.md exists | āœ… **File exists in root** | +| 2 | Database Architect | āŒ | Plan ready | Schema defined | +| 3 | Backend Specialist | āŒ | Schema ready | API routes created | +| 4 | Frontend Specialist | āœ… | API ready (partial) | UI components ready | +| 5 | Security Auditor, Test Engineer | āœ… | Code ready | Tests & audit pass | +| 6 | DevOps Engineer | āŒ | All code ready | Deployment ready | + +> šŸ”“ **CRITICAL:** Phase 1.5 is MANDATORY. No specialist agents proceed without PLAN.md verification. diff --git a/skills/app-builder/feature-building.md b/skills/app-builder/feature-building.md new file mode 100644 index 00000000..7bacb0b8 --- /dev/null +++ b/skills/app-builder/feature-building.md @@ -0,0 +1,53 @@ +# Feature Building + +> How to analyze and implement new features. + +## Feature Analysis + +``` +Request: "add payment system" + +Analysis: +ā”œā”€ā”€ Required Changes: +│ ā”œā”€ā”€ Database: orders, payments tables +│ ā”œā”€ā”€ Backend: /api/checkout, /api/webhooks/stripe +│ ā”œā”€ā”€ Frontend: CheckoutForm, PaymentSuccess +│ └── Config: Stripe API keys +│ +ā”œā”€ā”€ Dependencies: +│ ā”œā”€ā”€ stripe package +│ └── Existing user authentication +│ +└── Estimated Time: 15-20 minutes +``` + +## Iterative Enhancement Process + +``` +1. Analyze existing project +2. Create change plan +3. Present plan to user +4. Get approval +5. Apply changes +6. Test +7. Show preview +``` + +## Error Handling + +| Error Type | Solution Strategy | +|------------|-------------------| +| TypeScript Error | Fix type, add missing import | +| Missing Dependency | Run npm install | +| Port Conflict | Suggest alternative port | +| Database Error | Check migration, validate connection | + +## Recovery Strategy + +``` +1. Detect error +2. Try automatic fix +3. If failed, report to user +4. Suggest alternative +5. Rollback if necessary +``` diff --git a/skills/app-builder/project-detection.md b/skills/app-builder/project-detection.md new file mode 100644 index 00000000..ea06187a --- /dev/null +++ b/skills/app-builder/project-detection.md @@ -0,0 +1,34 @@ +# Project Type Detection + +> Analyze user requests to determine project type and template. + +## Keyword Matrix + +| Keywords | Project Type | Template | +|----------|--------------|----------| +| blog, post, article | Blog | astro-static | +| e-commerce, product, cart, payment | E-commerce | nextjs-saas | +| dashboard, panel, management | Admin Dashboard | nextjs-fullstack | +| api, backend, service, rest | API Service | express-api | +| python, fastapi, django | Python API | python-fastapi | +| mobile, android, ios, react native | Mobile App (RN) | react-native-app | +| flutter, dart | Mobile App (Flutter) | flutter-app | +| portfolio, personal, cv | Portfolio | nextjs-static | +| crm, customer, sales | CRM | nextjs-fullstack | +| saas, subscription, stripe | SaaS | nextjs-saas | +| landing, promotional, marketing | Landing Page | nextjs-static | +| docs, documentation | Documentation | astro-static | +| extension, plugin, chrome | Browser Extension | chrome-extension | +| desktop, electron | Desktop App | electron-desktop | +| cli, command line, terminal | CLI Tool | cli-tool | +| monorepo, workspace | Monorepo | monorepo-turborepo | + +## Detection Process + +``` +1. Tokenize user request +2. Extract keywords +3. Determine project type +4. Detect missing information → forward to conversation-manager +5. Suggest tech stack +``` diff --git a/skills/app-builder/scaffolding.md b/skills/app-builder/scaffolding.md new file mode 100644 index 00000000..35bba8a1 --- /dev/null +++ b/skills/app-builder/scaffolding.md @@ -0,0 +1,118 @@ +# Project Scaffolding + +> Directory structure and core files for new projects. + +--- + +## Next.js Full-Stack Structure (2025 Optimized) + +``` +project-name/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ app/ # Routes only (thin layer) +│ │ ā”œā”€ā”€ layout.tsx +│ │ ā”œā”€ā”€ page.tsx +│ │ ā”œā”€ā”€ globals.css +│ │ ā”œā”€ā”€ (auth)/ # Route group - auth pages +│ │ │ ā”œā”€ā”€ login/page.tsx +│ │ │ └── register/page.tsx +│ │ ā”œā”€ā”€ (dashboard)/ # Route group - dashboard layout +│ │ │ ā”œā”€ā”€ layout.tsx +│ │ │ └── page.tsx +│ │ └── api/ +│ │ └── [resource]/route.ts +│ │ +│ ā”œā”€ā”€ features/ # Feature-based modules +│ │ ā”œā”€ā”€ auth/ +│ │ │ ā”œā”€ā”€ components/ +│ │ │ ā”œā”€ā”€ hooks/ +│ │ │ ā”œā”€ā”€ actions.ts # Server Actions +│ │ │ ā”œā”€ā”€ queries.ts # Data fetching +│ │ │ └── types.ts +│ │ ā”œā”€ā”€ products/ +│ │ │ ā”œā”€ā”€ components/ +│ │ │ ā”œā”€ā”€ actions.ts +│ │ │ └── queries.ts +│ │ └── cart/ +│ │ └── ... +│ │ +│ ā”œā”€ā”€ shared/ # Shared utilities +│ │ ā”œā”€ā”€ components/ui/ # Reusable UI components +│ │ ā”œā”€ā”€ lib/ # Utils, helpers +│ │ └── hooks/ # Global hooks +│ │ +│ └── server/ # Server-only code +│ ā”œā”€ā”€ db/ # Database client (Prisma) +│ ā”œā”€ā”€ auth/ # Auth config +│ └── services/ # External API integrations +│ +ā”œā”€ā”€ prisma/ +│ ā”œā”€ā”€ schema.prisma +│ ā”œā”€ā”€ migrations/ +│ └── seed.ts +│ +ā”œā”€ā”€ public/ +ā”œā”€ā”€ .env.example +ā”œā”€ā”€ .env.local +ā”œā”€ā”€ package.json +ā”œā”€ā”€ tailwind.config.ts +ā”œā”€ā”€ tsconfig.json +└── README.md +``` + +--- + +## Structure Principles + +| Principle | Implementation | +|-----------|----------------| +| **Feature isolation** | Each feature in `features/` with its own components, hooks, actions | +| **Server/Client separation** | Server-only code in `server/`, prevents accidental client imports | +| **Thin routes** | `app/` only for routing, logic lives in `features/` | +| **Route groups** | `(groupName)/` for layout sharing without URL impact | +| **Shared code** | `shared/` for truly reusable UI and utilities | + +--- + +## Core Files + +| File | Purpose | +|------|---------| +| `package.json` | Dependencies | +| `tsconfig.json` | TypeScript + path aliases (`@/features/*`) | +| `tailwind.config.ts` | Tailwind config | +| `.env.example` | Environment template | +| `README.md` | Project documentation | +| `.gitignore` | Git ignore rules | +| `prisma/schema.prisma` | Database schema | + +--- + +## Path Aliases (tsconfig.json) + +```json +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"], + "@/features/*": ["./src/features/*"], + "@/shared/*": ["./src/shared/*"], + "@/server/*": ["./src/server/*"] + } + } +} +``` + +--- + +## When to Use What + +| Need | Location | +|------|----------| +| New page/route | `app/(group)/page.tsx` | +| Feature component | `features/[name]/components/` | +| Server action | `features/[name]/actions.ts` | +| Data fetching | `features/[name]/queries.ts` | +| Reusable button/input | `shared/components/ui/` | +| Database query | `server/db/` | +| External API call | `server/services/` | diff --git a/skills/app-builder/tech-stack.md b/skills/app-builder/tech-stack.md new file mode 100644 index 00000000..439299cb --- /dev/null +++ b/skills/app-builder/tech-stack.md @@ -0,0 +1,40 @@ +# Tech Stack Selection (2025) + +> Default and alternative technology choices for web applications. + +## Default Stack (Web App - 2025) + +```yaml +Frontend: + framework: Next.js 16 (Stable) + language: TypeScript 5.7+ + styling: Tailwind CSS v4 + state: React 19 Actions / Server Components + bundler: Turbopack (Stable for Dev) + +Backend: + runtime: Node.js 23 + framework: Next.js API Routes / Hono (for Edge) + validation: Zod / TypeBox + +Database: + primary: PostgreSQL + orm: Prisma / Drizzle + hosting: Supabase / Neon + +Auth: + provider: Auth.js (v5) / Clerk + +Monorepo: + tool: Turborepo 2.0 +``` + +## Alternative Options + +| Need | Default | Alternative | +|------|---------|-------------| +| Real-time | - | Supabase Realtime, Socket.io | +| File storage | - | Cloudinary, S3 | +| Payment | Stripe | LemonSqueezy, Paddle | +| Email | - | Resend, SendGrid | +| Search | - | Algolia, Typesense | diff --git a/skills/app-builder/templates/SKILL.md b/skills/app-builder/templates/SKILL.md new file mode 100644 index 00000000..3c077190 --- /dev/null +++ b/skills/app-builder/templates/SKILL.md @@ -0,0 +1,39 @@ +--- +name: templates +description: Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks. +allowed-tools: Read, Glob, Grep +--- + +# Project Templates + +> Quick-start templates for scaffolding new projects. + +--- + +## šŸŽÆ Selective Reading Rule + +**Read ONLY the template matching user's project type!** + +| Template | Tech Stack | When to Use | +|----------|------------|-------------| +| [nextjs-fullstack](nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack web app | +| [nextjs-saas](nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS product | +| [nextjs-static](nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page | +| [express-api](express-api/TEMPLATE.md) | Express + JWT | REST API | +| [python-fastapi](python-fastapi/TEMPLATE.md) | FastAPI | Python API | +| [react-native-app](react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app | +| [flutter-app](flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform | +| [electron-desktop](electron-desktop/TEMPLATE.md) | Electron + React | Desktop app | +| [chrome-extension](chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension | +| [cli-tool](cli-tool/TEMPLATE.md) | Node.js + Commander | CLI app | +| [monorepo-turborepo](monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo | +| [astro-static](astro-static/TEMPLATE.md) | Astro + MDX | Blog / Docs | + +--- + +## Usage + +1. User says "create [type] app" +2. Match to appropriate template +3. Read ONLY that template's TEMPLATE.md +4. Follow its tech stack and structure diff --git a/skills/app-builder/templates/astro-static/TEMPLATE.md b/skills/app-builder/templates/astro-static/TEMPLATE.md new file mode 100644 index 00000000..cd14084c --- /dev/null +++ b/skills/app-builder/templates/astro-static/TEMPLATE.md @@ -0,0 +1,76 @@ +--- +name: astro-static +description: Astro static site template principles. Content-focused websites, blogs, documentation. +--- + +# Astro Static Site Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Astro 4.x | +| Content | MDX + Content Collections | +| Styling | Tailwind CSS | +| Integrations | Sitemap, RSS, SEO | +| Output | Static/SSG | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ components/ # .astro components +│ ā”œā”€ā”€ content/ # MDX content +│ │ ā”œā”€ā”€ blog/ +│ │ └── config.ts # Collection schemas +│ ā”œā”€ā”€ layouts/ # Page layouts +│ ā”œā”€ā”€ pages/ # File-based routing +│ └── styles/ +ā”œā”€ā”€ public/ # Static assets +ā”œā”€ā”€ astro.config.mjs +└── package.json +``` + +--- + +## Key Concepts + +| Concept | Description | +|---------|-------------| +| Content Collections | Type-safe content with Zod schemas | +| Islands Architecture | Partial hydration for interactivity | +| Zero JS by default | Static HTML unless needed | +| MDX Support | Markdown with components | + +--- + +## Setup Steps + +1. `npm create astro@latest {{name}}` +2. Add integrations: `npx astro add mdx tailwind sitemap` +3. Configure `astro.config.mjs` +4. Create content collections +5. `npm run dev` + +--- + +## Deployment + +| Platform | Method | +|----------|--------| +| Vercel | Auto-detected | +| Netlify | Auto-detected | +| Cloudflare Pages | Auto-detected | +| GitHub Pages | Build + deploy action | + +--- + +## Best Practices + +- Use Content Collections for type safety +- Leverage static generation +- Add islands only where needed +- Optimize images with Astro Image diff --git a/skills/app-builder/templates/chrome-extension/TEMPLATE.md b/skills/app-builder/templates/chrome-extension/TEMPLATE.md new file mode 100644 index 00000000..18cdc9e4 --- /dev/null +++ b/skills/app-builder/templates/chrome-extension/TEMPLATE.md @@ -0,0 +1,92 @@ +--- +name: chrome-extension +description: Chrome Extension template principles. Manifest V3, React, TypeScript. +--- + +# Chrome Extension Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Manifest | V3 | +| UI | React 18 | +| Language | TypeScript | +| Styling | Tailwind CSS | +| Bundler | Vite | +| Storage | Chrome Storage API | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ popup/ # Extension popup +│ ā”œā”€ā”€ options/ # Options page +│ ā”œā”€ā”€ background/ # Service worker +│ ā”œā”€ā”€ content/ # Content scripts +│ ā”œā”€ā”€ components/ +│ ā”œā”€ā”€ hooks/ +│ └── lib/ +│ ā”œā”€ā”€ storage.ts # Chrome storage helpers +│ └── messaging.ts # Message passing +ā”œā”€ā”€ public/ +│ ā”œā”€ā”€ icons/ +│ └── manifest.json +└── package.json +``` + +--- + +## Manifest V3 Concepts + +| Component | Purpose | +|-----------|---------| +| Service Worker | Background processing | +| Content Scripts | Page injection | +| Popup | User interface | +| Options Page | Settings | + +--- + +## Permissions + +| Permission | Use | +|------------|-----| +| storage | Save user data | +| activeTab | Current tab access | +| scripting | Inject scripts | +| host_permissions | Site access | + +--- + +## Setup Steps + +1. `npm create vite {{name}} -- --template react-ts` +2. Add Chrome types: `npm install -D @types/chrome` +3. Configure Vite for multi-entry +4. Create manifest.json +5. `npm run dev` (watch mode) +6. Load in Chrome: `chrome://extensions` → Load unpacked + +--- + +## Development Tips + +| Task | Method | +|------|--------| +| Debug Popup | Right-click icon → Inspect | +| Debug Background | Extensions page → Service worker | +| Debug Content | DevTools console on page | +| Hot Reload | `npm run dev` with watch | + +--- + +## Best Practices + +- Use type-safe messaging +- Wrap Chrome APIs in promises +- Minimize permissions +- Handle offline gracefully diff --git a/skills/app-builder/templates/cli-tool/TEMPLATE.md b/skills/app-builder/templates/cli-tool/TEMPLATE.md new file mode 100644 index 00000000..5011162c --- /dev/null +++ b/skills/app-builder/templates/cli-tool/TEMPLATE.md @@ -0,0 +1,88 @@ +--- +name: cli-tool +description: Node.js CLI tool template principles. Commander.js, interactive prompts. +--- + +# CLI Tool Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Runtime | Node.js 20+ | +| Language | TypeScript | +| CLI Framework | Commander.js | +| Prompts | Inquirer.js | +| Output | chalk + ora | +| Config | cosmiconfig | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ index.ts # Entry point +│ ā”œā”€ā”€ cli.ts # CLI setup +│ ā”œā”€ā”€ commands/ # Command handlers +│ ā”œā”€ā”€ lib/ +│ │ ā”œā”€ā”€ config.ts # Config loader +│ │ └── logger.ts # Styled output +│ └── types/ +ā”œā”€ā”€ bin/ +│ └── cli.js # Executable +└── package.json +``` + +--- + +## CLI Design Principles + +| Principle | Description | +|-----------|-------------| +| Subcommands | Group related actions | +| Options | Flags with defaults | +| Interactive | Prompts when needed | +| Non-interactive | Support --yes flags | + +--- + +## Key Components + +| Component | Purpose | +|-----------|---------| +| Commander | Command parsing | +| Inquirer | Interactive prompts | +| Chalk | Colored output | +| Ora | Spinners/loading | +| Cosmiconfig | Config file discovery | + +--- + +## Setup Steps + +1. Create project directory +2. `npm init -y` +3. Install deps: `npm install commander @inquirer/prompts chalk ora cosmiconfig` +4. Configure bin in package.json +5. `npm link` for local testing + +--- + +## Publishing + +```bash +npm login +npm publish +``` + +--- + +## Best Practices + +- Provide helpful error messages +- Support both interactive and non-interactive modes +- Use consistent output styling +- Validate inputs with Zod +- Exit with proper codes (0 success, 1 error) diff --git a/skills/app-builder/templates/electron-desktop/TEMPLATE.md b/skills/app-builder/templates/electron-desktop/TEMPLATE.md new file mode 100644 index 00000000..cc65c97b --- /dev/null +++ b/skills/app-builder/templates/electron-desktop/TEMPLATE.md @@ -0,0 +1,88 @@ +--- +name: electron-desktop +description: Electron desktop app template principles. Cross-platform, React, TypeScript. +--- + +# Electron Desktop App Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Electron 28+ | +| UI | React 18 | +| Language | TypeScript | +| Styling | Tailwind CSS | +| Bundler | Vite + electron-builder | +| IPC | Type-safe communication | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ electron/ +│ ā”œā”€ā”€ main.ts # Main process +│ ā”œā”€ā”€ preload.ts # Preload script +│ └── ipc/ # IPC handlers +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ App.tsx +│ ā”œā”€ā”€ components/ +│ │ ā”œā”€ā”€ TitleBar.tsx # Custom title bar +│ │ └── ... +│ └── hooks/ +ā”œā”€ā”€ public/ +└── package.json +``` + +--- + +## Process Model + +| Process | Role | +|---------|------| +| Main | Node.js, system access | +| Renderer | Chromium, React UI | +| Preload | Bridge, context isolation | + +--- + +## Key Concepts + +| Concept | Purpose | +|---------|---------| +| contextBridge | Safe API exposure | +| ipcMain/ipcRenderer | Process communication | +| nodeIntegration: false | Security | +| contextIsolation: true | Security | + +--- + +## Setup Steps + +1. `npm create vite {{name}} -- --template react-ts` +2. Install: `npm install -D electron electron-builder vite-plugin-electron` +3. Create electron/ directory +4. Configure main process +5. `npm run electron:dev` + +--- + +## Build Targets + +| Platform | Output | +|----------|--------| +| Windows | NSIS, Portable | +| macOS | DMG, ZIP | +| Linux | AppImage, DEB | + +--- + +## Best Practices + +- Use preload script for main/renderer bridge +- Type-safe IPC with typed handlers +- Custom title bar for native feel +- Handle window state (maximize, minimize) +- Auto-updates with electron-updater diff --git a/skills/app-builder/templates/express-api/TEMPLATE.md b/skills/app-builder/templates/express-api/TEMPLATE.md new file mode 100644 index 00000000..738d036f --- /dev/null +++ b/skills/app-builder/templates/express-api/TEMPLATE.md @@ -0,0 +1,83 @@ +--- +name: express-api +description: Express.js REST API template principles. TypeScript, Prisma, JWT. +--- + +# Express.js API Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Runtime | Node.js 20+ | +| Framework | Express.js | +| Language | TypeScript | +| Database | PostgreSQL + Prisma | +| Validation | Zod | +| Auth | JWT + bcrypt | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ prisma/ +│ └── schema.prisma +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ app.ts # Express setup +│ ā”œā”€ā”€ config/ # Environment +│ ā”œā”€ā”€ routes/ # Route handlers +│ ā”œā”€ā”€ controllers/ # Business logic +│ ā”œā”€ā”€ services/ # Data access +│ ā”œā”€ā”€ middleware/ +│ │ ā”œā”€ā”€ auth.ts # JWT verify +│ │ ā”œā”€ā”€ error.ts # Error handler +│ │ └── validate.ts # Zod validation +│ ā”œā”€ā”€ schemas/ # Zod schemas +│ └── utils/ +└── package.json +``` + +--- + +## Middleware Stack + +| Order | Middleware | +|-------|------------| +| 1 | helmet (security) | +| 2 | cors | +| 3 | morgan (logging) | +| 4 | body parsing | +| 5 | routes | +| 6 | error handler | + +--- + +## API Response Format + +| Type | Structure | +|------|-----------| +| Success | `{ success: true, data: {...} }` | +| Error | `{ error: "message", details: [...] }` | + +--- + +## Setup Steps + +1. Create project directory +2. `npm init -y` +3. Install deps: `npm install express prisma zod bcrypt jsonwebtoken` +4. Configure Prisma +5. `npm run db:push` +6. `npm run dev` + +--- + +## Best Practices + +- Layer architecture (routes → controllers → services) +- Validate all inputs with Zod +- Centralized error handling +- Environment-based config +- Use Prisma for type-safe DB access diff --git a/skills/app-builder/templates/flutter-app/TEMPLATE.md b/skills/app-builder/templates/flutter-app/TEMPLATE.md new file mode 100644 index 00000000..f86b8bc1 --- /dev/null +++ b/skills/app-builder/templates/flutter-app/TEMPLATE.md @@ -0,0 +1,90 @@ +--- +name: flutter-app +description: Flutter mobile app template principles. Riverpod, Go Router, clean architecture. +--- + +# Flutter App Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Flutter 3.x | +| Language | Dart 3.x | +| State | Riverpod 2.0 | +| Navigation | Go Router | +| HTTP | Dio | +| Storage | Hive | + +--- + +## Directory Structure + +``` +project_name/ +ā”œā”€ā”€ lib/ +│ ā”œā”€ā”€ main.dart +│ ā”œā”€ā”€ app.dart +│ ā”œā”€ā”€ core/ +│ │ ā”œā”€ā”€ constants/ +│ │ ā”œā”€ā”€ theme/ +│ │ ā”œā”€ā”€ router/ +│ │ └── utils/ +│ ā”œā”€ā”€ features/ +│ │ ā”œā”€ā”€ auth/ +│ │ │ ā”œā”€ā”€ data/ +│ │ │ ā”œā”€ā”€ domain/ +│ │ │ └── presentation/ +│ │ └── home/ +│ ā”œā”€ā”€ shared/ +│ │ ā”œā”€ā”€ widgets/ +│ │ └── providers/ +│ └── services/ +│ ā”œā”€ā”€ api/ +│ └── storage/ +ā”œā”€ā”€ test/ +└── pubspec.yaml +``` + +--- + +## Architecture Layers + +| Layer | Contents | +|-------|----------| +| Presentation | Screens, Widgets, Providers | +| Domain | Entities, Use Cases | +| Data | Repositories, Models | + +--- + +## Key Packages + +| Package | Purpose | +|---------|---------| +| flutter_riverpod | State management | +| riverpod_annotation | Code generation | +| go_router | Navigation | +| dio | HTTP client | +| freezed | Immutable models | +| hive | Local storage | + +--- + +## Setup Steps + +1. `flutter create {{name}} --org com.{{bundle}}` +2. Update `pubspec.yaml` +3. `flutter pub get` +4. Run code generation: `dart run build_runner build` +5. `flutter run` + +--- + +## Best Practices + +- Feature-first folder structure +- Riverpod for state, React Query pattern for server state +- Freezed for immutable data classes +- Go Router for declarative navigation +- Material 3 theming diff --git a/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md b/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md new file mode 100644 index 00000000..b47d5b35 --- /dev/null +++ b/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md @@ -0,0 +1,90 @@ +--- +name: monorepo-turborepo +description: Turborepo monorepo template principles. pnpm workspaces, shared packages. +--- + +# Turborepo Monorepo Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Build System | Turborepo | +| Package Manager | pnpm | +| Apps | Next.js, Express | +| Packages | Shared UI, Config, Types | +| Language | TypeScript | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ apps/ +│ ā”œā”€ā”€ web/ # Next.js app +│ ā”œā”€ā”€ api/ # Express API +│ └── docs/ # Documentation +ā”œā”€ā”€ packages/ +│ ā”œā”€ā”€ ui/ # Shared components +│ ā”œā”€ā”€ config/ # ESLint, TS, Tailwind +│ ā”œā”€ā”€ types/ # Shared types +│ └── utils/ # Shared utilities +ā”œā”€ā”€ turbo.json +ā”œā”€ā”€ pnpm-workspace.yaml +└── package.json +``` + +--- + +## Key Concepts + +| Concept | Description | +|---------|-------------| +| Workspaces | pnpm-workspace.yaml | +| Pipeline | turbo.json task graph | +| Caching | Remote/local task caching | +| Dependencies | `workspace:*` protocol | + +--- + +## Turbo Pipeline + +| Task | Depends On | +|------|------------| +| build | ^build (dependencies first) | +| dev | cache: false, persistent | +| lint | ^build | +| test | ^build | + +--- + +## Setup Steps + +1. Create root directory +2. `pnpm init` +3. Create pnpm-workspace.yaml +4. Create turbo.json +5. Add apps and packages +6. `pnpm install` +7. `pnpm dev` + +--- + +## Common Commands + +| Command | Description | +|---------|-------------| +| `pnpm dev` | Run all apps | +| `pnpm build` | Build all | +| `pnpm --filter @name/web dev` | Run specific app | +| `pnpm --filter @name/web add axios` | Add dep to app | + +--- + +## Best Practices + +- Shared configs in packages/config +- Shared types in packages/types +- Internal packages with `workspace:*` +- Use Turbo remote caching for CI diff --git a/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md b/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md new file mode 100644 index 00000000..b86a930b --- /dev/null +++ b/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md @@ -0,0 +1,82 @@ +--- +name: nextjs-fullstack +description: Next.js full-stack template principles. App Router, Prisma, Tailwind. +--- + +# Next.js Full-Stack Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Next.js 14 (App Router) | +| Language | TypeScript | +| Database | PostgreSQL + Prisma | +| Styling | Tailwind CSS | +| Auth | Clerk (optional) | +| Validation | Zod | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ prisma/ +│ └── schema.prisma +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ app/ +│ │ ā”œā”€ā”€ layout.tsx +│ │ ā”œā”€ā”€ page.tsx +│ │ ā”œā”€ā”€ globals.css +│ │ └── api/ +│ ā”œā”€ā”€ components/ +│ │ └── ui/ +│ ā”œā”€ā”€ lib/ +│ │ ā”œā”€ā”€ db.ts # Prisma client +│ │ └── utils.ts +│ └── types/ +ā”œā”€ā”€ .env.example +└── package.json +``` + +--- + +## Key Concepts + +| Concept | Description | +|---------|-------------| +| Server Components | Default, fetch data | +| Server Actions | Form mutations | +| Route Handlers | API endpoints | +| Prisma | Type-safe ORM | + +--- + +## Environment Variables + +| Variable | Purpose | +|----------|---------| +| DATABASE_URL | Prisma connection | +| NEXT_PUBLIC_APP_URL | Public URL | + +--- + +## Setup Steps + +1. `npx create-next-app {{name}} --typescript --tailwind --app` +2. `npm install prisma @prisma/client zod` +3. `npx prisma init` +4. Configure schema +5. `npm run db:push` +6. `npm run dev` + +--- + +## Best Practices + +- Server Components by default +- Server Actions for mutations +- Prisma for type-safe DB +- Zod for validation +- Edge runtime where possible diff --git a/skills/app-builder/templates/nextjs-saas/TEMPLATE.md b/skills/app-builder/templates/nextjs-saas/TEMPLATE.md new file mode 100644 index 00000000..eb4e0986 --- /dev/null +++ b/skills/app-builder/templates/nextjs-saas/TEMPLATE.md @@ -0,0 +1,100 @@ +--- +name: nextjs-saas +description: Next.js SaaS template principles. Auth, payments, email. +--- + +# Next.js SaaS Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Next.js 14 (App Router) | +| Auth | NextAuth.js v5 | +| Payments | Stripe | +| Database | PostgreSQL + Prisma | +| Email | Resend | +| UI | Tailwind (ASK USER: shadcn/Headless UI/Custom?) | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ prisma/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ app/ +│ │ ā”œā”€ā”€ (auth)/ # Login, register +│ │ ā”œā”€ā”€ (dashboard)/ # Protected routes +│ │ ā”œā”€ā”€ (marketing)/ # Landing, pricing +│ │ └── api/ +│ │ ā”œā”€ā”€ auth/[...nextauth]/ +│ │ └── webhooks/stripe/ +│ ā”œā”€ā”€ components/ +│ │ ā”œā”€ā”€ auth/ +│ │ ā”œā”€ā”€ billing/ +│ │ └── dashboard/ +│ ā”œā”€ā”€ lib/ +│ │ ā”œā”€ā”€ auth.ts # NextAuth config +│ │ ā”œā”€ā”€ stripe.ts # Stripe client +│ │ └── email.ts # Resend client +│ └── config/ +│ └── subscriptions.ts +└── package.json +``` + +--- + +## SaaS Features + +| Feature | Implementation | +|---------|---------------| +| Auth | NextAuth + OAuth | +| Subscriptions | Stripe Checkout | +| Billing Portal | Stripe Portal | +| Webhooks | Stripe events | +| Email | Transactional via Resend | + +--- + +## Database Schema + +| Model | Fields | +|-------|--------| +| User | id, email, stripeCustomerId, subscriptionId | +| Account | OAuth provider data | +| Session | User sessions | + +--- + +## Environment Variables + +| Variable | Purpose | +|----------|---------| +| DATABASE_URL | Prisma | +| NEXTAUTH_SECRET | Auth | +| STRIPE_SECRET_KEY | Payments | +| STRIPE_WEBHOOK_SECRET | Webhooks | +| RESEND_API_KEY | Email | + +--- + +## Setup Steps + +1. `npx create-next-app {{name}} --typescript --tailwind --app` +2. Install: `npm install next-auth @auth/prisma-adapter stripe resend` +3. Setup Stripe products/prices +4. Configure environment +5. `npm run db:push` +6. `npm run stripe:listen` (webhooks) +7. `npm run dev` + +--- + +## Best Practices + +- Route groups for layout separation +- Stripe webhooks for subscription sync +- NextAuth with Prisma adapter +- Email templates with React Email diff --git a/skills/app-builder/templates/nextjs-static/TEMPLATE.md b/skills/app-builder/templates/nextjs-static/TEMPLATE.md new file mode 100644 index 00000000..4c7d1a3f --- /dev/null +++ b/skills/app-builder/templates/nextjs-static/TEMPLATE.md @@ -0,0 +1,106 @@ +--- +name: nextjs-static +description: Next.js static site template principles. Landing pages, portfolios, marketing. +--- + +# Next.js Static Site Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Next.js 14 (Static Export) | +| Language | TypeScript | +| Styling | Tailwind CSS | +| Animations | Framer Motion | +| Icons | Lucide React | +| SEO | Next SEO | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ src/ +│ ā”œā”€ā”€ app/ +│ │ ā”œā”€ā”€ layout.tsx +│ │ ā”œā”€ā”€ page.tsx # Landing +│ │ ā”œā”€ā”€ about/ +│ │ ā”œā”€ā”€ contact/ +│ │ └── blog/ +│ ā”œā”€ā”€ components/ +│ │ ā”œā”€ā”€ layout/ # Header, Footer +│ │ ā”œā”€ā”€ sections/ # Hero, Features, CTA +│ │ └── ui/ +│ └── lib/ +ā”œā”€ā”€ content/ # Markdown content +ā”œā”€ā”€ public/ +└── next.config.js +``` + +--- + +## Static Export Config + +```javascript +// next.config.js +const nextConfig = { + output: 'export', + images: { unoptimized: true }, + trailingSlash: true, +}; +``` + +--- + +## Landing Page Sections + +| Section | Purpose | +|---------|---------| +| Hero | Main headline, CTA | +| Features | Product benefits | +| Testimonials | Social proof | +| Pricing | Plans | +| CTA | Final conversion | + +--- + +## Animation Patterns + +| Pattern | Use | +|---------|-----| +| Fade up | Content entry | +| Stagger | List items | +| Scroll reveal | On viewport | +| Hover | Interactive feedback | + +--- + +## Setup Steps + +1. `npx create-next-app {{name}} --typescript --tailwind --app` +2. Install: `npm install framer-motion lucide-react next-seo` +3. Configure static export +4. Create sections +5. `npm run dev` + +--- + +## Deployment + +| Platform | Method | +|----------|--------| +| Vercel | Auto | +| Netlify | Auto | +| GitHub Pages | gh-pages branch | +| Any host | Upload `out` folder | + +--- + +## Best Practices + +- Static export for maximum performance +- Framer Motion for premium animations +- Responsive mobile-first design +- SEO metadata on every page diff --git a/skills/app-builder/templates/nuxt-app/TEMPLATE.md b/skills/app-builder/templates/nuxt-app/TEMPLATE.md new file mode 100644 index 00000000..ceecafe2 --- /dev/null +++ b/skills/app-builder/templates/nuxt-app/TEMPLATE.md @@ -0,0 +1,101 @@ +--- +name: nuxt-app +description: Nuxt 3 full-stack template. Vue 3, Pinia, Tailwind, Prisma. +--- + +# Nuxt 3 Full-Stack Template + +## Tech Stack + +| Component | Technology | +|-----------|------------| +| Framework | Nuxt 3 | +| Language | TypeScript | +| UI | Vue 3 (Composition API) | +| State | Pinia | +| Database | PostgreSQL + Prisma | +| Styling | Tailwind CSS | +| Validation | Zod | + +--- + +## Directory Structure + +``` +project-name/ +ā”œā”€ā”€ prisma/ +│ └── schema.prisma +ā”œā”€ā”€ server/ +│ ā”œā”€ā”€ api/ +│ │ └── [resource]/ +│ │ └── index.ts +│ └── utils/ +│ └── db.ts # Prisma client +ā”œā”€ā”€ composables/ +│ └── useAuth.ts +ā”œā”€ā”€ stores/ +│ └── user.ts # Pinia store +ā”œā”€ā”€ components/ +│ └── ui/ +ā”œā”€ā”€ pages/ +│ ā”œā”€ā”€ index.vue +│ └── [...slug].vue +ā”œā”€ā”€ layouts/ +│ └── default.vue +ā”œā”€ā”€ assets/ +│ └── css/ +│ └── main.css +ā”œā”€ā”€ .env.example +ā”œā”€ā”€ nuxt.config.ts +└── package.json +``` + +--- + +## Key Concepts + +| Concept | Description | +|---------|-------------| +| Auto-imports | Components, composables, utils | +| File-based routing | pages/ → routes | +| Server Routes | server/api/ → API endpoints | +| Composables | Reusable reactive logic | +| Pinia | State management | + +--- + +## Environment Variables + +| Variable | Purpose | +|----------|---------| +| DATABASE_URL | Prisma connection | +| NUXT_PUBLIC_APP_URL | Public URL | + +--- + +## Setup Steps + +1. `npx nuxi@latest init {{name}}` +2. `cd {{name}}` +3. `npm install @pinia/nuxt @prisma/client prisma zod` +4. `npm install -D @nuxtjs/tailwindcss` +5. Add modules to `nuxt.config.ts`: + ```ts + modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'] + ``` +6. `npx prisma init` +7. Configure schema +8. `npx prisma db push` +9. `npm run dev` + +--- + +## Best Practices + +- Use `