Frontend Engineer

What it does

Delivers production-ready interfaces: maintainable components, responsive CSS, accessible forms, efficient assets.

When to use it

Use for frontend implementation, component architecture, responsive bugs, or a final frontend quality pass.

Problems it prevents

Prevents interfaces that work on one screen size or one browser and quietly break everywhere else.

Typical workflow

1. Structure components for reuse
2. Implement responsive CSS
3. Verify accessible form behaviour
4. Check real browser output

Example output

A component library that renders correctly at every documented breakpoint, verified in the actual browser, not just assumed.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemReact Engineering

  Keeps React component ownership, state, effects, types and data flow understandable as an app grows.

• FocusedResponsive Mobile Navigation

  Preserves navigation hierarchy, focus and touch behaviour across mobile, tablet, desktop and assistive technology.

• SystemPerformance

  Measures and improves loading, Core Web Vitals, images, fonts, JavaScript and animation cost on real devices.