Frontend Development Instructions

This skill provides general guidance for frontend development across various projects. Use this when working with web-based user interfaces, regardless of the specific framework or library.

General Principles

Code Organization

• Separate concerns: HTML for structure, CSS for styling, JavaScript for behavior
• Use semantic HTML elements for accessibility
• Keep CSS modular and maintainable
• Avoid global variable pollution using modules or IIFEs

Performance

• Minimize DOM manipulations
• Use CSS animations over JavaScript when possible
• Lazy load images and resources
• Debounce/throttle event handlers
• Use requestAnimationFrame for animations

Accessibility

• Use proper ARIA labels
• Ensure keyboard navigation works
• Maintain sufficient color contrast
• Provide alt text for images

Common Patterns

Event Handling

// Event delegation for multiple elements
document.querySelector('.container').addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    handleButtonClick(e);
  }
});

// Debounced input handler
function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

DOM Manipulation

// Efficient DOM updates
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  fragment.appendChild(li);
});
document.querySelector('#list').appendChild(fragment);

// Template literals for dynamic HTML
const html = `<div class="card">
  <h3>${title}</h3>
  <p>${description}</p>
</div>`;

State Management

// Simple state management
class StateManager {
  constructor() {
    this.state = {};
    this.listeners = [];
  }

  getState(key) {
    return this.state[key];
  }

  setState(key, value) {
    this.state[key] = value;
    this.listeners.forEach(fn => fn(this.state));
  }

  subscribe(fn) {
    this.listeners.push(fn);
    return () => {
      this.listeners = this.listeners.filter(f => f !== fn);
    };
  }
}

Fetch API

// GET request
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

// POST request with JSON
async function postData(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  return response.json();
}

CSS Best Practices

/* Use CSS custom properties */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

/* Mobile-first responsive */
.container {
  padding: var(--spacing);
}

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Efficient selectors */
.card { /* Avoid overly specific selectors */ }
.card__title { }
.card__title--highlighted { }

Framework-Specific Notes

React

• Use functional components with hooks
• Keep components small and focused
• Use useMemo/useCallback for expensive operations
• Follow ESLint rules for React

Vue

• Use Composition API for better code organization
• Leverage computed properties for derived state
• Use v-for with :key for list rendering

Vanilla JavaScript

• Use ES6+ features (const/let, arrow functions, destructuring)
• Prefer modules over script tags
• Use modern APIs (fetch, IntersectionObserver, etc.)

Debugging

Browser DevTools

• Use Console API effectively: console.log, console.warn, console.error
• Use breakpoints for step-through debugging
• Inspect network requests in Network tab
• Check Application tab for localStorage/sessionStorage

Common Issues

• CORS errors: Check server headers
• Memory leaks: Monitor in Performance tab
• Layout shifts: Check for dynamic content loading
• Event listener issues: Verify cleanup in useEffect/destroy

Build Tools

Vite

npm create vite@latest my-app -- --template vanilla
npm install
npm run dev

Webpack

• Configure loaders for different file types
• Use code splitting for large apps
• Enable production optimizations

Testing

Unit Testing

// Simple test example
function sum(a, b) {
  return a + b;
}

// Test
function testSum() {
  const result = sum(2, 3);
  console.assert(result === 5, 'Expected sum to be 5');
}

E2E Testing

• Use Playwright or Cypress for end-to-end tests
• Test critical user flows
• Mock external APIs when needed

Performance Optimization

Core Web Vitals

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

Techniques

• Optimize images (WebP, compression)
• Minify CSS/JS
• Use CDN for static assets
• Implement caching strategies