skills.rest
violetio
violetioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-engineer

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
One-click install
npx skills add https://github.com/violetio/violet-ai-plugins --skill frontend-engineer-violetio
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
LinWhite2333LinWhite2333

vitetest

Run JavaScript unit tests using Vitest's Jest-compatible API and Vite build system.

Community
Intermediate
Kushal9889Kushal9889

agent-orchestration-improve-agent

Analyze AI agent performance metrics and user feedback to refine prompts.

Community
Advanced
TitoPrauseeTitoPrausee

ui-pattern-analysis

Analyze web UI patterns from code and screenshots into structured reports.

Community
Intermediate
finsilabsfinsilabs
44

content-commerce

Embed shoppable product cards with UTM revenue tracking in CMS platforms.

Official
Intermediate