Frontend ui ux

Skill erkandogan/oh-my-team/skills/frontend-ui-ux

Frontend and UI/UX development guidance. Provides patterns for responsive design, accessibility, component architecture, state management, and visual consistency. Load this skill when working on any frontend task.From its SKILL.md

Install

npx -y skills add erkandogan/oh-my-team --skill frontend-ui-ux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

17 stars17 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.6 KB, as published. Nobody here has run it

Frontend UI/UX Development Guide

When working on frontend code, follow these principles:

Component Architecture

Single Responsibility: Each component does one thing well
Composition over inheritance: Build complex UIs from simple, composable pieces
Props down, events up: Data flows down, actions flow up
Colocation: Keep styles, tests, and types near their component

Responsive Design

Mobile-first: Start with the smallest breakpoint, enhance up
Fluid layouts: Use relative units (rem, %, vw/vh) over fixed pixels
Breakpoint strategy: Match the project's existing breakpoints
Touch targets: Minimum 44x44px for interactive elements

Accessibility (A11y)

Semantic HTML: Use proper elements (button, nav, main, aside)
ARIA when needed: Only when semantic HTML isn't sufficient
Keyboard navigation: All interactive elements must be keyboard-accessible
Color contrast: WCAG AA minimum (4.5:1 for text, 3:1 for large text)
Focus management: Visible focus indicators, logical tab order
Screen readers: Test with VoiceOver/NVDA, use aria-label/aria-describedby

State Management

Local state first: useState/useReducer before reaching for global state
Server state: Use the project's data fetching library (React Query, SWR, etc.)
URL state: Filters, pagination, tabs → URL parameters
Form state: Use the project's form library (React Hook Form, Formik, etc.)
Global state: Only for truly app-wide concerns (theme, auth, locale)

Visual Consistency

Design tokens: Use the project's existing variables/tokens for colors, spacing, typography
Spacing scale: Follow the project's spacing system (don't use arbitrary values)
Typography: Use existing type scale, don't create new sizes
Icons: Use the project's icon system/library

Performance

Lazy loading: Code-split routes and heavy components
Image optimization: Proper formats (WebP/AVIF), srcset, lazy loading
Bundle awareness: Check impact of new dependencies
Render optimization: Memoize expensive computations, avoid unnecessary re-renders

Testing

Component tests: Render, interact, assert on DOM output
Visual regression: Screenshot tests for critical UI
Accessibility tests: Automated a11y checks (axe-core)
User flow tests: E2E tests for critical paths