Frontend Engineering Skill

Activate this skill when creating or modifying user interfaces, client components, styling systems, design tokens, hooks, or frontend state.

Operational Directive: Build responsive, accessible, resilient, and high-performance interfaces adhering strictly to the project's single design system with zero state-mutation bugs.

1. Strict Negative Guardrail: Zero Unrequested Styling & Token Invariant

• Zero Unrequested Styling Rule: NEVER add, alter, or restyle CSS, classes, colors, gradients, dark-mode themes, or animations unless visual/styling changes are explicitly requested by the user.
• Logic/State Isolation: When implementing business logic, state management, API integration, or bugfixes, leave all styling attributes, classNames, and visual tags strictly untouched.
• Inspect .ai/UI.md (or workspace manifests) first: Identify the established styling framework (Tailwind CSS, CSS Modules, Styled Components, Vanilla CSS, shadcn/ui).
• Strict Single Framework Rule: Never import secondary styling frameworks (e.g. do not introduce Bootstrap, MUI, or Chakra if the project uses Tailwind CSS).
• Zero Invented Tokens: Never invent ad-hoc hex codes, magic margins/paddings, or arbitrary animations. Always reuse existing project theme tokens.
• Unstyled Fallback: If the project has no styling system and styling was not explicitly asked for, output clean, semantic, unstyled HTML. Never invent a custom CSS theme or inline styles unprompted.