Can I use it for marketing or landing pages?

Yes, it includes a specific 'Visually Led Surfaces' track that prioritizes composition, imagery, and art direction over standard utility-first product layouts.

Does this skill support the latest React features?

Yes, it is updated for React 19 and Next.js 16 patterns, emphasizing modern client and server component best practices.

How does it handle web accessibility?

It enforces WCAG 2.2 AA standards by default, requiring explicit focus behavior, keyboard navigation, and semantic naming in every UI deliverable.

What styling systems are supported?

While it treats Tailwind CSS v4 as the baseline system, it is designed to adapt to host project token conventions and W3C design token structures.

Frontend UI Design

Name: Frontend UI Design
Author: jscraik

byjscraik

•

デザインツール

Architects production-ready, accessible frontend components and screens using modern React, Next.js, and Tailwind CSS patterns.

The Frontend UI Design skill transforms Claude into a senior product designer and frontend engineer capable of delivering high-fidelity, implementation-ready interfaces. It moves beyond generic layouts by enforcing strict standards for React 19, Next.js 16, and Tailwind CSS v4, while ensuring all outputs meet WCAG 2.2 AA accessibility requirements. Whether crafting visually-led landing pages or utility-heavy product dashboards, the skill provides structured workflows for state mapping, token-based styling, and design-system alignment to bridge the gap between design requirements and production code.

主な機能

012 GitHub stars

02Native support for Tailwind CSS v4 tokens and utility-first styling.

03Specialized workflows for distinguishing branded landing pages from utility product UI.

04Strict WCAG 2.2 AA accessibility compliance and keyboard navigation mapping.

05Comprehensive state modeling including loading, empty, error, and edge cases.

06Production-ready scaffolding for React 19 and Next.js 16 environments.

ユースケース

01Redesigning legacy product screens to improve visual hierarchy and token consistency.

02Building high-impact landing pages with a defined visual thesis and interaction plan.

03Scaffolding complex, accessible UI components like multi-step forms or data tables.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills frontend-ui-design

For use in Claude.ai and ChatGPT

主な機能

012 GitHub stars

02Native support for Tailwind CSS v4 tokens and utility-first styling.

03Specialized workflows for distinguishing branded landing pages from utility product UI.

04Strict WCAG 2.2 AA accessibility compliance and keyboard navigation mapping.

05Comprehensive state modeling including loading, empty, error, and edge cases.

06Production-ready scaffolding for React 19 and Next.js 16 environments.

ユースケース

01Redesigning legacy product screens to improve visual hierarchy and token consistency.

02Building high-impact landing pages with a defined visual thesis and interaction plan.

03Scaffolding complex, accessible UI components like multi-step forms or data tables.