Frontend Engineering

Use this skill as the entry point for frontend work. Start with the relevant implementation context, then load only the guidance that applies.

Routing

• For HTML, JSX/TSX, Twig, Astro, Vue, Svelte, Lit, MDX, or other markup-producing code, read references/semantic-html.md. Use references/semantic-html-element-decision-trees.md and references/semantic-html-heading-patterns.md for element or heading decisions.
• For CSS, Sass/Less, CSS modules, scoped styles, CSS-in-JS, layout, responsive behavior, motion, colors, focus states, or selectors, read references/css-authoring.md and references/css-patterns.md.
• For forms, authentication, untrusted input, browser storage, URLs, HTML injection, API calls, uploads, or other security-sensitive browser flows, load the frontend-security skill.
• For behavior changes, accessibility checks, visual changes, or regression coverage, load the frontend-testing skill.
• For a new or foundational custom-property system, load the css-tokens skill when it is installed; otherwise define the required tokens locally with explicit fallback values.

Working Principles

1. Inspect the existing component, template, styles, and project conventions before changing them.
2. Prefer native HTML and browser capabilities over custom replacements.
3. Keep semantics, behavior, visual styling, and validation aligned without making them unnecessarily coupled.
4. Treat user-controlled and server-provided data as untrusted until the appropriate security guidance establishes otherwise.
5. Add focused tests that protect the changed user-visible behavior and accessibility contract.