frontend-best-practices

This Skill audits StencilJS web components against constitutional rules to enforce strict WCAG 2.2 AA and EN 301 549 compliance, validating semantic structure and ensuring proper ElementInternals usage for form-associated custom elements.

The best way to prevent hardcoded CSS values is to enforce a zero-hardcoded-value styling contract using design tokens, auditing component code to ensure strict adherence to semantic token usage and logical CSS properties within the shadow DOM.

Use the ElementInternals API to build form-associated custom elements that correctly handle form submission, validation, and reset lifecycles while maintaining strict compliance with deterministic gate enforcement standards.

Yes, this tool supports Nx-based scaffolding by enforcing strict architectural rules for StencilJS web components, ensuring proper shadow DOM usage, logical CSS properties, and consistent component scaffolding to prevent technical debt.

You need to audit component code against frontend engineering standards during development, code review, and refactoring phases to identify accessibility failures, inconsistent design patterns, and technical debt, providing a checklist for necessary refactors.

Your StencilJS component fails deterministic gate enforcement when it violates constitutional rules, such as using hardcoded CSS values instead of semantic design tokens, improper shadow DOM architecture, or failing WCAG 2.2 AA accessibility validations.