Web Design Guidelines
Builds and audits documentation UIs using React, TypeScript, and Tailwind CSS following strict design system rules.
Web Design Guidelines provides comprehensive standards and auditing capabilities for engineering clean, accessible documentation interfaces. It enforces a Tailwind-first, mobile-first design system with strict rules on component structure, whitespace, loading skeletons, and motion handling—preferring pure CSS animations and isolating Framer Motion strictly to client leaves. Whether bootstrapping a new docs UI from scratch or performing line-by-line accessibility and design guideline audits on existing React/Next.js codebases, this skill ensures interfaces remain fast, accessible, and free of anti-pattern marketing clutter.
Características Principales
010 GitHub stars
02Built-in accessibility enforcement covering button interactions, image alt attributes, and focus states
03Tailwind-first styling rules prioritizing mobile responsiveness and unified design tokens
04Dual-mode support for building new documentation UIs or auditing existing codebases
05Strict motion architecture enforcing CSS-based animations and client-only Framer Motion leaves
06Detailed line-by-line audit reports highlighting anti-patterns, missing skeletons, and layout issues
Casos de Uso
01Auditing existing Next.js and React frontend components for accessibility, styling, and design token compliance
02Refactoring heavy Framer Motion implementations into lightweight Tailwind CSS transitions and server-friendly layouts
03Scaffolding clean, modern documentation portals using React, TypeScript, and Tailwind CSS