frontend-best-practices

name	frontend-best-practices
description	Senior Front-End Developer guidance for ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks. Use when building front-end applications, writing React/Next.js code, or implementing UI components. Triggers on: frontend, react, nextjs, typescript, tailwindcss, ui development.

Front-End Best Practices

Senior Front-End Developer guidance for modern web development.

Coding Environment

The user asks questions about the following coding languages:

• ReactJS
• NextJS
• JavaScript
• TypeScript
• TailwindCSS
• HTML
• CSS

Code Implementation Guidelines

Early Returns

// ✅ Good - early return
function getUserName(user: User | null): string {
  if (!user) return 'Anonymous';
  if (!user.name) return 'Unknown';
  return user.name;
}

// ❌ Bad - nested conditions
function getUserName(user: User | null): string {
  if (user) {
    if (user.name) {
      return user.name;
    } else {
      return 'Unknown';
    }
  } else {
    return 'Anonymous';
  }
}

TailwindCSS Styling

// ✅ Good - use Tailwind classes
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Click me
</button>

// ❌ Bad - avoid inline CSS
<button style={{ padding: '8px 16px', backgroundColor: 'blue' }}>
  Click me
</button>

Descriptive Naming

// ✅ Good - descriptive names with auxiliary verbs
const isLoading = false;
const hasError = true;
const canEdit = true;

// Event handlers with "handle" prefix
const handleClick = () => {};
const handleKeyDown = () => {};
const handleSubmit = () => {};

// ❌ Bad - unclear names
const flag = false;
const err = true;
const edit = true;

const click = () => {};
const keyDown = () => {};

Accessibility Features

// ✅ Good - accessible interactive element
<div
  role="button"
  tabIndex={0}
  aria-label="Toggle menu"
  onClick={handleClick}
  onKeyDown={handleKeyDown}
>
  Menu
</div>

// ❌ Bad - not accessible
<div onClick={handleClick}>
  Menu
</div>

Const Over Function

// ✅ Good
const toggle = () => setIsOpen(!isOpen);
const fetchData = async () => { /* ... */ };

// ❌ Bad
function toggle() {
  setIsOpen(!isOpen);
}

No Semicolons (Optional)

// ✅ Good (if configured)
const name = 'John'
const greeting = `Hello ${name}`

// ❌ Bad (if configured for no semicolons)
const name = 'John';
const greeting = `Hello ${name}`;

Commit Guidelines

Commit Format

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Types

Type	Description	Version
feat	New feature	MINOR
fix	Bug fix	PATCH
chore	Maintenance	-
docs	Documentation	-
style	Formatting	-
refactor	Code refactoring	-
perf	Performance	-
test	Tests	-

Examples

feat(auth): add OAuth2 login support
fix(api): resolve race condition in data fetching
docs(readme): update installation instructions
refactor(utils): simplify date formatting logic

Best Practices

1. Follow the user's requirements carefully & to the letter
2. Think step-by-step - describe your plan in pseudocode first
3. Confirm, then write code
4. Always write correct, best practice, DRY principle, bug free, fully functional code
5. Focus on easy and readability code, over being performant
6. Fully implement all requested functionality
7. Leave NO todo's, placeholders or missing pieces
8. Ensure code is complete! Verify thoroughly
9. Include all required imports, and ensure proper naming of key components
10. Be concise - minimize any other prose

Activation Keywords

• frontend-best-practices
• frontend-best-practices
• frontend best practices

Tools Used

• exec
• read
• write
• edit

Instructions for Agents

1. Read the task description carefully
2. Follow the step-by-step process
3. Use the appropriate tools
4. Verify the results

Examples

Example 1: Basic Usage

User:

Agent:

Example 2: Advanced Usage

User:

Agent: