Portrait of Kinan Abu Ayyash

Work Environment

Tools and workflows that support my frontend work

This page lists the workstation setup and the tools I use across implementation, source control, design review, project tracking, testing, performance optimization, and AI-assisted code review.

Hardware & OS

Workstation

  • Lenovo Legion Pro 5 (2025) NEW AI-Powered Gaming PC 14Gen Intel Core i9 14900HX 24-Cores

    A laptop used as the primary development machine for local builds, editors, browsers, and concurrent frontend engineering workloads.

  • LG UltraGear 34G600A 34″ 2K

    An ultrawide 34-inch 2K display used for multi-pane coding, design review, documentation, and parallel application windows.

  • Ubuntu

    The Linux environment I use for development tools, commands, package management, and project workflows.

Software toolkit

Editors and Development

  • Cursor

    My primary AI-assisted code editor for implementation, refactoring, code exploration, and working across frontend repositories.

  • Visual Studio Code

    A code editor used for general-purpose editing, extensions, and lightweight project work.

  • Node.js

    Used to run frontend tooling, package managers, development servers, build processes, and the Vue and Nuxt ecosystem.

Source Control

  • Git

    Used for branching, commits, local history, and organized change management.

  • GitHub

    Used for private repositories, pull requests, issue tracking, code history, and collaboration.

Design

  • Figma

    Used to review designs, inspect interface details, understand responsive layouts, extract design values, and transform approved interfaces into code.

Delivery and Collaboration

  • ClickUp

    Used to follow assigned tasks, deadlines, delivery priorities, and project progress.

  • Toggl

    Used to track work time across projects and tasks.

  • Slack

    Used for team communication, project discussions, and implementation follow-up.

  • WhatsApp

    Used for direct operational communication and fast coordination when required.

Quality and Testing

  • Lighthouse

    Used to review performance, accessibility, best practices, and SEO.

  • Google PageSpeed Insights

    Used to evaluate loading performance and identify frontend optimization opportunities.

  • GTmetrix

    Used as an additional reference for loading behavior and performance review.

  • ESLint

    Used to maintain code consistency and detect common implementation problems.

  • TypeScript Checks

    Used to identify type errors and improve implementation reliability.

  • Manual Testing

    Used to review responsive behavior, visual implementation, forms, interactions, devices, browsers, and screen sizes.

AI-Assisted Workflow

  • Cursor

    Used to support implementation, refactoring, repository exploration, and faster technical problem solving.

  • Claude Code

    An AI coding agent used for repository-aware assistance during implementation and review tasks.

  • Codex

    An AI coding agent used for repository-aware implementation support and coding assistance.

  • ChatGPT

    A general-purpose AI assistant used for drafting, research support, and problem exploration.

  • CodeRabbit

    Used as an additional code-review layer for pull requests.

    AI recommendations are reviewed before implementation rather than being applied automatically.