frontend-rules.mdc

---
description: 
globs: 
alwaysApply: true
---
# Frontend Development Rules

## Related Rules
- @README.mdc for general coding practices
- @workflow-rules.mdc for development workflow
- @backend-rules.mdc for backend integration
- @frontend/checklists.mdc for development checklists

## Core Rules
- @frontend/core/state-management.mdc for state management with Stimulus.js and Rails UJS
- @frontend/core/performance.mdc for Rails asset pipeline and caching
- @frontend/core/accessibility.mdc for a11y in Rails applications
- @frontend/core/testing.mdc for RSpec and Capybara testing
- @frontend/core/security.mdc for frontend security practices
- @frontend/core/error-handling.mdc for error handling and user feedback
- @frontend/core/internationalization.mdc for i18n and localization
- @frontend/core/browser-compatibility.mdc for cross-browser support

## Module References
- @frontend/haml-attributes.mdc for HAML class attribute conventions
- @frontend/icon-usage.mdc for icon implementation
- @frontend/component-structure.mdc for component architecture
- @frontend/tailwind-conventions.mdc for Tailwind CSS usage

## Development Workflow
For detailed development workflow checklists, including before starting, during development, and after development phases, refer to @frontend/checklists.mdc.

## Common Mistakes to Avoid
- Using raw SVGs instead of humicon helper
- Creating new components when existing ones suffice
- Mixing presentation and business logic
- Using inline styles
- Duplicating component functionality
- Not using proper Rails form helpers
- Not following core rules for:
  - State management
  - Performance
  - Accessibility
  - Testing
  - Security
  - Error handling
  - Internationalization
  - Browser compatibility