Research Engineer

The research-engineer skill acts as a specialized frontend development assistant designed to streamline the creation of modern web interfaces. It leverages AI agents to generate clean, responsive code and assist with debugging complex layout issues efficiently.

When to use it

• Rapidly prototyping new landing pages or marketing sites without extensive manual coding.
• Refactoring legacy frontend codebases into modern frameworks like React or Vue.
• Debugging persistent CSS flexbox or grid alignment issues that are difficult to isolate manually.
• Generating boilerplate structures for dashboards or data-heavy admin panels.

Key capabilities

• Generates responsive HTML, CSS, and JavaScript components on demand.
• Provides intelligent debugging assistance specifically for frontend rendering errors.
• Adapts code output to match specific design system requirements or framework conventions.

Example prompts

• "Create a responsive navigation bar with a mobile hamburger menu using Tailwind CSS."
• "Debug why my flex container is not centering the child elements vertically across browsers."
• "Generate a reusable card component for displaying product details in an e-commerce grid."

Tips & gotchas

Ensure your AI agent has access to the necessary framework documentation or style guides to generate code that aligns with your project's existing architecture. For best results, provide specific context about your current tech stack when requesting complex components.