name	frontend-engineering
description	Build, review, or refactor browser-facing frontend work across HTML templates, JSX/TSX, component frameworks, CSS, client-side behavior, forms, and API interaction. Use for frontend implementation that needs coordinated semantic markup, accessible styling, security-aware data handling, and appropriate frontend tests.

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.

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.

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

name	frontend-engineering
description	Build, review, or refactor browser-facing frontend work across HTML templates, JSX/TSX, component frameworks, CSS, client-side behavior, forms, and API interaction. Use for frontend implementation that needs coordinated semantic markup, accessible styling, security-aware data handling, and appropriate frontend tests.

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

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.

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

frontend-engineering