Frontend Engineer

The frontend-engineer skill empowers AI agents to build, debug, and deploy modern web applications using React, TypeScript, Tailwind CSS, and Vite. It handles everything from scaffolding project structures to generating complex UI components and fixing runtime errors.

When to use it

• You need a fully functional React application scaffolded with TypeScript and Tailwind CSS immediately.
• Your agent needs to generate reusable UI components based on specific design requirements or prop definitions.
• You require automated debugging for browser console errors, linting issues, or build failures in a Vite environment.
• You want to rapidly prototype landing pages or dashboards without writing boilerplate configuration code.

Key capabilities

• Scaffolds new projects with create-react-app or Vite templates including TypeScript and Tailwind CSS.
• Generates functional React components with defined props, state management, and event handlers.
• Writes and executes shell commands to install dependencies, run development servers, and build production bundles.
• Analyzes browser console logs and error messages to identify and fix code bugs automatically.
• Integrates common libraries like Axios for API calls and Framer Motion for animations.

Example prompts

• "Create a new React project with TypeScript and Tailwind CSS, then add a responsive navigation bar component."
• "Fix the 'Cannot read properties of undefined' error in my App.tsx file by checking the data fetching logic."
• "Generate a dashboard layout using Grid and Flexbox that displays three columns of cards with hover effects."

Tips & gotchas

Ensure your environment has Node.js installed before requesting project scaffolding or dependency installation. While the agent can generate complex UIs, it may struggle with highly specific design assets unless you provide clear textual descriptions or code snippets as reference.