Help your front-end team use AI well #13

Openvikashyap wants to merge 13 years of front-end work into your-team:main

team/ai-approach.md+2−2

1	−	Removed: Roll out an AI assistant and let it write the front-end.
2	−	Removed: Measure success by how much code it generates.
1	+	Added: Give the AI your context, your rules and a real review step.
2	+	Added: Measure success by what ships, and how well it holds up.

vikashyapleft a reviewAuthor

I'm Vikas, a Senior Software Engineer in Berlin. For 13 years I've shipped React, Next.js and TypeScript at Natuvion, Tenderize, Snubes and Ticketmaster.

Today I build the AI workflows my team uses every day, and I mentor other front-end teams on setting up the same: context the agent can trust, skills that encode your standards, and review that catches what the model misses.

Book a callkashyapvikas20@gmail.com

What I help teams with

Most teams have AI tools installed. Fewer have them set up to write code that belongs in their codebase. This is the work in between.

Give the agent context it can trust
Rules files, architecture notes and conventions that live in the repo, so generated code matches your patterns instead of the internet's average.
Turn your standards into skills and hooks
Reusable workflows for the work your team repeats: a pre-flight before new code, an audit before every PR, descriptions written from the diff.
Review AI output like a senior would
What models get wrong in front-end code: accessibility, state and effects, type holes, design-system drift. And how to catch it before a human reviewer has to.
Know when not to use it
Where AI saves a day, where it costs one, and how to keep the team's own judgement sharp while the tools do more of the typing.

What a good review catches

A typical piece of generated UI. The fix is small; seeing it every time is the skill. I help teams write that check into a skill, so the agent catches it before a person has to.

components/SaveButton.tsxExample

AI-generated code under review
1	export function SaveButton({ onSave }) {
2	return (
3	<div className="bg-[#2563eb] text-white p-2 rounded"
4	onClick={onSave}>
5	Save
6	</div>
7	)
8	}

vikashyapon lines 1 to 6

The model made a div a button. It can't take focus or respond to Enter, the hex colour skips our tokens, and there is no pending state.

Suggested change

export function SaveButton({ onSave, pending }: SaveButtonProps) {
  return (
    <Button onClick={onSave} disabled={pending}>
      {pending ? "Saving…" : "Save"}
    </Button>
  )
}

Ways to work together

Setup review
I read your repo and AI setup, then hand back a written list of fixes.
Ask about this
Team session
A working session on your codebase, not slides. Your team leaves with rules and skills in place.
Ask about this
Pairing
Ongoing sessions with one or two engineers who will carry the practice forward.
Ask about this

How I learned it: by doing it in production every day, and from engineers who were further along than me. You get what works now, not a slide deck.

Tooling I built and use

Skills that run inside my own AI coding workflow. They are the kind of thing I help teams build for their repo.

~/.claude/skills

lets-beginPre-flight before new code: finds the sibling files, shared components and API shapes that should govern the change.
pre-pr-bulletproofingAudits changed files for architecture drift, API-shape mismatches and review risks before the PR opens.
pr-description-generatorWrites a structured PR description from the actual diff.
understand-prSummarises someone else's PR in plain English and lists the questions worth asking the author.
comment-cleanupStrips obvious and stale comments from the branch, keeps the ones that carry intent.
create-followupCaptures what a reviewer deferred to 'later' so it does not disappear after merge.

Selected work

4 products shipped

natuvion/data-conversion-suite

Data Conversion Suite

Full-stack product work on Natuvion's DCS: nine integrated tools for secure enterprise data transformations to SAP S/4HANA, used by 1,000+ customers.

Next.js
React
TypeScript
Node.js

Visit

tenderize/staking-dapp

Tenderize dApp

Liquid staking front-end: real-time staking flows, wallet integration and on-chain data across Ethereum L2s.

Next.js
TypeScript
Wagmi
Viem
React Query

Visit

snubes/platform

Snubes Platform

Contact-centre outsourcing marketplace built as micro front-ends in a Lerna/NX monorepo, with hybrid SSR/CSR Next.js apps, a Storybook design system and GraphQL CMS content.

