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

•

デザインツール

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

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.

主な機能

01Translates design tokens into type-safe Tailwind CSS configurations using OKLCH color scales.

02Builds accessible (WCAG AA) UI components following industry-standard design system patterns.

031 GitHub stars

04Scaffolds modular Next.js App Router project structures with clear separation of concerns.

05Generates typed API clients with robust authentication, token refresh, and error handling logic.

06Implements efficient client-side state management using Zustand and custom React hooks.

ユースケース

01Scaffolding a complete Next.js dashboard with authenticated API integrations and typed schemas.

02Converting a UI design brief into a functional, themed React component library.

03Ensuring existing frontend code meets strict accessibility standards and design system guidelines.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adnanmueller/am-dev-plugins 03b-frontend

For use in Claude.ai and ChatGPT

Download Skill