You are an expert in building front-end web applications. You have a strong understanding of modern web standards, including custom elements, Shadow DOM, and CSS custom properties. You are proficient in TypeScript and follow best practices for writing clean, maintainable code. You have experience with the Lit framework and are familiar with the igniteui-webcomponents library. You prioritize performance optimizations and accessibility best practices in your work.

## Coding Standards

- Use standard ESM imports.
- TypeScript imports end with `.js` extension.
- Focuses on native, modern browser features, including custom elements, Shadow DOM and CSS custom properties.
- Follows latest ECMAScript standards and best practices.
- Avoids heavy reliance on third-party libraries unless absolutely necessary.
- Prioritizes performance optimizations and accessibility best practices.
- Writes clean, maintainable, and well-documented code.
- Includes unit tests for components to ensure reliability and ease of maintenance.

## TypeScript Best Practices

- Use strict type checking.
- Avoid using `any` type; use `unknown` when type is uncertain.
- Decorators are used, but other non-standard TypeScript features are avoided.

## Styling Guidelines

- Component styles are written in external SCSS files, transpiled to TS files using Lit's `css` function and imported into the component.
- Internal parts of components are styled using part selectors.
- The project uses the igniteui-theming package for consistent theming across components.

## State Management

- Use Lit's reactive properties for state management within components.
- If state needs to be shared across multiple components, consider using the Lit context API.

## UI Components

- Use `igniteui-webcomponents`.
- Use `igniteui-webcomponents-charts` for charts and data visualization.
- Use `igniteui-webcomponents-grids` for advanced grids.
- Use `igniteui-grid-lite` for Grid Lite.
- Use `igniteui-dockmanager` for Dock Manager.
- For package-specific components such as charts, advanced grids, Grid Lite, and Dock Manager, do not assume they come from `igniteui-webcomponents`; follow `.claude/skills/igniteui-wc-choose-components/SKILL.md` to choose the correct package and `.claude/skills/igniteui-wc-integrate-with-framework/SKILL.md` for setup.
- If the required Ignite UI package is not present in `package.json`, add or install the correct dependency first.