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, etc.), the risk of "garbage in, garbage out" has never been higher. To fight this, I built Promps—a modular repository of non-negotiable standards for Vue 3 and React 18/19.

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

In my Vue standards, I move beyond basic setup. We enforce:

• ** Data Handling:** Forbidding the use of .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 and AbortControllers is mandatory. No leaks allowed.

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

React moves fast. 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.
• Strict Testing: We don't test implementation; we test behavior. 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.
• Commitlint: To ensure our Git history is as clean as our code.
• Lighthouse 100: Every component must be built with semantic HTML and A11y roles from day one.

The Code

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

Example of code produced

import React, { useMemo } from 'react';

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

const BaseImage: React.FC<BaseImageProps> = ({ 
  name, 
  ext = 'webp', 
  alt, 
  className 
}) => {
  /**
   * Performance: Memoize the URL construction to prevent 
   * recalculation on every re-render.
   */
  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);

GitHub Repo: prompts

How do you handle asset management in Vite to avoid build-time errors?

Comments

[Waffeu Rayn]

@sylwia-lask can i have a review, please