When is the best time to use this skill?

Use it during the initial UI design phase, when establishing a project’s design language, or when performing a design audit of existing frontend code.

Is accessibility handled automatically?

The skill includes strict rules for WCAG contrast ratios, visible focus states via :focus-visible, and mandatory support for prefers-reduced-motion in all animations.

How does this skill improve UI quality?

It helps Claude move beyond generic templates by enforcing specific typographic pairings, semantic color systems, and intentional spatial compositions that create a 'signature' look.

Does it support modern CSS features?

Yes, it prioritizes modern standards like OKLCH color spaces for better gradients, container queries for component-level responsiveness, and fluid typography using CSS clamp().

Frontend Design Pro

Name: Frontend Design Pro
Author: s-hiraoku

bys-hiraoku

0•

设计工具

Creates distinctive, production-grade frontend interfaces with advanced CSS, typography, and motion standards.

This skill empowers developers to move beyond generic templates by providing a framework for intentional, professional frontend execution. It guides Claude in establishing sophisticated design systems using modern CSS techniques like OKLCH color spaces, fluid typography, and container queries, while ensuring high standards for accessibility and performance. It is particularly useful for building brand-aligned UI components, reviewing visual code quality, and implementing complex animations that respect user preferences and GPU optimization.

主要功能

01Advanced Typography Selection & Implementation

02GPU-Optimized Motion & Animation Guidelines

03Accessibility-First Design Patterns

04Comprehensive Interactive State Standards

050 GitHub stars

06Semantic Color Systems with OKLCH Support

07Modern Spatial Composition & Responsive Layouts

使用场景

01Implementing sophisticated, brand-specific UI components and layouts

02Auditing existing frontend code for visual quality and performance

03Building a custom design system from scratch with semantic tokens

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