schalkneethling 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. Usereferences/semantic-html-element-decision-trees.mdandreferences/semantic-html-heading-patterns.mdfor 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.mdandreferences/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-securityskill. - For behavior changes, accessibility checks, visual changes, or regression coverage, load the
frontend-testingskill. - For a new or foundational custom-property system, load the
css-tokensskill when it is installed; otherwise define the required tokens locally with explicit fallback values.
Working Principles
- 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.