How does it help with design consistency?

It audits your code for 'Grid Anarchy' and 'Typographic Chaos,' ensuring you use standardized spacing systems (like 8px grids) and modular font scales rather than random declarations.

Does it support accessibility requirements?

Yes, it treats WCAG AA accessibility as non-negotiable, auditing contrast ratios, focus indicators, and the use of semantic HTML and ARIA attributes.

Can it fix my layout automatically?

The skill provides exact CSS prescriptions and imperative instructions to fix visual violations, which can be implemented quickly to improve layout quality.

What is the Protocol Visual skill?

It is a specialized Claude Code capability that enforces strict aesthetic and functional standards for frontend development, focusing on CSS quality, UX, and design systems.

Visual Protocol & UI Enforcement

Name: Visual Protocol & UI Enforcement
Author: nalyk

bynalyk

•

设计工具

Enforces high-standard UI/UX principles and professional CSS styling through a cynical, opinionated audit framework.

The Visual Protocol skill transforms Claude into an uncompromising design critic, designed to eliminate 'design cowardice' and mediocre default styling. It operates on a 'Visual Triage' system to identify common frontend failures such as inconsistent spacing, typographic chaos, and accessibility neglect. By acting as an aesthetic dictator, it provides immediate, imperative CSS prescriptions that replace abstract advice with actionable code to ensure every pixel earns its place and every interface meets professional production standards.

主要功能

01Strict enforcement of WCAG AA accessibility standards and semantic HTML

02Systematic audits of spacing systems, typography scales, and color palettes

03Visual triage for identifying and diagnosing common UI/UX 'crimes'

04Imperative CSS prescriptions for rapid UI fixes and layout improvements

05Viewport denial prevention through mandatory responsive design checks

061 GitHub stars

使用场景

01Transforming a 'default' UI framework into a unique, professional design system

02Conducting deep-dive audits of existing CSS for consistency and responsiveness

03Refining user interactions, hover states, and dark mode implementations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nalyk/nalyk-skills-demo protocol-visual

For use in Claude.ai and ChatGPT

Download Skill