Next.js
Gatsby
TypeScript
GraphQL
Storybook

Visit

ticketmaster/3d-venues

Ticketmaster 3D Venues

Interactive 3D venue layouts with Three.js inside a high-traffic React SPA, with SEO-friendly page generation.

React
Three.js
Webpack
Python

Experience

Since 2013, newest first

Jun 2026 – Present · Berlin
Senior Software Engineer at Natuvion
Product development on the Data Conversion Suite, the platform behind secure enterprise data transformations to SAP S/4HANA.
- Enterprise UIs with Next.js, React and TypeScript
- Tooling for large-scale data migration and transformation workflows
- Building and using AI workflows in daily product work
- Next.js
- React
- TypeScript
- Node.js
- Tailwind CSS
Oct 2023 – Apr 2026 · Berlin
Front End Lead at Tenderize
Led user-facing flows and built the Node.js/PostgreSQL services behind them, aggregating on-chain and off-chain data.
- Staking flows with Next.js, React and TypeScript
- Smart-contract integration with viem, ethers and wagmi
- The Graph indexing for real-time rewards and analytics
- Strongly-typed SDKs for ecosystem partners
- Next.js
- TypeScript
- Node.js
- PostgreSQL
- Wagmi
- Viem
- The Graph
Jul 2018 – Sep 2023 · Berlin
Front End Lead Developer at Snubes
Architected hybrid SSR/CSR applications and led micro front-end development in a monorepo.
- Micro front-ends with Lerna and NX
- Design system in Storybook
- Testing strategy with Jest and Cypress
- GraphQL-driven CMS content
- React
- Next.js
- Gatsby
- TypeScript
- GraphQL
- Storybook
May 2017 – Jul 2018 · Gurgaon
Senior Frontend Developer at Ticketmaster
Interactive 3D web applications with Three.js inside React SPAs, plus Node.js and Express services.
- 3D venue layouts with Three.js
- SEO-friendly page generation with Python
- Ran sprint ceremonies for the team
- Three.js
- React
- Node.js
- Webpack
- Python
2013 – 2017 · India
- Jan 2015 – Apr 2017Frontend Developer at Jade Global, Noida. PWAs with offline support and real-time updates for Sapient's client Jato Flex Software.
- May 2014 – Jan 2015Frontend Developer at Tata Consultancy Services, Gurgaon. Responsive Angular.js SPA with rich data visualisation for McKinsey & Company.
- Jan 2013 – Apr 2014Frontend Developer at Grange Management Services, New Delhi. CMS websites with C#/ASP.NET and SQL Server, including XML and JSON web services.

Stack

What I work in day to day

Front-end
React · Next.js · TypeScript · JavaScript · HTML & CSS · Tailwind CSS
State & data
React Query · Redux · Zustand · RxJS · GraphQL
AI workflow
Claude Code · Skills & hooks · Review agents · Prompt design
Quality
Jest · Cypress · Storybook · Design systems
Web3
Wagmi · Viem · Ethers.js · The Graph · Solana Web3.js
Platform
Node.js · PostgreSQL · NX · Lerna · Webpack · Three.js

Off the keyboard

Kickboxing and Muay Thai, swimming, hiking and travel. Gaming, good coffee and too many gadgets.

Muay Thai
Travel
Training
Out and about

Ready to merge

Book a call about your team's AI setup, or about a senior front-end role. No conflicts with your main branch.

Book a callkashyapvikas20@gmail.com

Help your front-end team use AI well #13

What I help teams with

Give the agent context it can trust

Turn your standards into skills and hooks

Review AI output like a senior would

Know when not to use it

What a good review catches

Ways to work together

Tooling I built and use

Selected work

Data Conversion Suite

Tenderize dApp

Snubes Platform

Ticketmaster 3D Venues

Experience

Senior Software Engineer at Natuvion

Front End Lead at Tenderize

Front End Lead Developer at Snubes

Senior Frontend Developer at Ticketmaster

Stack

Off the keyboard

Ready to merge

Or leave a message