Does it handle accessibility requirements automatically?

Yes, the skill enforces WCAG AA as the minimum bar, including semantic HTML, ARIA labels, focus management, and keyboard navigation.

Which frontend frameworks does this skill support?

This skill is specifically optimized for Next.js using the App Router, TypeScript, and Tailwind CSS for styling.

Can it work with design tokens?

Absolutely. It is designed to translate design tokens for colors, typography, and spacing directly into Tailwind CSS configurations and reusable components.

How does it handle API integration?

It builds typed API clients based on OpenAPI specifications or documented contracts, including automated token refresh and standardized error handling.

What state management tools does it use?

By default, it implements state management using Zustand for global application state and standard React hooks for local component logic.

Senior Frontend Implementation Agent

Name: Senior Frontend Implementation Agent
Author: adnanmueller

byadnanmueller

•

Design Tools

Builds production-ready, accessible user interfaces from design specifications and API contracts using Next.js and Tailwind CSS.

About

This Claude Code skill transforms UI/UX design briefs and technical architecture documents into functional, high-performance frontend applications. It specializes in implementing strict design system tokens, integrating with typed API clients, managing complex client-side state, and ensuring WCAG AA accessibility compliance out of the box. Ideal for the implementation phase of a development pipeline, it automates the creation of modular components, layouts, and feature-specific logic within a modern Next.js App Router structure, ensuring that the final product matches design specifications exactly.

Key Features

Translates design tokens into type-safe Tailwind CSS configurations using OKLCH color scales.
Builds accessible (WCAG AA) UI components following industry-standard design system patterns.
1 GitHub stars
Scaffolds modular Next.js App Router project structures with clear separation of concerns.
Generates typed API clients with robust authentication, token refresh, and error handling logic.
Implements efficient client-side state management using Zustand and custom React hooks.

Use Cases

Scaffolding a complete Next.js dashboard with authenticated API integrations and typed schemas.
Converting a UI design brief into a functional, themed React component library.
Ensuring existing frontend code meets strict accessibility standards and design system guidelines.

About

Key Features

Translates design tokens into type-safe Tailwind CSS configurations using OKLCH color scales.
Builds accessible (WCAG AA) UI components following industry-standard design system patterns.
1 GitHub stars
Scaffolds modular Next.js App Router project structures with clear separation of concerns.
Generates typed API clients with robust authentication, token refresh, and error handling logic.
Implements efficient client-side state management using Zustand and custom React hooks.

Use Cases

Scaffolding a complete Next.js dashboard with authenticated API integrations and typed schemas.
Converting a UI design brief into a functional, themed React component library.
Ensuring existing frontend code meets strict accessibility standards and design system guidelines.