Skills
.Work. You
Rest

web-frontend-standards

Community

Build accessible, performant web UIs.

Design & Creative#accessibility#web development#WCAG#frontend#design system#dark mode#PWA
Authorseqis
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive set of standards and best practices for building modern, accessible, and performant web frontends, ensuring consistency and quality across projects.

Core Features & Use Cases

  • Design Tokens: Establishes a foundation for color, typography, and spacing using CSS variables, crucial for theming and consistency.
  • Dark Mode: Offers detailed guidance and CSS overrides for implementing a robust dark mode experience.
  • Accessibility (WCAG): Outlines contrast ratios, focus indicator requirements, and reduced motion preferences.
  • PWA Best Practices: Includes manifest and meta tag configurations for Progressive Web Apps.
  • Component Patterns: Provides foundational CSS for common UI elements like buttons, cards, and inputs.
  • Use Case: When starting a new web application, consult this skill to define your design system's core tokens and ensure accessibility compliance from the outset.

Quick Start

Apply the provided CSS variables for color, typography, and spacing to your project's root stylesheet.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-frontend-standards
Download link: https://github.com/seqis/OpenClaw-Skills-Converted-From-Claude-Code/archive/main.zip#web-frontend-standards

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.