ui-design

UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.

インストールへ移動

リポジトリ: pproenca/dot-skills
ソースの最終更新活動: 2026年5月14日 18:16
検出された SKILL.md の言語: 英語
スター: 194
フォーク: 17

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/pproenca/dot-skills --skill ui-design

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

48 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

drizzle-nextjs-postgres

Drizzle ORM against PostgreSQL inside a Next.js App Router app. Covers client construction (globalThis singleton across HMR, serverless pool sizing, `prepare:false` behind PgBouncer/Supavisor, driver choice when you need interactive transactions, `server-only`), reads in Server Components under Next.js 16 Cache Components (`use cache` superseding `unstable_cache` and the `revalidate`/`dynamic` segment configs, Suspense boundaries, React `cache()` dedupe), Server Actions (authorization inside the action, `updateTag` vs `revalidateTag`, `after()`), Postgres schema types (timestamptz, identity vs serial, jsonb, numeric-as-string, bigint modes), drizzle-kit migrations (generate vs push, CONCURRENTLY outside the migrator, NOT VALID constraints, rename prompts), transactions and pooled connections, and Postgres query traps (keyset pagination, count cost, driver-dependent `db.execute()` shape, NOT IN nulls, prepared statements). Use when writing or reviewing Drizzle + Postgres code in Next.js.

2026-07-24

relational-data-modeling

Corrects the wrong defaults a model has when designing a relational schema — the DDL decisions an experienced engineer makes differently. Use when creating or reviewing tables, migrations, ER models, or ORM schema definitions. Covers identity and keys (surrogate vs natural, identity vs serial, uuidv7, composite keys that make cross-tenant references impossible), relationships (polymorphic foreign keys the database cannot enforce, referential actions, unindexed FK columns, disjoint subtypes), invariants the engine can prove instead of application code (EXCLUDE, partial unique indexes, CHECK limits, deferrable cycles, NOT VALID), types (timestamptz, exact money, range types, enum vs lookup table), derived and encoded data (generated columns, JSONB as an escape hatch), and time (events vs in-place updates, soft-delete flags that silently disable constraints, temporal keys). NOT for query tuning, index selection for read paths, or connection pooling.

2026-07-23

relational-database-design

Distills a logical relational-database design methodology into rules an agent applies while designing or reviewing a schema. Covers the design sequence (mission → tables → fields → keys → relationships → business rules → views → integrity review), one-subject-per-table decomposition, atomic single-valued fields, candidate/primary/foreign keys, relationship types with deletion rules and participation, the four levels of data integrity, database-vs-application business rules, validation tables, views for derived data, and the flat-file / spreadsheet / RDBMS-driven antipatterns to avoid. The structure is logical and RDBMS-agnostic, and normalized by construction. Use when designing a new relational schema, reviewing or refactoring an existing one, resolving redundant or repeating data, choosing keys, modeling relationships, or deciding where a constraint belongs.

2026-07-23

このリポジトリのすべてを見る

name	ui-design
description	UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.

UI/UX Best Practices Frontend Design

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.

When to Apply

Reference these guidelines when:

Structuring HTML for accessibility and semantics
Writing CSS for responsive layouts and visual hierarchy
Optimizing images and fonts for Core Web Vitals
Designing forms with proper validation and error handling
Adding animations and interactive elements

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Accessibility & WCAG Compliance	CRITICAL	`access-`
2	Core Web Vitals Optimization	CRITICAL	`cwv-`
3	Visual Hierarchy & Layout	HIGH	`layout-`
4	Responsive & Mobile-First Design	HIGH	`resp-`
5	Typography & Font Loading	MEDIUM-HIGH	`typo-`
6	Color & Contrast	MEDIUM	`color-`
7	Forms & Validation UX	MEDIUM	`form-`
8	Animation & Performance	LOW-MEDIUM	`anim-`

Quick Reference

1. Accessibility & WCAG Compliance (CRITICAL)

