What is the Canvas visual design layer?

It refers to a philosophy-driven approach to visual communication that emphasizes sophisticated compositions, refined aesthetics, and systematic patterns over text-heavy layouts.

Does this skill support frameworks other than React?

While specifically optimized for React-based frameworks due to shadcn/ui's architecture, the Tailwind CSS utilities and visual design principles can be adapted for any modern web environment.

How does it handle web accessibility (a11y)?

It leverages Radix UI primitives within shadcn/ui to ensure components follow ARIA patterns, support screen readers, manage focus, and provide robust keyboard navigation by default.

Can I use this for implementing dark mode?

Yes, it provides standardized patterns for dark mode implementation using Tailwind's dark variant and CSS variable systems for consistent color transitions.

Modern UI & shadcn/ui Styling

Name: Modern UI & shadcn/ui Styling
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

デザインツール

Creates beautiful, accessible user interfaces using shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

This skill provides a comprehensive toolkit for building production-grade frontends by combining the accessibility of Radix UI primitives, the flexibility of shadcn/ui, and the speed of Tailwind CSS. It enables Claude to implement responsive, mobile-first layouts, complex UI patterns like data tables and command palettes, and sophisticated dark mode transitions. Whether you are establishing a design system or rapid prototyping with React-based frameworks, this skill ensures consistent styling tokens, WCAG-compliant accessibility, and high-quality visual compositions.

主な機能

01Utility-first styling with Tailwind CSS for rapid, maintainable development

020 GitHub stars

03Canvas-based visual design philosophy for sophisticated, museum-quality aesthetics

04Seamless integration of shadcn/ui components and Radix UI primitives

05Advanced accessibility patterns including keyboard navigation and ARIA support

06Comprehensive theming system with dark mode and CSS variable customization

ユースケース

01Building responsive web applications with Next.js, Vite, or Remix

02Rapidly prototyping complex UI elements like validated forms and data tables

03Developing accessible and reusable design systems for engineering teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw ui-styling

For use in Claude.ai and ChatGPT

主な機能

01Utility-first styling with Tailwind CSS for rapid, maintainable development

020 GitHub stars

03Canvas-based visual design philosophy for sophisticated, museum-quality aesthetics

04Seamless integration of shadcn/ui components and Radix UI primitives

05Advanced accessibility patterns including keyboard navigation and ARIA support

06Comprehensive theming system with dark mode and CSS variable customization

ユースケース

01Building responsive web applications with Next.js, Vite, or Remix

02Rapidly prototyping complex UI elements like validated forms and data tables

03Developing accessible and reusable design systems for engineering teams