Does it follow modern web accessibility standards?

Yes, it prioritizes WCAG AA contrast ratios, honors user preferences like prefers-reduced-motion, and ensures interactive states are clearly defined for all users.

Can it help with frontend performance?

Absolutely. It enforces the use of GPU-composited properties like transform and opacity for animations to avoid layout thrashing and ensure 60fps performance.

How does this skill improve generic UI looks?

It helps you move away from overused defaults like Inter or Roboto, providing specific guidance on intentional aesthetics, bold typography pairings, and unique spatial compositions that avoid the 'template' look.

What color space does this skill recommend?

It advocates for the use of oklch, which is more perceptually uniform and effective for creating programmatic palettes compared to traditional Hex or HSL values.

Frontend Design Expert

Name: Frontend Design Expert
Author: s-hiraoku

bys-hiraoku

0•

デザインツール

Creates distinctive, production-grade frontend interfaces with a focus on intentional aesthetics, accessibility, and modern CSS standards.

This skill transforms Claude into a high-end UI/UX consultant and frontend engineer, moving beyond generic templates to build sophisticated web interfaces. It provides specific guidance on advanced typography pairings, perceptually uniform color systems using oklch, GPU-accelerated motion principles, and responsive layouts using container queries. It is particularly useful for developers looking to establish a robust design system, review visual code quality, or implement unique 'signature' UI elements that enhance brand identity and user experience.

主な機能

01Accessibility-First Design Standards (WCAG AA)

02Advanced Typography & Font Pairing Strategy

030 GitHub stars

04Fluid Layouts using Container Queries and Clamp

05Oklch-based Semantic Color System Architecture

06GPU-Optimized Motion & Animation Guidelines

ユースケース

01Refactoring generic UI components into high-fidelity, branded interfaces

02Establishing a professional design system from scratch with semantic tokens

03Auditing frontend code for visual performance, accessibility, and design consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add s-hiraoku/synapse-a2a frontend-design

For use in Claude.ai and ChatGPT

Download Skill