engineer #1966
Description
import React, { useState } from 'react';
import { ChevronDown, ChevronUp, Target, Award, Shield, TrendingUp, Users } from 'lucide-react';
const CompetencyFramework = () => {
const [expandedLever, setExpandedLever] = useState(null);
const [selectedLevel, setSelectedLevel] = useState('all');
const levels = [
{ id: 'ic3-4', label: 'IC3-4: Foundational', color: 'bg-blue-100 text-blue-800' },
{ id: 'ic5', label: 'IC5: Senior', color: 'bg-purple-100 text-purple-800' },
{ id: 'ic6', label: 'IC6+: Staff/Principal', color: 'bg-amber-100 text-amber-800' }
];
const levers = [
{
id: 1,
name: 'Domain Expertise',
icon: Target,
description: 'Deep technical knowledge and mastery within specific domains',
levels: {
'ic3-4': {
title: 'Foundational Domain Knowledge',
capabilities: [
'Solves well-scoped problems in one domain (e.g., iOS, auth, Kafka)',
'Follows established patterns and best practices',
'Asks clarifying questions when facing ambiguity',
'Learns domain-specific tools and frameworks efficiently'
],
evidence: [
'Delivers features in assigned domain with minimal rework',
'Contributes to domain documentation',
'Participates in code reviews within domain'
]
},
'ic5': {
title: 'Domain Ownership',
capabilities: [
'Owns a critical subsystem end-to-end',
'Anticipates failure modes and edge cases proactively',
'Documents tribal knowledge and creates runbooks',
'Serves as go-to expert for domain-specific questions',
'Evaluates new technologies for domain fit'
],
evidence: [
'Reduces domain-related incidents by >30%',
'Maintains <2hr mean time to recovery for owned systems',
'Onboards new engineers to domain in <2 weeks'
]
},
'ic6': {
title: 'Strategic Domain Leadership',
capabilities: [
'Sets technical direction for domain org-wide',
'Defines deprecation and replacement strategies',
'Consulted on cross-company risk (e.g., "Is this crypto lib safe at scale?")',
'Represents domain in architecture review boards',
'Publishes thought leadership internally and externally'
],
evidence: [
'Led domain migration affecting >5 teams with zero incidents',
'Created standards adopted across engineering org',
'Prevented critical vulnerabilities through proactive audits'
]
}
}
},
{
id: 2,
name: 'Innovation',
icon: TrendingUp,
description: 'Creating leverage through tools, abstractions, and process improvements',
levels: {
'ic3-4': {
title: 'Incremental Improvements',
capabilities: [
'Implements improvements from others' designs',
'Identifies inefficiencies in current workflows',
'Suggests pragmatic optimizations',
'Refactors code for clarity and maintainability'
],
evidence: [
'Reduced build time or test execution time',
'Improved code coverage in owned areas',
'Eliminated toil through automation of manual tasks'
]
},
'ic5': {
title: 'Proven Innovation',
capabilities: [
'Prototypes solutions that prove/disprove hypotheses in <2 weeks',
'Reduces team toil by ≥20% through tooling/automation',
'Drives adoption of better practices (testing, monitoring, deployment)',
'Balances innovation with stability and maintenance burden'
],
evidence: [
'Built internal tool used by ≥50% of engineers',
'Created abstraction that eliminated entire class of bugs',
'Prototype became production feature with clear ROI'
]
},
'ic6': {
title: 'Transformative Innovation',
capabilities: [
'Creates reusable abstractions/tools that lift productivity across ≥3 teams',
'Shifts org away from tech debt traps (e.g., legacy auth → zero-trust)',
'Identifies systemic inefficiencies and architects solutions',
'Balances innovation portfolio: 70% incremental, 20% breakthrough, 10% experimental'
],
evidence: [
'Platform/framework adopted company-wide (>100 engineers)',
'Eliminated entire oncall rotation through reliability improvements',
'Innovation reduced operational costs by >$500K annually'
]
}
}
},
{
id: 3,
name: 'Product Expertise',
icon: Award,
description: 'Understanding user needs and aligning technical decisions with business outcomes',
levels: {
'ic3-4': {
title: 'Feature Delivery',
capabilities: [
'Delivers features per spec with quality',
'Escalates ambiguity to PM or tech lead',
'Understands user stories and acceptance criteria',
'Asks "why" to understand feature context'
],
evidence: [
'Features ship on time with <10% rework',
'Proactively flags unclear requirements',
'Participates in sprint planning effectively'
]
},
'ic5': {
title: 'Product Partnership',
capabilities: [
'Partners with PM to scope MVPs and define success metrics',
'Flags over-engineering and suggests simpler alternatives',
'Balances tech debt vs. speed based on business context',
'Proposes technical solutions that unlock product opportunities',
'Uses data to validate assumptions and measure impact'
],
evidence: [
'Reduced feature scope by 40% while maintaining user value',
'Technical proposal enabled new revenue stream',
'A/B tests show measurable improvement in key metrics'
]
},
'ic6': {
title: 'Strategic Product Thinking',
capabilities: [
'Defines "what not to build" based on technical constraints',
'Aligns engineering trade-offs with business KPIs',
'Articulates risk/reward to executives (e.g., "We delay AI feature to harden infra—here's the risk math")',
'Shapes product roadmap through technical insight',
'Champions customer outcomes over feature shipping'
],
evidence: [
'Prevented $1M+ investment in technically infeasible direction',
'Technical architecture enabled 3x faster feature velocity',
'Product decisions directly attributed to technical guidance'
]
}
}
},
{
id: 4,
name: 'Project Leadership',
icon: Users,
description: 'Driving complex initiatives from ambiguity to successful delivery',
levels: {
'ic3-4': {
title: 'Task Execution',
capabilities: [
'Executes tasks in well-defined projects',
'Provides accurate status updates',
'Identifies blockers early and escalates appropriately',
'Collaborates effectively with team members'
],
evidence: [
'Completes assigned work within estimates',
'Minimal surprise delays or scope changes',
'Positive feedback from project stakeholders'
]
},
'ic5': {
title: 'Cross-Team Leadership',
capabilities: [
'Leads medium-sized cross-team projects (2-4 teams, 3-6 months)',
'Manages dependencies and coordinates timelines',
'Recovers from scope creep with clear prioritization',
'Runs effective kickoffs, retros, and status syncs',
'Creates project plans that others can execute against'
],
evidence: [
'Delivered project affecting ≥3 teams on time',
'Managed $200K+ budget or equivalent engineering time',
'Post-mortem shows clear decision rationale and learnings'
]
},
'ic6': {
title: 'Strategic Initiative Ownership',
capabilities: [
'Owns company-critical initiatives (>6mo, >$1M impact)',
'Navigates ambiguity with clear "decision logs"',
'Balances competing stakeholder priorities',
'Owns post-launch health: cost, incidents, adoption metrics',
'Builds coalition across engineering, product, business',
'Creates playbooks for future similar initiatives'
],
evidence: [
'Led initiative impacting >$5M in revenue or cost savings',
'Zero major incidents in first 90 days post-launch',
'Created reusable project framework used by 5+ teams',
'Executive-level visibility and stakeholder satisfaction'
]
}
}
},
{
id: 5,
name: 'Technical Leadership & Mentorship',
icon: Shield,
description: 'Multiplying impact through people, standards, and culture',
levels: {
'ic3-4': {
title: 'Individual Excellence',
capabilities: [
'Writes clean, well-tested, reviewed code',
'Learns from senior engineers and applies feedback',
'Asks thoughtful questions in design reviews',
'Contributes to team knowledge sharing'
],
evidence: [
'PRs approved with minimal iteration',
'Code quality metrics meet or exceed team standards',
'Demonstrates growth mindset and receptiveness to feedback'
]
},
'ic5': {
title: 'Team Multiplier',
capabilities: [
'Mentors 2-3 junior engineers effectively',
'Improves PR quality org-wide through reviews and feedback',
'Drives design review standards and ceremonies',
'Shares knowledge through docs, talks, and pairing',
'Raises the bar in interviews and hiring'
],
evidence: [
'Mentees promoted or show measurable skill growth',
'Code review feedback cited as valuable by >80% of team',
'Created onboarding materials used for all new hires',
'Interview calibration scores consistently high'
]
},
'ic6': {
title: 'Organizational Force Multiplier',
capabilities: [
'Multiplies engineering quality across multiple orgs',
'Creates playbooks (e.g., "secure AI deployment", "zero-trust migration")',
'Mentors other tech leads and managers',
'Sets bar for hiring and coding standards company-wide',
'Shapes engineering culture and values',
'Represents engineering externally (conferences, recruiting)'
],
evidence: [
'Engineering practices adopted by >5 teams',
'Mentored ≥3 engineers to senior+ levels',
'Hiring bar raised measurably (lower false positive rate)',
'Recognized externally as thought leader in domain'
]
}
}
},
{
id: 6,
name: 'Communication & Documentation',
icon: Shield,
description: 'Multiplying impact through clear, structured, and discoverable information',
levels: {
'ic3-4': {
title: 'Clear Individual Communication',
capabilities: [
'Responds to emails/Slack within business hours (4hr SLA)',
'Uses appropriate communication channels (urgent vs. async)',
'Documents decisions in ticket/PR comments',
'Writes clear commit messages and PR descriptions',
'Maintains organized inbox with <30 unread messages'
],
evidence: [
'No missed critical communications in last quarter',
'PRs have clear context without back-and-forth',
'Team members can understand your work without asking',
'Meeting notes captured and shared when applicable'
]
},
'ic5': {
title: 'Strategic Communication Practices',
capabilities: [
'Creates design docs with clear decision rationale',
'Maintains team documentation (runbooks, architecture diagrams)',
'Uses email folders/labels for project organization (similar to screenshot)',
'Sets up auto-archive rules (e.g., Trash: 90 days, Spam: 30 days)',
'Writes executive summaries for technical decisions',
'Manages stakeholder communication proactively'
],
evidence: [
'Design docs used as reference by 3+ teams',
'Zero "lost" critical emails due to organization system',
'Stakeholders cite your updates as model for clarity',
'Onboarding docs reduce new hire ramp time by >30%',
'Incident post-mortems become institutional knowledge'
]
},
'ic6': {
title: 'Organizational Communication Standards',
capabilities: [
'Defines communication standards for entire engineering org',
'Creates templates: RFCs, design docs, incident reports, decision logs',
'Establishes documentation tooling/workflows (Notion, Confluence, etc.)',
'Implements "write things down" culture with measurable adoption',
'Represents engineering externally with polished communication',
'Builds knowledge management systems that scale to 100+ engineers'
],
evidence: [
'RFC process adopted company-wide with >80% participation',
'Documentation discoverability improved (search success rate)',
'External blog posts/talks enhance company recruiting brand',
'Communication standards cited in new hire onboarding',
'Audit trail quality enables compliance certifications'
]
}
}
}
];
const guardrails = [
{
title: 'Security as Default',
description: 'No innovation counts if it weakens threat surface. Every project gets a "risk tag" (low/medium/high).',
questions: [
'Has threat modeling been completed?',
'Are security controls proportional to risk?',
'Have we documented the attack surface changes?'
]
},
{
title: 'Auditability',
description: 'Staff+ must document why—not just what. Decision logs > heroics.',
questions: [
'Can we reconstruct the decision rationale in 6 months?',
'Are trade-offs explicitly documented?',
'Is there a clear paper trail for compliance?'
]
},
{
title: 'Customer Harm Prevention',
description: 'Impact includes avoiding negative outcomes (e.g., blocking $10M fraud via infra design = huge impact).',
questions: [
'What could go wrong and what's the blast radius?',
'How do we detect and mitigate customer harm?',
'What's our rollback/kill-switch strategy?'
]
},
{
title: 'Sustainability > Speed',
description: 'Velocity without reliability is debt. Measure "time to restore" and "toil ratio."',
questions: [
'What's the maintenance burden of this solution?',
'Are we creating operational toil?',
'Can the team sustain this without burning out?'
]
}
];
const toggleLever = (id) => {
setExpandedLever(expandedLever === id ? null : id);
};
const LevelBadge = ({ level }) => {
const levelInfo = levels.find(l => l.id === level);
return (
<span className={inline-block px-3 py-1 rounded-full text-xs font-semibold ${levelInfo.color}}>
{levelInfo.label}
);
};
return (
{/* Header */}
Engineering Competency Framework
Impact-First Model: Built for teams that ship value, not just code
Impact = Business Outcome × Technical Excellence × Sustainable Velocity
One-off brilliance doesn't count. Consistent, leveraged contribution does.
{/* Level Filter */}
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
<h2 className="text-lg font-semibold text-slate-900 mb-3">Filter by Level</h2>
<div className="flex flex-wrap gap-2">
<button
onClick={() => setSelectedLevel('all')}
className={`px-4 py-2 rounded-lg font-medium transition ${
selectedLevel === 'all'
? 'bg-slate-900 text-white'
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
}`}
>
All Levels
</button>
{levels.map(level => (
<button
key={level.id}
onClick={() => setSelectedLevel(level.id)}
className={`px-4 py-2 rounded-lg font-medium transition ${
selectedLevel === level.id
? 'bg-slate-900 text-white'
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
}`}
>
{level.label}
</button>
))}
</div>
</div>
{/* Impact Levers */}
<div className="space-y-4 mb-6">
{levers.map(lever => {
const Icon = lever.icon;
const isExpanded = expandedLever === lever.id;
return (
<div key={lever.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
<button
onClick={() => toggleLever(lever.id)}
className="w-full p-6 flex items-center justify-between hover:bg-slate-50 transition"
>
<div className="flex items-center gap-4">
<div className="bg-slate-900 text-white p-3 rounded-lg">
<Icon size={24} />
</div>
<div className="text-left">
<h3 className="text-xl font-bold text-slate-900">{lever.name}</h3>
<p className="text-sm text-slate-600">{lever.description}</p>
</div>
</div>
{isExpanded ? <ChevronUp size={24} /> : <ChevronDown size={24} />}
</button>
{isExpanded && (
<div className="border-t border-slate-200">
{Object.entries(lever.levels)
.filter(([levelId]) => selectedLevel === 'all' || selectedLevel === levelId)
.map(([levelId, content]) => (
<div key={levelId} className="p-6 border-b border-slate-100 last:border-b-0">
<div className="flex items-center gap-3 mb-4">
<LevelBadge level={levelId} />
<h4 className="text-lg font-semibold text-slate-900">{content.title}</h4>
</div>
<div className="grid md:grid-cols-2 gap-6">
<div>
<h5 className="font-semibold text-slate-700 mb-2">Key Capabilities</h5>
<ul className="space-y-2">
{content.capabilities.map((cap, idx) => (
<li key={idx} className="flex items-start gap-2 text-sm text-slate-600">
<span className="text-slate-400 mt-1">•</span>
<span>{cap}</span>
</li>
))}
</ul>
</div>
<div>
<h5 className="font-semibold text-slate-700 mb-2">Evidence Examples</h5>
<ul className="space-y-2">
{content.evidence.map((ev, idx) => (
<li key={idx} className="flex items-start gap-2 text-sm text-slate-600">
<span className="text-green-500 mt-1">✓</span>
<span>{ev}</span>
</li>
))}
</ul>
</div>
</div>
</div>
))}
</div>
)}
</div>
);
})}
</div>
{/* Guardrails */}
<div className="bg-white rounded-lg shadow-lg p-8 mb-6">
<h2 className="text-2xl font-bold text-slate-900 mb-4">Built-In Guardrails</h2>
<p className="text-slate-600 mb-6">
For regulated, high-risk environments: security, fintech, AI, and crypto
</p>
<div className="grid md:grid-cols-2 gap-6">
{guardrails.map((guardrail, idx) => (
<div key={idx} className="border border-slate-200 rounded-lg p-5">
<h3 className="font-bold text-slate-900 mb-2">{guardrail.title}</h3>
<p className="text-sm text-slate-600 mb-3">{guardrail.description}</p>
<div className="space-y-1">
{guardrail.questions.map((q, qIdx) => (
<p key={qIdx} className="text-xs text-slate-500 flex items-start gap-2">
<span className="text-slate-400">→</span>
<span>{q}</span>
</p>
))}
</div>
</div>
))}
</div>
</div>
{/* How to Use */}
<div className="bg-slate-900 text-white rounded-lg shadow-lg p-8">
<h2 className="text-2xl font-bold mb-4">How to Use This Framework</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold mb-2">1. Hiring</h3>
<p className="text-sm text-slate-300">
Score candidates against levers—not just coding skill, but which impact archetype they amplify.
</p>
</div>
<div>
<h3 className="font-semibold mb-2">2. Promotions</h3>
<p className="text-sm text-slate-300">
Require evidence across ≥2 levers at senior levels (e.g., Staff = deep domain + project leadership).
</p>
</div>
<div>
<h3 className="font-semibold mb-2">3. Team Design</h3>
<p className="text-sm text-slate-300">
Ensure every squad has at least one "whisperer" (product), one "oracle" (domain), one "accelerator" (innovation).
</p>
</div>
<div>
<h3 className="font-semibold mb-2">4. Personal Development</h3>
<p className="text-sm text-slate-300">
Audit your last 12 months—how many levers did you pull? Where's your unique combination?
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default CompetencyFramework;