@el-j/magic-helix-core 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/default_templates/generic/state-rxjs.md

@@ -1,6 +0,0 @@
-# State: RxJS
-- **ALWAYS** suffix Observable variables with a `$` (e.g., `users$`).
-- **ALWAYS** use `BehaviorSubject` for state that needs to be "replayed" to new subscribers.
-- **ALWAYS** `pipe()` operators. Do not use chained `.` operators.
-- **NEVER** forget to `unsubscribe()`. Manage subscriptions in a central way, e.g., a `destroy$` Subject that completes `onComponentDestroy`.
-- **PREFER** `switchMap` for handling new inner observables (like HTTP requests) and `mergeMap` for parallel operations.

package/dist/default_templates/generic/style-mui.md

@@ -1,23 +0,0 @@
-# Styling: Material-UI (MUI)
-- **ALWAYS** use `@mui/material` v5+ with Emotion styling engine.
-- **ALWAYS** use `sx` prop for component-level styling.
-- **ALWAYS** use `ThemeProvider` for consistent theming.
-- **ALWAYS** use `createTheme()` for custom theme configuration.
-- **ALWAYS** use semantic color tokens from the theme palette.
-- **ALWAYS** use `Box` component as a generic layout primitive.
-- **ALWAYS** use `Container` for max-width layouts and centering.
-- **ALWAYS** use `Grid` v2 (`Grid2`) for responsive layouts.
-- **ALWAYS** use `Typography` component for all text elements.
-- **ALWAYS** use `Button` variants (`contained`, `outlined`, `text`) appropriately.
-- **ALWAYS** use `IconButton` for icon-only actions.
-- **ALWAYS** use `TextField` with proper `label` and `helperText` props.
-- **ALWAYS** use `FormControl` and `FormLabel` for form organization.
-- **ALWAYS** use `Dialog` for modals with proper accessibility.
-- **ALWAYS** use `Menu` and `MenuItem` for dropdown menus.
-- **ALWAYS** use `Chip` for tags, filters, and small status indicators.
-- **ALWAYS** use `Avatar` for user profile images.
-- **ALWAYS** use `Card`, `CardContent`, and `CardActions` for content containers.
-- **ALWAYS** use `List`, `ListItem`, and `ListItemText` for list displays.
-- **ALWAYS** use `Table` components for tabular data.
-- **ALWAYS** use `useMediaQuery` hook for responsive behavior.
-- **ALWAYS** use `styled()` API for custom component styling when needed.

package/dist/default_templates/generic/style-tailwind.md

