Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

ui-design

Estrelas3

Forks1

Atualizado28 de janeiro de 2026 às 03:21

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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

thongdn-it

thongdn-it/react-agent-skills

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers de interfaces web e digitaisInformática e Matemática·SOC 15-1255

Explorador de arquivos

48 arquivos

SKILL.md

readonly

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

Mais deste repositório

mesmo repositório

feature-arch

thongdn-it/react-agent-skills

React feature-based architecture guidelines for scalable applications (formerly feature-architecture). This skill should be used when writing, reviewing, or refactoring React code to ensure proper feature organization. Triggers on tasks involving project structure, feature organization, module boundaries, cross-feature imports, data fetching patterns, or component composition.

2026-01-283

msw

thongdn-it/react-agent-skills

MSW (Mock Service Worker) best practices for API mocking in tests (formerly test-msw). This skill should be used when setting up MSW, writing request handlers, or mocking HTTP APIs. This skill does NOT cover general testing patterns (use test-vitest or test-tdd skills) or test methodology.

2026-01-283

nuqs

thongdn-it/react-agent-skills

nuqs (type-safe URL query state) best practices for Next.js applications. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, or Next.js routing with state.

2026-01-283

playwright

thongdn-it/react-agent-skills

Playwright testing best practices for Next.js applications (formerly test-playwright). This skill should be used when writing, reviewing, or debugging E2E tests with Playwright. Triggers on tasks involving test selectors, flaky tests, authentication state, API mocking, hydration testing, parallel execution, CI configuration, or debugging test failures.

2026-01-283

react-hook-form

thongdn-it/react-agent-skills

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, and useFieldArray. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

2026-01-283

react

thongdn-it/react-agent-skills

React 19 performance optimization guidelines for concurrent rendering, Server Components, actions, hooks, and memoization (formerly react-19). This skill should be used when writing React 19 components, using concurrent features, or optimizing re-renders. This skill does NOT cover Next.js-specific features like App Router, next.config.js, or Next.js caching (use nextjs-16-app-router skill). For client-side form validation with React Hook Form, use react-hook-form skill.

2026-01-283

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