Toolverse
All skills

ui-web

by alinaqi

Web UI - glassmorphism, Tailwind, dark mode, accessibility

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
alinaqi
Category
Security
Views
1

About this skill

Web UI - glassmorphism, Tailwind, dark mode, accessibility

How to use

  1. Załaduj skill razem z plikami base.md i react-web.md w swoim projekcie Claude Bootstrap.

  2. Zrozum obowiązkowe wymagania dostępności: każdy element interfejsu musi spełniać standard WCAG 2.1 AA, szczególnie kontrast tekstu (4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu) i widoczne granice przycisków.

  3. Stosuj bezpieczne kombinacje kolorów z Tailwind CSS — używaj gray-700 lub ciemniejszych na białym tle, unikaj kombinacji takich jak gray-400 na białym (kontrast 2,6:1 to za mało).

  4. Projektuj przyciski z obowiązkowym tłem lub widoczną ramką (minimum 1px), wysokością co najmniej 44px i paddingiem px-4 py-2 — nigdy nie twórz przycisków z przezroczystym tłem bez ramki.

  5. Implementuj komponenty pierwotne (solid background), wtórne (widoczne tło) i ghost (widoczna ramka) zgodnie z szablonami zawartymi w skill, zapewniając konsystentny wygląd i dostępność.

  6. Testuj każdy element pod kątem kontrastu kolorów i widoczności, aby potwierdzić zgodność z WCAG 2.1 AA przed wdrożeniem w projekcie.

Related skills

academic-researcher

by Shubhamsaboo

Academic research assistant for literature reviews, paper analysis, and scholarly writing.\nUse when: reviewing academic papers, conducting literature reviews, writing research summaries,\nanalyzing methodologies, formatting citations, or when user mentions academic research,

Security
1260

reverse-engineering-tools

by gmh5225

Guide for reverse engineering tools and techniques used in game security research. Use this skill when working with debuggers, disassemblers, memory analysis tools, binary analysis, or decompilers for game security research.

Security
3168

google-analytics

by davila7

Analyze Google Analytics data, review website performance metrics, identify traffic patterns, and suggest data-driven improvements. Use when the user asks about analytics, website metrics, traffic analysis, conversion rates, user behavior, or performance optimization.

Security
1260

security-compliance

by davila7

Guides security professionals in implementing defense-in-depth security architectures, achieving compliance with industry frameworks (SOC2, ISO27001, GDPR, HIPAA), conducting threat modeling and risk assessments, managing security operations and incident response, and embedding

Security
1172

solidity-security

by wshobson

Master smart contract security best practices to prevent common vulnerabilities and implement secure Solidity patterns. Use when writing smart contracts, auditing existing contracts, or implementing security measures for blockchain applications.

Security
10105

senior-security

by davila7

Comprehensive security engineering skill for application security, penetration testing, security architecture, and compliance auditing. Includes security assessment tools, threat modeling, crypto implementation, and security automation. Use when designing security architecture,

Security
2482