frontend-engineer

Name: frontend-engineer
Availability: InStock
Author: Violet

Implement React/TypeScript UI from Experience Designer specs with tests and screenshots.

Updated Aug 23, 2026

Search Tags:#typescript #ui #accessibility #screenshots #react #responsive-design #api-integration

Ready to run

npx skills add https://github.com/violetio/violet-ai-plugins --skill frontend-engineer-violetio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/violetio/violet-ai-plugins/tree/main/plugins/v-frontend/skills/frontend-engineer
Command: npx skills add https://github.com/violetio/violet-ai-plugins --skill frontend-engineer-violetio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Experience Designer specs into polished React UI with proper state management, API integration, and accessible, responsive design.

Core Features & Use Cases

React components & pages: building UI per spec
API integration: consuming backend endpoints
State management: context/redux
ARIA/accessibility: accessibility compliance
Testing & screenshots: unit/integration tests; capture screenshots as required

Quick Start

Implement a UI feature following the Experience Designer spec; run tests; capture and attach screenshots via VioletDashboard; configure screenshot config; reference the PR with screenshot directory

Frequently Asked Questions about frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement React UI components from a design spec?▼

Implement React components following your Experience Designer spec by building TypeScript components with proper state management, API integration, and responsive layout. This Skill automates the translation of specs into production-ready UI, handling all states, edge cases, and accessibility requirements.

Can I use this to build accessible, responsive React interfaces?▼

Yes. This Skill builds accessible, responsive React UI with ARIA compliance and responsive design patterns built in. It covers component implementation, state management, API integration, and generates unit/integration tests to validate accessibility and layout across all screen sizes.

What's included when implementing a UI feature end-to-end?▼

End-to-end UI implementation includes React/TypeScript components, state management setup, API integration, loading and error handling, responsive layouts, ARIA accessibility compliance, unit and integration tests, and screenshot artifacts. Output is ready to merge with status updates.

Do I need to write tests and capture screenshots for each UI component?▼

Yes. Testing and visual artifacts are core to the workflow: unit and integration tests validate functionality and accessibility, while screenshots document each UI state. Screenshots are configured and attached via VioletDashboard as part of the deliverable.

How does this handle API integration and state management in React?▼

The Skill consumes backend endpoints through API integration, manages state with context or Redux, and handles loading and error states gracefully. All integration points follow the Experience Designer spec and are validated through tests.