Normal view
Create your own competency matrix
John Doe Frontend Developer Personal Competency & Skills Matrix
Category
L1
L2
L3
L4
L5
Technical Skills
Frontend Development
Done
Core Technologies: Build simple web applications using modern frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt, etc.), write semantic HTML5 and responsive CSS, understand modern JavaScript (ES6+) fundamentals and TypeScript basics
Done
Development Workflow: Use version control (Git) for daily work, follow existing code patterns and project structure, deploy applications to basic hosting environments (Vercel, Netlify, GitHub Pages), understand environment variables
Done
Component Development: Create reusable UI components following design specifications, implement basic forms with client-side validation, fetch and display data from REST APIs, handle loading and error states
Done
Debugging & Tools: Use browser developer tools (Chrome DevTools, Firefox DevTools) for debugging, understand and fix console errors, test applications across different browsers, use React DevTools or Vue DevTools when applicable
Advanced
Code Quality: Write clean, readable code following team conventions, understand basic TypeScript types and interfaces, follow accessibility (a11y) best practices, implement basic security measures (XSS prevention)
Done
Modern CSS: Use modern CSS features (Flexbox, Grid, custom properties), implement responsive designs with mobile-first approach, understand CSS specificity and cascade, use CSS preprocessors or modern CSS-in-JS when needed
Done
AI-Assisted Learning: Use AI tools (e.g., ChatGPT, GitHub Copilot, Cursor) to learn frontend concepts, understand code examples, and get explanations for unfamiliar patterns, while recognizing AI outputs need verification
Advanced
Advanced Development: Build medium-complexity applications with routing and state management, work with REST or GraphQL APIs (at least one), use modern build tools (Vite, Turbopack, or Webpack) and configure build pipelines, handle advanced Git workflows including rebasing, conflict resolution, and managing commit history
Done
Rendering Strategies: Understand different rendering approaches (CSR, SSR, SSG, ISR), implement Server-Side Rendering or Static Site Generation when appropriate, understand hydration concepts, use framework-specific rendering features (Next.js, Nuxt, SvelteKit)
Early
State Management: Implement state management solutions (Context API, Pinia, NgRx, Zustand, Jotai), understand when to use local vs global state, manage server state with libraries (React Query, SWR, Apollo), handle state persistence
Early
Testing & Quality: Write unit and integration tests using testing frameworks (Jest, Vitest, Testing Library), create E2E test scenarios (Playwright, Cypress), configure linting (ESLint) and formatting (Prettier) tools, ensure cross-device and cross-browser compatibility
Performance Basics: Optimize component rendering and prevent unnecessary re-renders, implement code-splitting and lazy loading, measure and improve Core Web Vitals (LCP, FID, CLS), analyze and optimize bundle sizes using tools (webpack-bundle-analyzer)
Early
Modern CSS & Styling: Use modern CSS features (container queries, CSS nesting, :has() selector), work with CSS preprocessors (SASS, LESS) or CSS-in-JS solutions, use modern CSS frameworks (Tailwind CSS, UnoCSS), implement responsive designs with modern layout techniques (Grid, Flexbox), work with design systems and component libraries
Advanced
Accessibility: Implement WCAG 2.1 Level AA compliance, use semantic HTML and ARIA attributes correctly, ensure keyboard navigation, test with screen readers, provide proper focus management
Done
Problem Solving & Security: Debug complex network and state issues, fix TypeScript type errors, implement robust error handling and loading states, understand and prevent common web vulnerabilities (XSS, CSRF, HTML injection, clickjacking), implement Content Security Policy (CSP)
Modern Web APIs: Use modern browser APIs (Fetch API, Intersection Observer, Web Workers, Service Workers), implement Progressive Web App (PWA) features, use Web APIs for enhanced user experience
Knowledge Sharing: Help junior developers with frontend concepts and code reviews, share technical knowledge within the team, document code and patterns
AI Tool Usage: Use AI coding assistants for code generation, refactoring, and basic code review, leverage AI for debugging assistance and test generation, understand when to use AI tools vs. manual coding, verify AI-generated code for correctness and security
Architecture Understanding: Design scalable frontend architectures, understand full application structure from routing to state management, make informed technology and pattern choices, apply advanced Git practices including branching strategies, understand JavaScript event loop, call stack, and asynchronous execution
Early
Advanced Rendering: Master different rendering strategies (SSR, SSG, ISR, streaming SSR), implement framework-specific rendering optimizations, understand hydration and partial hydration, optimize for SEO and performance, use edge computing when appropriate
Performance Optimization: Define and enforce performance budgets, implement advanced optimization techniques (virtual scrolling, image optimization, resource hints), profile and optimize rendering performance using DevTools, leverage modern build tools (Vite, Turbopack) for faster builds, monitor Core Web Vitals in production
State Management Architecture: Design state management architecture for complex applications, choose appropriate state management solutions, implement state normalization patterns, handle server state synchronization, optimize state updates for performance
TypeScript Mastery: Use advanced TypeScript features (generics, utility types, conditional types), create type-safe component APIs, implement type guards and assertions, leverage TypeScript for better developer experience and maintainability
Quality & Security Leadership: Establish comprehensive testing strategies (unit, integration, E2E, visual regression), conduct accessibility audits and ensure WCAG compliance, integrate frontend with complex backend architectures, actively prevent security vulnerabilities (XSS, CSRF, injection) through code reviews and security measures, implement security headers and policies
System Design: Build and maintain design systems, create reusable component libraries with proper documentation, establish UI patterns and development standards for the team, ensure design system consistency across applications
Modern Web Technologies: Implement Progressive Web Apps (PWA) with offline support, use Web Workers for performance, implement Service Workers for caching strategies, leverage modern Web APIs for enhanced functionality
Technical Leadership: Lead feature development from requirements to production, evaluate and adopt new tools and frameworks, balance technical debt with feature delivery, make architectural decisions
Technical Mentorship: Mentor team members on frontend architecture and best practices, conduct technical workshops, guide junior developers in complex problem-solving, establish learning paths
AI Tool Mastery & Critical Evaluation: Use AI tools strategically for architecture design, code review, and complex problem-solving, critically evaluate AI suggestions recognizing they may not always render true solutions, challenge AI outputs when they conflict with best practices or security requirements, mentor team on effective AI tool usage and limitations
Enterprise Architecture: Design frontend architecture for large-scale applications used by multiple teams, define global UI frameworks and technical standards across the organization, interpret and create architecture diagrams (e.g., C4 model), leverage Git hooks and automation in development workflows, implement monorepo strategies when appropriate
Cross-Team Leadership: Lead major frontend initiatives affecting multiple teams, review and approve architectural proposals, resolve integration issues across different systems, establish cross-team communication and collaboration patterns
Platform Evolution: Drive frontend platform evolution, lead framework migrations and technology upgrades, establish comprehensive testing and deployment strategies, evaluate and adopt emerging technologies (React Server Components, Vue 3 Composition API, Angular Signals, etc.)
Performance Excellence: Establish performance as core requirement, implement advanced performance monitoring and optimization, lead performance initiatives across teams, ensure applications meet Core Web Vitals targets, optimize for mobile and low-end devices
Innovation & Security: Pioneer new frontend approaches and technologies, establish security standards and practices, lead prototyping of experimental features, understand web security mechanisms (Same-Origin Policy, CORS, CSP, Subresource Integrity), handle authentication vs authorization and cookies securely, apply best practices for sensitive data on client side, implement security-first development practices
Accessibility Leadership: Establish accessibility as organizational standard, ensure WCAG 2.1 Level AA compliance across all applications, lead accessibility initiatives, train teams on inclusive design practices, integrate accessibility into development workflow
Strategic Planning: Align frontend roadmap with product and business goals, represent frontend in executive planning, influence technology decisions across product lines, make strategic framework and tooling decisions
AI Strategy & Critical Thinking: Establish AI tool usage standards and best practices across teams, evaluate AI tool effectiveness and ROI, challenge AI-generated solutions when they introduce technical debt or security risks, use AI as a perspective tool while maintaining independent technical judgment, navigate complex scenarios where AI provides partial or misleading guidance
Organizational Vision: Define company-wide frontend strategy and technology direction, set standards for all frontend development across the organization, establish frontend engineering as strategic capability, influence technology roadmap at C-suite level
Cross-Product Leadership: Ensure frontend consistency and quality across all products, drive adoption of shared libraries and design languages, make decisions on technology investments, establish frontend platform as competitive advantage
Technical Excellence: Solve the most complex frontend challenges at organizational scale, establish performance and quality standards, lead major architectural transformations, pioneer new frontend technologies and patterns, ensure technical excellence across all frontend initiatives
External Influence & Security: Represent frontend engineering at executive level, influence industry through external contributions (open source, conferences, publications), build relationships with technology partners, ensure adherence to accessibility and SEO best practices organization-wide, continuously update knowledge on web security (OWASP guidelines), identify and address security weaknesses in frontend architecture, design features securely from the outset, establish security as non-negotiable requirement
Innovation Leadership: Drive innovation in frontend development practices, evaluate and adopt cutting-edge technologies, establish research and development initiatives, shape future of frontend development in organization, balance innovation with stability and maintainability
AI Leadership & Organizational Strategy: Define organization-wide AI tool adoption strategy and governance, make strategic decisions on AI tool investments and partnerships, critically evaluate AI outputs in high-stakes architectural decisions, recognize when AI provides valuable perspectives despite incomplete accuracy, establish frameworks for validating AI-generated solutions, balance AI efficiency gains with technical excellence and security requirements
