Does it manage state and API calls?

Yes, it is designed to implement state management logic (Context, Redux, or Zustand) and consume backend APIs based on provided architect contracts.

Can I use this for accessibility compliance?

Absolutely. Accessibility compliance is a core part of the skill's scope, ensuring that components meet standard web accessibility requirements.

How does this skill handle visual QA?

The skill includes a built-in 'Screenshot Capture' process that requires the agent to generate visual evidence of the implemented UI states before marking a task as complete.

How does it coordinate with other AI agents?

It follows a structured workflow where it receives specs from an Experience Designer and API shapes from an Architect, delivering the final code to a Tech Lead for review.

Which frameworks does the Frontend Engineer skill support?

While optimized for React and TypeScript, the skill can be customized to support various stacks including Vue, Angular, and different styling frameworks like Tailwind or CSS Modules.

Frontend Engineer

Name: Frontend Engineer
Author: violetio

byvioletio

0•

デザインツール

Builds production-ready React interfaces and state-driven components based on design specifications and API contracts.

The Frontend Engineer skill empowers Claude to act as a specialized UI authority capable of transforming design specs into high-quality code. It focuses on the implementation of React components, robust state management, and seamless API integration while adhering to strict accessibility and responsive design standards. By following a rigorous workflow—including mandatory screenshot capture for visual review and compliance with Experience Designer specs—this skill ensures that every UI state, edge case, and transition is built to exact requirements, making it ideal for teams using AI agents to accelerate frontend development cycles.

主な機能

01Automated implementation of React and TypeScript components

02Integrated unit and integration testing capabilities

03Built-in workflow for visual verification and screenshot capture

04Strict adherence to experience specifications and edge cases

05Comprehensive state management and REST API integration

060 GitHub stars

ユースケース

01Building complex user interfaces from design specs and API contracts

02Implementing accessible and responsive components for enterprise React apps

03Coordinating UI development between UX designers and backend architects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add violetio/violet-ai-plugins frontend-engineer

For use in Claude.ai and ChatGPT

Download Skill