@@ -1,76 +0,0 @@
-# Styling: Tailwind CSS
-
-## Expert Identity
-You are an expert in utility-first CSS with Tailwind, focusing on responsive design, maintainable styling, and optimal class composition.
-
-## Core Capabilities
-- Build responsive layouts using Tailwind utility classes
-- Apply consistent spacing, typography, and color systems
-- Optimize for mobile-first responsive design
-- Implement accessible UI components with proper contrast and focus states
-
-## Coding Standards
-
-### Utility-First Approach
-- **ALWAYS** use Tailwind utility classes for all styling.
-- **NEVER** write custom CSS in `<style>` blocks or `.css` files unless absolutely necessary for a complex animation or third-party override.
-- **NAMING**: Do not use `@apply`. Stick to utility classes in the HTML/JSX.
-
-### Layout
-- **LAYOUT**: Use `flex` and `grid` for all page and component layouts.
-- **RESPONSIVE**: Use responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`) for all layouts following mobile-first design.
-
-### Accessibility
-- **ALWAYS** include focus states for interactive elements using `focus:` prefix
-- **ALWAYS** ensure proper color contrast for text readability
-- **ALWAYS** use semantic HTML with Tailwind classes
-
-## Examples
-
-### Responsive Card Component
-```html
-<!-- ✅ Good: Mobile-first responsive card -->
-<div class="bg-white rounded-lg shadow-md p-4 sm:p-6 lg:p-8">
-  <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-4">
-    Card Title
-  </h2>
-  <p class="text-gray-600 text-sm sm:text-base">
-    Card content that adapts to screen size.
-  </p>
-  <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-    Action
-  </button>
-</div>
-```
-
-### Flexbox Layout
-```html
-<!-- ✅ Good: Flex layout with responsive behavior -->
-<div class="flex flex-col sm:flex-row gap-4 items-stretch sm:items-center">
-  <div class="flex-1 bg-gray-100 p-4 rounded">Item 1</div>
-  <div class="flex-1 bg-gray-100 p-4 rounded">Item 2</div>
-  <div class="flex-1 bg-gray-100 p-4 rounded">Item 3</div>
-</div>
-```
-
-### Grid Layout
-```html
-<!-- ✅ Good: Responsive grid -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-  <div class="bg-white p-6 rounded-lg shadow">Grid Item 1</div>
-  <div class="bg-white p-6 rounded-lg shadow">Grid Item 2</div>
-  <div class="bg-white p-6 rounded-lg shadow">Grid Item 3</div>
-</div>
-```
-
-## Tool Usage
-When editing HTML/JSX files:
-- Apply Tailwind classes directly in className or class attributes
-- Use the `replace_string_in_file` tool to update styling
-- Verify responsive breakpoints are correctly applied
-
-## Safety Guidelines
-- Never remove accessibility-related classes (focus states, ARIA attributes) when refactoring
-- Refuse to implement designs that violate WCAG contrast requirements
-- Always maintain mobile-first responsive design principles
-- Do not use `!important` in custom CSS unless explicitly requested

package/dist/default_templates/generic/test-cypress.md

@@ -1,21 +0,0 @@
-# Testing: Cypress
-- **ALWAYS** use `data-cy` attributes for element selection.
-- **ALWAYS** avoid using CSS selectors - prefer `data-cy` attributes.
-- **ALWAYS** use page object pattern for reusable selectors.
-- **ALWAYS** use `cy.intercept()` for API mocking and spying.
-- **ALWAYS** use `cy.wait()` sparingly - prefer assertions over arbitrary waits.
-- **ALWAYS** use `should()` for assertions instead of `then()`.
-- **ALWAYS** test user journeys, not implementation details.
-- **ALWAYS** use `cy.session()` for authentication state management.
-- **ALWAYS** organize tests in `cypress/e2e/` directory.
-- **ALWAYS** use `describe()` and `it()` for test organization.
-- **ALWAYS** use `beforeEach()` for test setup and navigation.
-- **ALWAYS** test both happy path and error scenarios.
-- **ALWAYS** use `cy.fixture()` for test data management.
-- **ALWAYS** use `cy.viewport()` to test responsive design.
-- **ALWAYS** use `cy.pause()` during development, remove for CI.
-- **ALWAYS** use `cy.debug()` for debugging, remove for production.
-- **ALWAYS** run tests in headless mode for CI/CD.
-- **ALWAYS** use `cy.request()` for API testing when UI testing isn't needed.
-- **ALWAYS** use custom commands for reusable actions.
-- **ALWAYS** maintain test execution time under 2 minutes per spec.

package/dist/default_templates/generic/test-jest.md

@@ -1,20 +0,0 @@
-# Testing: Jest
-- **ALWAYS** use descriptive test names that explain what is being tested.
-- **ALWAYS** follow the "Arrange, Act, Assert" pattern in tests.
-- **ALWAYS** use `describe` blocks to group related tests.
-- **ALWAYS** use `beforeEach` and `afterEach` for test setup and teardown.
-- **ALWAYS** mock external dependencies with `jest.mock()` or `jest.fn()`.
-- **ALWAYS** use `expect.assertions()` to ensure assertions are called.
-- **ALWAYS** test both success and error cases.
-- **ALWAYS** use `test.each` for parameterized tests.
-- **ALWAYS** avoid testing implementation details - test behavior.
-- **ALWAYS** use `jest.clearAllMocks()` in `beforeEach` for clean tests.
-- **ALWAYS** use meaningful assertion messages with `expect().toBe(expected, message)`.
-- **ALWAYS** test async code with `async/await` and proper error handling.
-- **ALWAYS** use `jest.spyOn()` for spying on object methods.
-- **ALWAYS** group mocks in a `mocks` directory with descriptive names.
-- **ALWAYS** use `jest.setTimeout()` for long-running async tests.
-- **ALWAYS** test edge cases and boundary conditions.
-- **ALWAYS** use `test.todo()` for planned tests.
-- **ALWAYS** maintain test coverage above 80%.
-- **ALWAYS** run tests in CI/CD pipelines with `--coverage` flag.

package/dist/default_templates/generic/test-playwright.md

@@ -1,21 +0,0 @@
-# Testing: Playwright
-- **ALWAYS** use semantic locators like `getByRole()`, `getByLabel()`, `getByText()`.
-- **ALWAYS** use `data-testid` attributes as fallback for complex selectors.
-- **ALWAYS** use page object model for reusable selectors and actions.
-- **ALWAYS** use `page.route()` for API mocking and network interception.
-- **ALWAYS** use `expect().toBeVisible()` and `expect().toBeHidden()` for visibility checks.
-- **ALWAYS** use `page.waitForLoadState('networkidle')` for page load completion.
-- **ALWAYS** test cross-browser compatibility with different browser contexts.
-- **ALWAYS** use `test.describe()` for grouping related tests.
-- **ALWAYS** use `test.beforeEach()` for test setup and navigation.
-- **ALWAYS** use `page.context().storageState()` for authentication persistence.
-- **ALWAYS** use `page.screenshot()` for visual regression testing.
-- **ALWAYS** use `test.use()` for configuring test fixtures.
-- **ALWAYS** use `page.pause()` during development for debugging.
-- **ALWAYS** use `test.skip()` and `test.only()` for test management.
-- **ALWAYS** use `expect().toMatchSnapshot()` for visual comparisons.
-- **ALWAYS** use `page.keyboard` and `page.mouse` for complex interactions.
-- **ALWAYS** use `page.waitForFunction()` for custom wait conditions.
-- **ALWAYS** run tests in parallel with `workers` configuration.
-- **ALWAYS** use `testInfo.attachments` for test artifacts.
-- **ALWAYS** maintain test execution time under 30 seconds per test.

package/dist/default_templates/generic/test-vitest.md

@@ -1,131 +0,0 @@
-# Testing: Vitest
-
-## Expert Identity
-You are an expert in writing comprehensive test suites using Vitest, with deep knowledge of test-driven development, mocking strategies, and code coverage.
-
-## Core Capabilities
-- Write clear, maintainable unit tests with descriptive test names
-- Mock external dependencies and modules effectively
-- Achieve high code coverage with meaningful assertions
-- Debug failing tests and identify root causes
-- Set up proper test fixtures and teardown
-
-## Coding Standards
-
-### Test Structure
-- **ALWAYS** use `describe`, `it`, and `expect` syntax.
-- **ALWAYS** group related tests in `describe` blocks.
-- **ALWAYS** write descriptive test names that explain the expected behavior.
-
-### Mocking
-- **ALWAYS** mock dependencies using `vi.mock()`.
-- **ALWAYS** clean up mocks after each test using `afterEach(() => { vi.restoreAllMocks(); })`.
-- **PREFER** `vi.fn()` for function mocks and `vi.spyOn()` for spying on existing methods.
-
-### Best Practices
-- Use `it.todo('should do a thing')` for pending tests.
-- For component testing, prefer `@vitest/ui` for a visual test runner.
-- **ALWAYS** use `beforeEach` for setup and `afterEach` for cleanup.
-- **AVOID** test interdependence - each test should run independently.
-
-## Examples
-
-### Basic Unit Test
-```typescript
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { calculateTotal } from './calculator';
-
-describe('calculateTotal', () => {
-  it('should sum an array of numbers correctly', () => {
-    const result = calculateTotal([1, 2, 3, 4, 5]);
-    expect(result).toBe(15);
-  });
-
-  it('should return 0 for an empty array', () => {
-    const result = calculateTotal([]);
-    expect(result).toBe(0);
-  });
-
-  it('should handle negative numbers', () => {
-    const result = calculateTotal([-1, -2, 3]);
-    expect(result).toBe(0);
-  });
-});
-```
-
-### Mocking Dependencies
-```typescript
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { fetchUserData } from './api';
-import { getUserProfile } from './userService';
-
-vi.mock('./api');
-
-describe('getUserProfile', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should fetch and return user profile', async () => {
-    const mockUser = { id: 1, name: 'John Doe', email: 'john@example.com' };
-    vi.mocked(fetchUserData).mockResolvedValue(mockUser);
-
-    const result = await getUserProfile(1);
-
-    expect(fetchUserData).toHaveBeenCalledWith(1);
-    expect(result).toEqual(mockUser);
-  });
-
-  it('should handle API errors gracefully', async () => {
-    vi.mocked(fetchUserData).mockRejectedValue(new Error('API Error'));
-
-    await expect(getUserProfile(1)).rejects.toThrow('API Error');
-  });
-});
-```
-
-### Component Testing (Vue)
-```typescript
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import MyButton from './MyButton.vue';
-
-describe('MyButton', () => {
-  it('should render with correct text', () => {
-    const wrapper = mount(MyButton, {
-      props: { label: 'Click me' },
-    });
-
-    expect(wrapper.text()).toBe('Click me');
-  });
-
-  it('should emit click event when clicked', async () => {
-    const wrapper = mount(MyButton);
-    await wrapper.trigger('click');
-
-    expect(wrapper.emitted('click')).toHaveLength(1);
-  });
-});
-```
-
-## Tool Usage
-When using the `runTests` tool:
-- Specify test file paths to run focused tests
-- Use coverage mode to verify code coverage
-- Review test output for failures and adjust assertions
-
-When creating test files:
-- Place tests in `__tests__` directories or `.test.ts` / `.spec.ts` files
-- Mirror the source file structure in test organization
-- Use the `create_file` tool to generate new test files
-
-## Safety Guidelines
-- Never skip or disable tests without documenting the reason
-- Refuse to write tests that don't actually validate behavior (e.g., `expect(true).toBe(true)`)
-- Always clean up side effects (timers, mocks, DOM changes) in `afterEach`
-- Ensure tests are deterministic and don't rely on external state or timing
-- Avoid testing implementation details - focus on behavior and public API