Restructure skill to follow Progressive Disclosure Architecture: Structure Changes: - Move Python scripts to scripts/ directory - Move sample JSON files to assets/ directory - Create references/ directory with extracted content - Remove redundant HOW_TO_USE.md and README.md New Reference Files: - references/metrics.md: Detailed scoring algorithms and formulas - references/examples.md: Concrete input/output examples - references/workflows.md: Step-by-step evaluation workflows SKILL.md Improvements: - Reduced from 430 lines to ~180 lines - Added table of contents - Added trigger phrases in description - Consistent imperative voice - Points to references for details Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alireza Rezvani
GitHub
383
engineering-team/tech-stack-evaluator/references/examples.md
Normal file
383
engineering-team/tech-stack-evaluator/references/examples.md
Normal file
@@ -0,0 +1,383 @@
|
||||
# Technology Evaluation Examples
|
||||
|
||||
Concrete examples showing input formats and expected outputs.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Quick Comparison Example](#quick-comparison-example)
|
||||
- [TCO Analysis Example](#tco-analysis-example)
|
||||
- [Ecosystem Analysis Example](#ecosystem-analysis-example)
|
||||
- [Migration Assessment Example](#migration-assessment-example)
|
||||
- [Multi-Technology Comparison](#multi-technology-comparison)
|
||||
|
||||
---
|
||||
|
||||
## Quick Comparison Example
|
||||
|
||||
### Input (Text Format)
|
||||
|
||||
```
|
||||
Compare React vs Vue for building a SaaS dashboard.
|
||||
Focus on: developer productivity, ecosystem maturity, performance.
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
```
|
||||
TECHNOLOGY COMPARISON: React vs Vue for SaaS Dashboard
|
||||
=======================================================
|
||||
|
||||
RECOMMENDATION: React
|
||||
Confidence: 78% (Medium-High)
|
||||
|
||||
COMPARISON MATRIX
|
||||
-----------------
|
||||
| Category | Weight | React | Vue |
|
||||
|----------------------|--------|-------|------|
|
||||
| Performance | 15% | 82.0 | 85.0 |
|
||||
| Scalability | 15% | 88.0 | 80.0 |
|
||||
| Developer Experience | 20% | 85.0 | 90.0 |
|
||||
| Ecosystem | 15% | 92.0 | 78.0 |
|
||||
| Learning Curve | 10% | 70.0 | 85.0 |
|
||||
| Documentation | 10% | 88.0 | 82.0 |
|
||||
| Community Support | 10% | 90.0 | 75.0 |
|
||||
| Enterprise Readiness | 5% | 85.0 | 72.0 |
|
||||
|----------------------|--------|-------|------|
|
||||
| WEIGHTED TOTAL | 100% | 85.2 | 81.1 |
|
||||
|
||||
KEY DECISION FACTORS
|
||||
--------------------
|
||||
1. Ecosystem (15%): React leads with 92.0 - larger npm ecosystem
|
||||
2. Developer Experience (20%): Vue leads with 90.0 - gentler learning curve
|
||||
3. Community Support (10%): React leads with 90.0 - more Stack Overflow resources
|
||||
|
||||
PROS/CONS SUMMARY
|
||||
-----------------
|
||||
React:
|
||||
✓ Excellent ecosystem (92.0/100)
|
||||
✓ Strong community support (90.0/100)
|
||||
✓ Excellent scalability (88.0/100)
|
||||
✗ Steeper learning curve (70.0/100)
|
||||
|
||||
Vue:
|
||||
✓ Excellent developer experience (90.0/100)
|
||||
✓ Good performance (85.0/100)
|
||||
✓ Easier learning curve (85.0/100)
|
||||
✗ Smaller enterprise presence (72.0/100)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TCO Analysis Example
|
||||
|
||||
### Input (JSON Format)
|
||||
|
||||
```json
|
||||
{
|
||||
"technology": "Next.js on Vercel",
|
||||
"team_size": 8,
|
||||
"timeline_years": 5,
|
||||
"initial_costs": {
|
||||
"licensing": 0,
|
||||
"training_hours_per_dev": 24,
|
||||
"developer_hourly_rate": 85,
|
||||
"migration": 15000,
|
||||
"setup": 5000
|
||||
},
|
||||
"operational_costs": {
|
||||
"monthly_hosting": 2500,
|
||||
"annual_support": 0,
|
||||
"maintenance_hours_per_dev_monthly": 16
|
||||
},
|
||||
"scaling_params": {
|
||||
"initial_users": 5000,
|
||||
"annual_growth_rate": 0.40,
|
||||
"initial_servers": 3,
|
||||
"cost_per_server_monthly": 150
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
```
|
||||
TCO ANALYSIS: Next.js on Vercel (5-Year Projection)
|
||||
====================================================
|
||||
|
||||
EXECUTIVE SUMMARY
|
||||
-----------------
|
||||
Total TCO: $1,247,320
|
||||
Net TCO (after productivity gains): $987,320
|
||||
Average Yearly Cost: $249,464
|
||||
|
||||
INITIAL COSTS (One-Time)
|
||||
------------------------
|
||||
| Component | Cost |
|
||||
|----------------|-----------|
|
||||
| Licensing | $0 |
|
||||
| Training | $16,820 |
|
||||
| Migration | $15,000 |
|
||||
| Setup | $5,000 |
|
||||
|----------------|-----------|
|
||||
| TOTAL INITIAL | $36,820 |
|
||||
|
||||
OPERATIONAL COSTS (Per Year)
|
||||
----------------------------
|
||||
| Year | Hosting | Maintenance | Total |
|
||||
|------|----------|-------------|-----------|
|
||||
| 1 | $30,000 | $130,560 | $160,560 |
|
||||
| 2 | $42,000 | $130,560 | $172,560 |
|
||||
| 3 | $58,800 | $130,560 | $189,360 |
|
||||
| 4 | $82,320 | $130,560 | $212,880 |
|
||||
| 5 | $115,248 | $130,560 | $245,808 |
|
||||
|
||||
SCALING ANALYSIS
|
||||
----------------
|
||||
User Projections: 5,000 → 7,000 → 9,800 → 13,720 → 19,208
|
||||
Cost per User: $32.11 → $24.65 → $19.32 → $15.52 → $12.79
|
||||
Scaling Efficiency: Excellent - economies of scale achieved
|
||||
|
||||
KEY COST DRIVERS
|
||||
----------------
|
||||
1. Developer maintenance time ($652,800 over 5 years)
|
||||
2. Infrastructure/hosting ($328,368 over 5 years)
|
||||
|
||||
OPTIMIZATION OPPORTUNITIES
|
||||
--------------------------
|
||||
• Consider automation to reduce maintenance hours
|
||||
• Evaluate reserved capacity pricing for hosting
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ecosystem Analysis Example
|
||||
|
||||
### Input
|
||||
|
||||
```yaml
|
||||
technology: "Svelte"
|
||||
github:
|
||||
stars: 78000
|
||||
forks: 4100
|
||||
contributors: 680
|
||||
commits_last_month: 45
|
||||
avg_issue_response_hours: 36
|
||||
issue_resolution_rate: 0.72
|
||||
releases_per_year: 8
|
||||
active_maintainers: 5
|
||||
npm:
|
||||
weekly_downloads: 420000
|
||||
version: "4.2.8"
|
||||
dependencies_count: 0
|
||||
days_since_last_publish: 21
|
||||
community:
|
||||
stackoverflow_questions: 8500
|
||||
job_postings: 1200
|
||||
tutorials_count: 350
|
||||
forum_members: 25000
|
||||
corporate_backing:
|
||||
type: "community_led"
|
||||
funding_millions: 0
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
```
|
||||
ECOSYSTEM ANALYSIS: Svelte
|
||||
==========================
|
||||
|
||||
OVERALL HEALTH SCORE: 71.5/100
|
||||
|
||||
HEALTH SCORE BREAKDOWN
|
||||
----------------------
|
||||
| Category | Score | Assessment |
|
||||
|--------------------|-------|-------------------|
|
||||
| GitHub Health | 78.0 | Strong |
|
||||
| npm Health | 72.0 | Good |
|
||||
| Community Health | 58.0 | Moderate |
|
||||
| Corporate Backing | 40.0 | Community-led |
|
||||
| Maintenance Health | 75.0 | Active |
|
||||
|
||||
VIABILITY ASSESSMENT
|
||||
--------------------
|
||||
Overall: Good - Solid viability with minor concerns
|
||||
Risk Level: Low-Medium
|
||||
|
||||
Strengths:
|
||||
• Strong GitHub presence with active community
|
||||
• Active maintenance with responsive issue resolution
|
||||
• High npm adoption with stable releases
|
||||
|
||||
Risks:
|
||||
• Weak corporate backing - sustainability concerns
|
||||
• Smaller community - limited enterprise resources
|
||||
|
||||
RECOMMENDATION
|
||||
--------------
|
||||
Suitable for adoption - monitor corporate backing situation.
|
||||
Consider alternative with stronger backing for mission-critical enterprise apps.
|
||||
|
||||
KEY METRICS
|
||||
-----------
|
||||
GitHub: 78,000 stars, 680 contributors, 45 commits/month
|
||||
npm: 420,000 weekly downloads, v4.2.8
|
||||
Community: 8,500 SO questions, 1,200 job postings
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Migration Assessment Example
|
||||
|
||||
### Input
|
||||
|
||||
```
|
||||
Assess migration from Angular.js (1.x) to React.
|
||||
Application: 50,000 lines of code, 200 components.
|
||||
Team: 6 developers, 2 have React experience.
|
||||
Timeline: Need completion within 8 months.
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
```
|
||||
MIGRATION ASSESSMENT: Angular.js 1.x → React
|
||||
=============================================
|
||||
|
||||
COMPLEXITY SCORE: 7.8/10 (High)
|
||||
|
||||
COMPLEXITY BREAKDOWN
|
||||
--------------------
|
||||
| Factor | Score | Impact |
|
||||
|---------------------|-------|-------------|
|
||||
| Code Changes | 8/10 | 50K LOC |
|
||||
| Architecture Impact | 9/10 | Complete |
|
||||
| Data Migration | 5/10 | State only |
|
||||
| Downtime Risk | 6/10 | Mitigatable |
|
||||
|
||||
EFFORT ESTIMATION
|
||||
-----------------
|
||||
| Phase | Hours | Duration |
|
||||
|--------------------------|--------|----------|
|
||||
| Planning & Prototyping | 240 | 3 weeks |
|
||||
| Core Migration | 2,400 | 16 weeks |
|
||||
| Testing & Validation | 480 | 5 weeks |
|
||||
| Deployment & Monitoring | 160 | 2 weeks |
|
||||
|--------------------------|--------|----------|
|
||||
| TOTAL | 3,280 | 26 weeks |
|
||||
|
||||
Timeline Assessment: 26 weeks exceeds 8-month target (32 weeks)
|
||||
Recommendation: Feasible with buffer
|
||||
|
||||
RISK ASSESSMENT
|
||||
---------------
|
||||
Technical Risks:
|
||||
• High - Two-way binding to unidirectional data flow
|
||||
• Medium - Dependency injection to hooks/context
|
||||
• Medium - Performance regression during transition
|
||||
|
||||
Business Risks:
|
||||
• Medium - Feature freeze during migration
|
||||
• Low - Customer impact with phased approach
|
||||
|
||||
Team Risks:
|
||||
• High - 4 of 6 developers need React training
|
||||
• Medium - Learning curve affects velocity initially
|
||||
|
||||
MIGRATION STRATEGY
|
||||
------------------
|
||||
Recommended Approach: Strangler Fig Pattern
|
||||
|
||||
Phase 1 (Weeks 1-8): Strangler setup
|
||||
• Create React shell application
|
||||
• Set up micro-frontend routing
|
||||
• Migrate shared utilities
|
||||
|
||||
Phase 2 (Weeks 9-18): Component migration
|
||||
• Migrate components by feature area
|
||||
• Maintain Angular.js for untouched areas
|
||||
• Continuous integration testing
|
||||
|
||||
Phase 3 (Weeks 19-24): Completion
|
||||
• Migrate remaining components
|
||||
• Remove Angular.js dependencies
|
||||
• Performance optimization
|
||||
|
||||
Phase 4 (Weeks 25-26): Stabilization
|
||||
• Production deployment
|
||||
• Monitoring and fixes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Multi-Technology Comparison
|
||||
|
||||
### Input
|
||||
|
||||
```
|
||||
Compare: React, Vue, Svelte, Angular for enterprise SaaS.
|
||||
Use case: Large team (20+ developers), complex state management.
|
||||
Generate comprehensive decision matrix.
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
```
|
||||
MULTI-TECHNOLOGY COMPARISON: Enterprise SaaS Platform
|
||||
======================================================
|
||||
|
||||
RECOMMENDATION: React
|
||||
Confidence: 72% (Medium)
|
||||
Runner-up: Angular (close second for enterprise)
|
||||
|
||||
DECISION MATRIX
|
||||
---------------
|
||||
| Category | Wt | React | Vue | Svelte | Angular |
|
||||
|----------------------|------|-------|------|--------|---------|
|
||||
| Performance | 15% | 82 | 85 | 95 | 78 |
|
||||
| Scalability | 15% | 90 | 82 | 75 | 92 |
|
||||
| Developer Experience | 20% | 85 | 90 | 88 | 75 |
|
||||
| Ecosystem | 15% | 95 | 80 | 65 | 88 |
|
||||
| Learning Curve | 10% | 70 | 85 | 80 | 60 |
|
||||
| Documentation | 10% | 90 | 85 | 75 | 92 |
|
||||
| Community Support | 10% | 92 | 78 | 55 | 85 |
|
||||
| Enterprise Readiness | 5% | 88 | 72 | 50 | 95 |
|
||||
|----------------------|------|-------|------|--------|---------|
|
||||
| WEIGHTED TOTAL | 100% | 86.3 | 83.1 | 76.2 | 83.0 |
|
||||
|
||||
FRAMEWORK PROFILES
|
||||
------------------
|
||||
React: Best for large ecosystem, hiring pool
|
||||
Angular: Best for enterprise structure, TypeScript-first
|
||||
Vue: Best for developer experience, gradual adoption
|
||||
Svelte: Best for performance, smaller bundles
|
||||
|
||||
RECOMMENDATION RATIONALE
|
||||
------------------------
|
||||
For 20+ developer team with complex state management:
|
||||
|
||||
1. React (Recommended)
|
||||
• Largest talent pool for hiring
|
||||
• Extensive enterprise libraries (Redux, React Query)
|
||||
• Meta backing ensures long-term support
|
||||
• Most Stack Overflow resources
|
||||
|
||||
2. Angular (Strong Alternative)
|
||||
• Built-in structure for large teams
|
||||
• TypeScript-first reduces bugs
|
||||
• Comprehensive CLI and tooling
|
||||
• Google enterprise backing
|
||||
|
||||
3. Vue (Consider for DX)
|
||||
• Excellent documentation
|
||||
• Easier onboarding
|
||||
• Growing enterprise adoption
|
||||
• Consider if DX is top priority
|
||||
|
||||
4. Svelte (Not Recommended for This Use Case)
|
||||
• Smaller ecosystem for enterprise
|
||||
• Limited hiring pool
|
||||
• State management options less mature
|
||||
• Better for smaller teams/projects
|
||||
```
|
||||
Reference in New Issue
Block a user