skills.rest
adnanmueller
adnanmuellerCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend-engineer

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

2|Updated Dec 24, 2025
Search Tags:#testing#frontend#design-system#ui-components#api-contracts#accessible-ui
One-click install
npx skills add https://github.com/adnanmueller/am-dev-plugins --skill senior-frontend-engineer-adnanmueller
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend-engineer
Source: https://github.com/adnanmueller/am-dev-plugins/tree/main/plugins/development-pipeline/agents/03b-frontend
Command: npx skills add https://github.com/adnanmueller/am-dev-plugins --skill senior-frontend-engineer-adnanmueller

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate design specifications and API contracts into production-ready frontend interfaces.

Core Features & Use Cases

  • UI component implementation that matches design specs
  • API integration using documented contracts
  • Accessibility and testing to ensure quality and inclusivity

Quick Start

Provide a design brief and API contract, and begin implementing the frontend according to the design system.

Frequently Asked Questions about senior-frontend-engineer

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

FAQPage Schema
How do I translate design specs into production-ready Next.js UI components?▼

To translate design specs into production-ready Next.js UI components, provide a design brief and API contract. The system enforces a structured project layout and design-system compliance to build accessible interfaces.

How do I integrate backend APIs into a frontend using typed API contracts?▼

Integrate backend APIs into a frontend using typed API contracts by supplying documented contracts during implementation. This ensures robust validation, manages client state, and enforces strict typing across your Next.js application.

Can I enforce accessibility and test coverage when implementing frontend interfaces?▼

Yes, you can enforce accessibility and test coverage when implementing frontend interfaces. The process automatically applies accessibility tests and robust validation to ensure quality and inclusivity across all generated UI components.

Do I need a design system to build UI components with typed API contracts?▼

Yes, a design system is required to build UI components with typed API contracts. The workflow enforces design-system compliance to ensure generated Next.js interfaces match your specifications and maintain visual consistency.

What is the best way to manage client state in a Next.js app with API contracts?▼

The best way to manage client state in a Next.js app with API contracts involves integrating documented backend APIs. This approach enforces typed contracts and robust validation, ensuring reliable state synchronization across your frontend interfaces.

Related Skills

Explore More Software Engineering Skills→
kernex-devkernex-dev
1

backend-architect

Design backend APIs, data models, and service architectures with endpoint contracts and auth rules.

Official
Advanced
genlayerlabsgenlayerlabs
10

verify

Run lint, typecheck, tests, build, and npm audits for the intelligent-oracle project.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
fabioc-alohafabioc-aloha
1

API Documentation Skill

Scaffold technical documentation projects with templates for API endpoints and guides.

Community
Intermediate