web-design-guidelines

스타1

포크0

업데이트2026년 4월 1일 20:38

Web interface design guidelines for building polished, accessible, and intuitive user interfaces.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

RevealUIStudio

RevealUIStudio/revcon

다운로드

Web Design Guidelines

Refer to the official documentation for comprehensive guidance:

Design with spatial consistency: use a fixed spacing scale (4px/8px grid), consistent border radii, and predictable padding so the interface feels cohesive rather than ad hoc
Prioritize accessibility from the start: use semantic HTML elements, ensure sufficient color contrast (WCAG AA minimum), provide visible focus indicators, and support keyboard navigation for all interactive elements
Respect motion preferences: wrap animations in prefers-reduced-motion media queries, keep transitions under 200ms for micro-interactions, and avoid layout shifts that disrupt reading flow
Use progressive disclosure: show only essential information by default and reveal details on demand through expandable sections, tooltips, or drill-down views rather than overwhelming the user upfront
Maintain typographic hierarchy: limit to 2-3 font sizes per view, use weight and color (not just size) to establish importance, and ensure body text has a comfortable line height (1.5-1.75) and line length (45-75 characters)

이 저장소의 다른 Skills

같은 저장소

Create and apply Drizzle ORM migrations against the single Neon-primary PostgreSQL database

Run the 15-check pre-launch preflight and interpret results with context-aware fix suggestions

Next.js App Router best practices for routing, data fetching, rendering, and optimization.

Next.js Cache Components, 'use cache' directive, PPR, cacheLife, cacheTag, and migration from unstable_cache.

Turborepo monorepo task orchestration, caching, and pipeline configuration guidance.

React composition patterns for building maintainable, reusable component architectures.

name	web-design-guidelines
description	Web interface design guidelines for building polished, accessible, and intuitive user interfaces.

Refer to the official documentation for comprehensive guidance:

Design with spatial consistency: use a fixed spacing scale (4px/8px grid), consistent border radii, and predictable padding so the interface feels cohesive rather than ad hoc
Prioritize accessibility from the start: use semantic HTML elements, ensure sufficient color contrast (WCAG AA minimum), provide visible focus indicators, and support keyboard navigation for all interactive elements
Respect motion preferences: wrap animations in prefers-reduced-motion media queries, keep transitions under 200ms for micro-interactions, and avoid layout shifts that disrupt reading flow
Use progressive disclosure: show only essential information by default and reveal details on demand through expandable sections, tooltips, or drill-down views rather than overwhelming the user upfront
Maintain typographic hierarchy: limit to 2-3 font sizes per view, use weight and color (not just size) to establish importance, and ensure body text has a comfortable line height (1.5-1.75) and line length (45-75 characters)