Title: Stop Writing "Fragile" Frontend: Why I Codified My Senior Standards for Vue & React

The Hook

We’ve all been there: a project starts clean, but six months later, it’s a graveyard of any types, inconsistent API patterns, and memory leaks from forgotten setInterval calls.

In the era of AI-driven development (Cursor, Copilot, Windsurf), the risk of "garbage in, garbage out" has never been higher. AI agents are only as good as the context you provide. To fight this, I built Promps—a modular repository of non-negotiable standards designed to serve as System Prompts for both humans and AI.

1. The Reactivity "Speed Trap" (Vue 3)

In my Vue standards, we move beyond basic setup to protect the reactivity tree:

• ** Data Handling:** We forbid .find() loops on large arrays in favor of Map and Set.
• The AlexOp Pattern: Composables must return stable objects and use toRefs to ensure destructuring doesn't kill reactivity.
• Resource Hygiene: Manual cleanup in onUnmounted for all timers, listeners, and AbortControllers is mandatory. Zero leaks allowed.

2. Modernizing the Hook Strategy (React 18/19)

React moves fast, and entropy follows. My standards embrace the future while keeping the core stable:

• The use() Hook: Declarative data fetching by unwrapping promises directly in the render cycle.
• Logic Extraction: If a component exceeds 50 lines of logic or uses more than two useEffect calls, it must be extracted into a custom hook.
• Behavioral Testing: We don't test implementation; we test what the user sees. If a user can't "see" it via an ARIA role, it doesn't exist in our test suite.

3. The Vite "Static Analysis" Gotcha

One of the most specific rules in this repo addresses Asset Management.
Many developers try to use dynamic paths like new URL(./assets/${folder}/${name}.svg). During a Vite build, this fails because Vite cannot statically analyze dynamic folder paths.
The Fix: We enforce a BaseSvg and BaseImage component strategy where only the filename is dynamic, ensuring 100% build-time reliability.

4. Tooling as the Enforcer

Standards mean nothing without enforcement. I’ve integrated:

• OXC & Biome: Because linting and formatting should be instantaneous, not a coffee break.
• Commitlint: To ensure our Git history is a readable roadmap, not a list of "fixed stuff."
• Lighthouse 100: Accessibility and Performance are not "tasks for later"; they are built into the initial prompt.

5. The "Escape Hatch" Philosophy

As a senior dev recently pointed out to me, strict rules need a pressure valve. My repo includes an explicit Escape Hatch protocol. You can break a rule, but you must document it with a @v-exception or @r-exception tag, justifying why the standard doesn't apply to that specific edge case. This protects the codebase from entropy while allowing for human pragmatism.

The biggest mistake people make with AI is letting it code immediately. My Orchestrator forces a 'Plan-Then-Act' phase. It’s like a pre-code review that happens before the code even exists. This saves hours of debugging and ensures the A11y and Test selectors are thought out upfront.

Example of code produced (The Standards in Action)

🔵 React: BaseImage.tsx

import React, { useMemo } from 'react';

export interface Props {
  name: string;
  ext?: 'png' | 'jpg' | 'webp';
  alt: string;
  className?: string;
}

const BaseImage: React.FC<Props> = ({ 
  name, 
  ext = 'webp', 
  alt, 
  className 
}) => {
  // Memoized to prevent recalculation on parent re-renders
  const imagePath = useMemo(() => {
    return new URL(`../assets/images/${name}.${ext}`, import.meta.url).href;
  }, [name, ext]);

  return (
    <img
      src={imagePath}
      alt={alt}
      className={className}
      loading="lazy"
      data-testid="base-image"
    />
  );
};

export default React.memo(BaseImage);

🟢 Vue 3: BaseSvg.vue

<script setup lang="ts">
import { computed } from 'vue';

export interface Props {
  name: string;
  alt?: string;
  size?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  alt: 'icon',
  size: 24
});

// Vite Static Analysis safe: path is literal, filename is dynamic
const iconPath = computed(() => {
  return new URL(`../assets/icons/${props.name}.svg`, import.meta.url).href;
});
</script>

<template>
  <img 
    :src="iconPath" 
    :alt="alt" 
    class="base-svg"
    loading="lazy"
    data-test="base-svg"
  />
</template>

The Code

Check out the repository and use these .md files as your System Prompts to ensure your AI-generated code hits Staff Engineer quality every time.

🔗 GitHub Repo: prompts

How do you handle asset management in Vite to avoid build-time errors? Do you have a "non-negotiable" rule for your AI agents? Let's discuss below!