What CSS technologies does this skill specialize in?

The skill focuses on modern CSS standards including custom properties (CSS variables), container queries, clamp() for fluid units, and GPU-composited animations.

Does it prioritize accessibility in its design guidance?

Yes, it enforces WCAG AA contrast ratios, honors prefers-reduced-motion settings, and ensures proper focus-visible states for keyboard navigation.

Can I use this for auditing my current frontend project?

Absolutely. It includes an Anti-Patterns guide to help you identify and correct common mistakes like uniform grids, identical hover effects, or excessive shadows.

How does this skill improve generic AI-generated code?

It replaces common 'template' styles with intentional typography, shifts from standard hex/HSL to modern OKLCH color spaces, and applies sophisticated spatial principles like asymmetry and fluid scaling.

Frontend Design Expert

Name: Frontend Design Expert
Author: s-hiraoku

bys-hiraoku

0•

デザインツール

Creates distinctive, production-grade frontend interfaces with intentional aesthetics and professional execution.

This skill transforms Claude into a high-level frontend architect, moving beyond generic templates to create sophisticated, accessible, and performant web interfaces. It provides comprehensive guidance on modern CSS techniques like OKLCH color spaces, fluid typography with clamp(), and container queries, while enforcing strict best practices for motion, accessibility (WCAG AA), and interactive states. Whether you are establishing a new design system from scratch or reviewing existing code for visual quality, this skill ensures every UI element is purposeful, responsive, and memorable.

主な機能

01Spatial composition techniques using container queries and intentional asymmetry.

02Modern color architecture using perceptually uniform OKLCH and semantic tokens.

03Advanced typography systems including fluid scaling and tabular numeric alignment.

04Performance-first motion rules emphasizing GPU-composited transforms and accessibility.

05Standardized interactive state patterns for hover, focus, and active elements.

060 GitHub stars

ユースケース

01Reviewing existing frontend code to identify and fix visual anti-patterns.

02Implementing complex, responsive layouts that maintain visual depth and hierarchy.

03Building a distinctive design system from scratch with a specific aesthetic tone.

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