skills.rest
yasarremre
yasarremreCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Translate UI/UX designs into accessible, reusable React components with TypeScript.

Updated Feb 9, 2026
Search Tags:#ui#accessibility#frontend#react#css#responsive#ux
One-click install
npx skills add https://github.com/yasarremre/SafeHands --skill frontend-engineer-yasarremre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/yasarremre/SafeHands/tree/main/.agent/skills/frontend-engineer
Command: npx skills add https://github.com/yasarremre/SafeHands --skill frontend-engineer-yasarremre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend engineering challenges include translating designs into robust, accessible, and responsive interfaces while maintaining code quality and performance.

Core Features & Use Cases

  • Build reusable React components with strong accessibility support.
  • Implement responsive layouts and theming with consistent design tokens.
  • Convert UI/UX designs into production-ready code for web apps and dashboards.

Quick Start

Create a polished React component that renders a responsive card with accessible labels and dark-mode support.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I convert UI designs into accessible React components?▼

To convert UI designs into accessible React components, the system translates visual concepts into reusable code with WCAG-compliant labels, responsive layouts, and TypeScript typing. It outputs production-ready components with consistent design tokens and maintainable styling.

What's the best way to build responsive layouts with consistent theming in React?▼

The best way to build responsive layouts with consistent theming is applying structured design tokens across your components. This approach ensures visual consistency while generating maintainable styling using CSS-in-JS or Tailwind, alongside strict TypeScript typing.

Can I use Tailwind and TypeScript together for component-based architecture?▼

Yes, you can use Tailwind and TypeScript together for component-based architecture. The system supports strict typing with TypeScript and maintainable styling using Tailwind, converting designs into robust, reusable React components.

Does this approach support WCAG-compliant accessibility for web dashboards?▼

Yes, this approach fully supports WCAG-compliant accessibility for web dashboards. It builds reusable React components with strong accessibility support, ensuring complex web applications and dashboards remain usable across responsive layouts and dark-mode themes.

Why does my frontend development bottleneck when translating designs into code?▼

Frontend development bottlenecks when translating designs into code due to challenges in maintaining robust accessibility, responsive interfaces, code quality, and performance simultaneously. The system solves this by outputting polished, production-ready React UIs.

Related Skills

Explore More Software Engineering Skills→
devalexanderdazadevalexanderdaza

bmad-create-ux-design

Generates a comprehensive UX design specification through a structured 14-step collaborative workflow.

Community
Advanced
gelsonsimoesgelsonsimoes

webapp-testing

Automate web application testing with Playwright to verify end-to-end functionality.

Community
Intermediate
diego-tobalinadiego-tobalina
1

frontend-patterns

Design React/Next.js frontend architecture with component composition and state management.

Community
Advanced
seb1nseb1n
147

Frontend Design

Generate responsive HTML, CSS, and React, Vue, or Svelte components with WCAG accessibility and dark mode.

Community
Advanced