skills.rest
krzysztofsurdy
krzysztofsurdyCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Implement UI components, integrate backend APIs, and ensure accessibility and responsive behavior.

20|1|Updated Feb 26, 2026
Search Tags:#performance#accessibility#frontend#react#vue#ui development#component architecture
One-click install
npx skills add https://github.com/krzysztofsurdy/code-virtuoso --skill frontend-dev-krzysztofsurdy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/krzysztofsurdy/code-virtuoso/tree/main/skills/roles/frontend-dev
Command: npx skills add https://github.com/krzysztofsurdy/code-virtuoso --skill frontend-dev-krzysztofsurdy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of translating design specifications into functional, accessible, and performant user interfaces, ensuring a high-quality user experience.

Core Features & Use Cases

  • UI Component Implementation: Develop reusable and maintainable frontend components.
  • API Integration: Seamlessly connect frontend interfaces with backend services.
  • Accessibility & Responsiveness: Ensure UIs are usable by everyone across all devices.
  • Use Case: Implement a new dashboard feature by breaking down the design into components, integrating with the provided API endpoints, and ensuring it looks great on both desktop and mobile.

Quick Start

Use the frontend-dev skill to implement the user interface for the new product listing page based on the provided design mockups.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I translate design specifications into accessible UI components?▼

Translating design specs into accessible UI components requires breaking down designs into reusable parts, adhering to component architecture guides, and applying accessibility checklists to ensure usability across all devices.

What is the best way to integrate frontend interfaces with backend APIs?▼

The best way to integrate frontend interfaces with backend APIs involves mapping API endpoints to UI state, ensuring seamless data fetching, and maintaining performance best practices during component rendering.

How do I build responsive React or Vue components for a new dashboard feature?▼

Building responsive React or Vue dashboard components involves developing maintainable UI structures, integrating provided API endpoints, and verifying responsive behavior across desktop and mobile viewports.

Does this approach to UI development support both accessibility and performance optimization?▼

Yes, this UI development approach explicitly supports both aspects by enforcing accessibility checklists and applying performance best practices to deliver functional, responsive user interfaces.

When should I focus on component architecture during frontend development?▼

You should focus on component architecture during frontend development whenever translating design mockups into functional code to ensure components remain maintainable, reusable, and performant.

Related Skills

Explore More Software Engineering Skills→
VeradelaCruzVeradelaCruz

api-design

Define API requirements and generate OpenAPI or GraphQL schemas.

Community
Intermediate
jx1100370217jx1100370217
4

ios-ui-ux-design

Design iOS interfaces following Apple's Human Interface Guidelines.

Community
Basic
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate