How I craft and ship interfaces

Read approved Figma designs for interface fidelity and responsive states before writing production UI.

• Figma

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

Craft reusable components into pages and wire API-backed interfaces with clear task coordination.

• 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.

• 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.

Keep changes reviewable and traceable from issue through merge.

• Git

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

• GitHub

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

Catch consistency, type, and review issues before performance and delivery checks.

• ESLint

  Used to maintain code consistency and detect common implementation problems.

• TypeScript Checks

  Used to identify type errors and improve implementation reliability.

• CodeRabbit

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

• Manual Testing

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

Measure loading behavior and identify frontend optimization opportunities before handoff.

• 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.

Before handoff, I verify responsive behavior across breakpoints, check major browsers, confirm Arabic RTL and English LTR layouts, and do a final review of interactions, polish, and content readiness. Delivery is copy-led here — no fake tool logins or integration CTAs.

Use AI coding agents and assistants to move faster without skipping human validation.

• Cursor

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

• Codex

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

• Claude Code

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

• CodeRabbit

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

• ChatGPT

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

AI output is reviewed and validated before integration. Recommendations are not applied automatically.