Claude Development Instructions for Hogwarts Package - Ember.js Data Sources Management App

hogwarts-claude-instructions.md

Claude Local Instructions - Hogwarts

Application Overview

Hogwarts is an Ember.js v3.28.6 application for Data Sources creation and management. It provides the UI for connecting Intelligent Content to various client data sources.

Development Rules

Package Manager

• Always use yarn (configured via volta in root package.json)
• Never use npm commands in this workspace

Server & Port Configuration

• Development server: yarn start or ember server --port 2001
• Default port: 2001 (not the standard 4200)
• Cannot run independently - requires Rails server connection at /data_sources route
• Test URL: http://localhost:2001/tests

Testing Protocol

• Test command: yarn test (uses ember-exam for parallel execution)
• Browser: Chrome (headless in CI)
• Test framework: QUnit via Ember Test Helpers
• Visual testing: Percy integration available
• Test locations:
  • Component tests: /tests/integration/components/
  • Acceptance tests: /tests/acceptance/
  • Unit tests: /tests/unit/
  • Test helpers: /tests/helpers/

Code Quality

• JavaScript linting: yarn lint-js (ESLint)
• Template linting: yarn lint-hbs (ember-template-lint)
• Always run linting before committing

File Structure Conventions

• Components: /app/components/ with .hbs and .js files
• Routes: /app/routes/
• Controllers: /app/controllers/
• Models: /app/models/
• Services: /app/services/
• Styles: /app/styles/ (SCSS with PostCSS and Tailwind)

Ember-Specific Rules

• Use Ember Data for models and API interactions
• Mirage for mocking in development/tests
• Page Objects pattern for testing (ember-cli-page-object)
• Follow Ember conventions for naming and file organization
• Use Ember Test Helpers for test utilities

Testing Best Practices

• Component tests: Use integration tests for component behavior
• Acceptance tests: Use for user workflows and features
• Page objects: Create reusable page objects for complex UI interactions
• Test helpers: Utilize existing helpers in /tests/helpers/

Build & Deployment

• Build: yarn build or ember build
• Environment: Test/staging/production environments configured
• Percy: Visual regression testing available via CI

Key Dependencies

• Ember.js 3.28.6
• Ember Data
• Ember CLI Mirage
• Percy (visual testing)
• SCSS/PostCSS/Tailwind
• ESLint & ember-template-lint

Notes

• This is a legacy Ember app (v3.x) - follow Ember 3.x patterns
• Requires Rails backend connection for full functionality
• Uses yarn workspaces from monorepo root