access-semantic-html - Use semantic HTML elements for screen readers
access-keyboard-navigation - Ensure full keyboard navigation
access-focus-indicators - Provide visible focus indicators
access-alt-text - Provide meaningful alt text for images
access-aria-labels - Use ARIA labels for icon-only controls
access-target-size - Ensure minimum touch target size (24×24px)
access-heading-hierarchy - Maintain logical heading hierarchy

2. Core Web Vitals Optimization (CRITICAL)

cwv-optimize-lcp - Optimize Largest Contentful Paint under 2.5s
cwv-minimize-cls - Minimize Cumulative Layout Shift under 0.1
cwv-improve-inp - Improve Interaction to Next Paint under 200ms
cwv-responsive-images - Serve responsive images with srcset
cwv-lazy-load-offscreen - Lazy load offscreen images and iframes
cwv-critical-css - Inline critical CSS and defer the rest

3. Visual Hierarchy & Layout (HIGH)

layout-visual-hierarchy - Establish clear visual hierarchy
layout-whitespace - Use whitespace to improve readability
layout-f-pattern - Design for F-pattern reading behavior
layout-grid-system - Use a consistent grid system
layout-single-cta - Limit to one primary CTA per screen
layout-proximity-grouping - Group related elements with proximity

4. Responsive & Mobile-First Design (HIGH)

resp-mobile-first - Design mobile-first with min-width queries
resp-fluid-typography - Use fluid typography with clamp()
resp-container-queries - Use container queries for components
resp-touch-targets - Size touch targets for mobile (44×44px)
resp-viewport-meta - Configure viewport meta tag correctly

5. Typography & Font Loading (MEDIUM-HIGH)

typo-font-display - Use font-display to control loading behavior
typo-preload-fonts - Preload critical web fonts
typo-readable-line-length - Constrain line length (45-75ch)
typo-line-height - Set appropriate line height (1.5-1.7)
typo-system-font-stack - Use system font stack for UI elements

6. Color & Contrast (MEDIUM)

color-contrast-ratio - Meet WCAG contrast ratio requirements (4.5:1)
color-not-only-indicator - Never use color alone to convey information
color-dark-mode - Support dark mode with prefers-color-scheme
color-semantic-palette - Use semantic color names in design tokens

7. Forms & Validation UX (MEDIUM)

form-inline-validation - Use inline validation after field blur
form-error-messages - Write actionable error messages
form-labels-above - Place labels above input fields
form-input-types - Use correct HTML input types for mobile
form-autocomplete - Enable browser autocomplete with correct attributes

8. Animation & Performance (LOW-MEDIUM)

anim-gpu-properties - Animate only GPU-accelerated properties
anim-will-change - Use will-change sparingly for animation hints
anim-reduced-motion - Respect user motion preferences
anim-duration-easing - Use appropriate animation duration and easing

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
Example: access-semantic-html

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

ui-design

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

UI/UX Best Practices Frontend Design

When to Apply

Rule Categories by Priority

Quick Reference

1. Accessibility & WCAG Compliance (CRITICAL)

2. Core Web Vitals Optimization (CRITICAL)

3. Visual Hierarchy & Layout (HIGH)

4. Responsive & Mobile-First Design (HIGH)

5. Typography & Font Loading (MEDIUM-HIGH)

6. Color & Contrast (MEDIUM)

7. Forms & Validation UX (MEDIUM)

8. Animation & Performance (LOW-MEDIUM)

How to Use

Full Compiled Document

UI/UX Best Practices Frontend Design

When to Apply

Rule Categories by Priority

Quick Reference

1. Accessibility & WCAG Compliance (CRITICAL)

2. Core Web Vitals Optimization (CRITICAL)

3. Visual Hierarchy & Layout (HIGH)

4. Responsive & Mobile-First Design (HIGH)

5. Typography & Font Loading (MEDIUM-HIGH)

6. Color & Contrast (MEDIUM)

7. Forms & Validation UX (MEDIUM)

8. Animation & Performance (LOW-MEDIUM)

How to Use

Full Compiled Document