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)