Does this skill help with CSS and styling?

Yes, it covers a wide range of styling approaches including Tailwind CSS, CSS Modules, styled-components, Emotion, and Vanilla Extract.

Is this skill useful for existing codebases?

Yes, it includes strategies for refactoring legacy components into modern patterns and solving common issues like prop explosion and re-render cascades.

Which frontend frameworks are supported by this skill?

The skill provides specialized patterns and implementation examples for React, Vue 3, and Svelte 5, including framework-specific features like Composables and Runes.

Can I use this to build accessible components?

Absolutely. One of the core principles of this skill is ensuring components are accessible by default through proper ARIA attributes and keyboard navigation support.

Web Component Design

Name: Web Component Design
Author: duanbiao2000

byduanbiao2000

0•

Design Tools

Architects high-quality, reusable UI components using modern frameworks like React, Vue, and Svelte with advanced composition patterns.

This skill empowers developers to build scalable design systems and professional UI component libraries by providing expert guidance on modern frontend architecture. It covers advanced patterns such as compound components, render props, and slots, while offering deep integration with styling solutions like Tailwind CSS and CSS-in-JS. Whether you are refactoring legacy code or starting a new design system, this skill ensures your components are accessible, maintainable, and follow industry best practices across all major JavaScript frameworks.

Key Features

01Comprehensive styling strategies including Tailwind CSS, CSS-in-JS, and CSS Modules

02Implementation of advanced composition patterns like Compound Components and Render Props

03Accessible-by-default API design principles with ARIA and keyboard support

04Framework-specific optimization for React hooks, Vue 3 composables, and Svelte 5 runes

05Best practices for component prop design, memoization, and error boundaries

060 GitHub stars

Use Cases

01Refactoring complex frontend logic into clean, reusable component patterns

02Building a shared enterprise design system or UI component library

03Designing consistent and type-safe component APIs for large-scale applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add duanbiao2000/obsidiandoc26 web-component-design

For use in Claude.ai and ChatGPT

Download Skill