a10a4f2c4b
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>
384 lines
10 KiB
Markdown
384 lines
10 KiB
Markdown
# 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
|
|
```
|