---
description: Frontend Coding Standards
globs: **/*.tsx, **/*.ts
alwaysApply: false
---

# Frontend Guidelines

- Use functional React components instead of class components.
- Apply Tailwind CSS for styling; avoid inline styles.
- Components should be modular and reusable.
- Maintain a consistent and clear component structure.

## Example:
```tsx
// ✅ Good
export const Button = ({ 
  onClick, 
  children, 
  variant = 'primary' 
}: ButtonProps) => {
  return (
    <button 
      onClick={onClick}
      className={`px-4 py-2 rounded ${
        variant === 'primary' ? 'bg-blue-500 text-white' : 'bg-gray-200'
      }`}
    >
      {children}
    </button>
  );
};

// ❌ Avoid
export class Button extends React.Component {
  render() {
    return (
      <button 
        onClick={this.props.onClick}
        style={{ 
          padding: '8px 16px', 
          borderRadius: '4px',
          backgroundColor: this.props.variant === 'primary' ? 'blue' : 'gray',
          color: this.props.variant === 'primary' ? 'white' : 'black'
        }}
      >
        {this.props.children}
      </button>
    );
  }
}
```