skills.rest
Denissvgn
DenissvgnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Translate design specs and user stories into reusable frontend components and pages.

Updated Jan 14, 2026
Search Tags:#React#frontend#CSS#HTML#Vue#UI components#responsive-design
One-click install
npx skills add https://github.com/Denissvgn/project-team-ag --skill frontend-dev-denissvgn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/Denissvgn/project-team-ag/tree/main/.agent/skills/frontend-dev
Command: npx skills add https://github.com/Denissvgn/project-team-ag --skill frontend-dev-denissvgn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill accelerates frontend delivery by turning design specs and user stories into reusable UI components, pages, and client-side logic, reducing time-to-delivery and iteration cycles.

Core Features & Use Cases

  • Reusable UI components: Build modular components that can be composed across pages.
  • Page implementation: Create responsive, accessible pages that match the design system.
  • API integration & state management: Connect to backend services with typed contracts and manage client-side state efficiently.
  • Use Case: Given DS specifications, AR architecture, and AN user stories, implement a new feature's frontend end-to-end.

Quick Start

Provide a design spec, user stories, and API contracts to the Frontend Developer. The skill will generate components, pages, and client logic that align with the spec.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I turn design specs and user stories into reusable React UI components?▼

To build reusable React UI components from design specs, provide the design specifications and user stories to generate modular frontend code. This translates visual requirements into composable UI elements, reducing iteration cycles and accelerating frontend delivery.

What is the best way to implement responsive frontend pages from design system specifications?▼

The best way to implement responsive frontend pages is by translating design system specifications into accessible page layouts. This approach ensures pages match the design system while handling client-side logic and UI component composition for modern web apps.

Can I use this approach for Vue and HTML frontend feature development?▼

Yes, you can use this approach for Vue and HTML frontend feature development. The skill applies to UI implementation and feature development across modern web apps, supporting standard frontend ecosystems like React and Vue to produce component code and page layouts.

How do I connect frontend components to backend services with typed API contracts?▼

To connect frontend components to backend services, integrate using typed API contracts to manage client-side state efficiently. This ensures reliable API integration and state management, producing client-side logic that aligns with standard frontend ecosystems.

What inputs do I need to provide to generate frontend code end-to-end?▼

You need to provide design specifications, architecture details, and user stories to generate frontend code end-to-end. Supplying API contracts alongside these inputs allows the generation of components, pages, and client logic that align with the spec.

Related Skills

Explore More Software Engineering Skills→
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
yyds-xyyds-x

web-development

Develop web frontend projects and deploy static hosting with CloudBase Web SDK.

Community
Intermediate
kibertoadkibertoad
1

add-api-query

Automate data fetching and mutation with API contracts, typed HTTP client, and React Query.

Community
Intermediate
jasonkneenjasonkneen
471

frontend-design

Construct frontend UIs with HTML, CSS, and JavaScript for responsive layouts.

Community
Intermediate