new-section

To add a new responsive section to an HTML landing page, this skill generates the HTML structure and automatically inserts it into your index.html file at the appropriate location. It extends your existing CSS with flex or grid layouts to ensure the new section adapts correctly across breakpoints.

To add CSS animations and an Amber theme to your landing page section, this skill updates your css/style-amber.css file directly. It applies the project color variables, spacing, and hover or transition effects to ensure the new section matches the existing visual style.

Yes, you can automatically update header navigation links when creating a new HTML section. This skill optionally updates the navigation in the header to include the new section, ensuring visitors can navigate directly to it from the top of the landing page.

You do not need to manually write JavaScript for interactive hover effects in your new LP section. This skill optionally adds minimal JS wiring in js/main.js for interactive behavior if needed, handling the cross-breakpoint logic automatically based on your existing template.

The best way to generate accessible HTML and CSS for a new LP section is using an automated template approach. This skill reads your existing templates and inserts section markup while extending styles to ensure responsive, accessible output using your project color variables.

You should use kebab-case to specify the section name when generating LP HTML and CSS. Providing the section name in kebab-case along with its purpose allows the skill to automatically append the new section into index.html with the correct Amber styling and responsive CSS.