Designing Beautiful Websites

# designing-beautiful-websites

Designs UX/UI for websites and web apps: UX strategy, information architecture, user flows, wireframes, UI systems, and polished visual design.

## Quick install

```bash
npx skills add https://github.com/tristanmanchester/agent-skills --skill designing-beautiful-websites
```

## Usage

See `SKILL.md` for the workflow and deliverables.


# Accessibility Essentials for Web UX/UI

> Use this when designing, auditing, or specifying UI. Accessibility is a quality baseline, not a nice-to-have.

## Table of contents
- [Non-negotiables](#non-negotiables)
- [Colour and contrast](#colour-and-contrast)
- [Keyboard and focus](#keyboard-and-focus)
- [Semantic HTML](#semantic-html)
- [Forms and errors](#forms-and-errors)
- [Motion and animation](#motion-and-animation)
- [Optional: contrast check script](#optional-contrast-check-script)

## Non-negotiables
- All interactive elements are reachable via keyboard.
- Focus is visible and logical.
- Text has sufficient contrast.
- Controls have programmatic labels.
- Errors are understandable and recoverable.

## Colour and contrast
Targets:
- normal text: ≥ 4.5:1
- large text: ≥ 3:1

Rules:
- don’t rely on colour alone to communicate state (also use icons, text, or patterns).
- if white text forces a coloured background to become too dark and visually dominant, use dark text on a light tint.

## Keyboard and focus
Rules:
- focus order follows visual order.
- focus styles are obvious (don’t remove outlines without replacing them).
- modals trap focus and restore it on close.

## Semantic HTML
Prefer native elements:
- `<button>` for actions, `<a>` for navigation.
- headings are hierarchical.
- lists are real lists.
- inputs have `<label for=...>`.

ARIA rule:
- don’t add ARIA when native semantics already solve it.

## Forms and errors
Rules:
- label every input.
- indicate required fields.
- validate clearly and near the field.
- on submit errors, focus the first invalid field.
- error messages must be announced (aria-live / describedby patterns).

## Motion and animation
Rules:
- motion should communicate meaning (state change), not just decorate.
- respect reduced motion preferences.

## Optional: contrast check script
If tooling is available, run:

```bash
python scripts/contrast_check.py "#0f172a" "#ffffff"
```

It prints contrast ratio and pass/fail for normal and large text.


# UX/UI Checklists and Templates

> Use this for fast QA and consistent outputs.

## Table of contents
- [Design brief checklist](#design-brief-checklist)
- [IA and navigation checklist](#ia-and-navigation-checklist)
- [Wireframe checklist](#wireframe-checklist)
- [Visual system checklist](#visual-system-checklist)
- [Interaction and forms checklist](#interaction-and-forms-checklist)
- [Accessibility checklist](#accessibility-checklist)
- [Content checklist](#content-checklist)
- [Responsive checklist](#responsive-checklist)
- [Pre-launch QA checklist](#pre-launch-qa-checklist)
- [Component state matrix template](#component-state-matrix-template)

## Design brief checklist
- [ ] Primary user(s) defined
- [ ] Primary user goal and business goal stated
- [ ] Success metrics listed
- [ ] Constraints (tech, time, brand, legal, accessibility) captured
- [ ] Key pages listed
- [ ] Key paths listed
- [ ] Assumptions clearly marked

## IA and navigation checklist
- [ ] Top-level nav is short and stable
- [ ] Labels are obvious and consistent
- [ ] Current location is visible (active state / breadcrumbs)
- [ ] Every page has a clear title that matches nav labels
- [ ] Search exists where discovery matters

## Wireframe checklist
- [ ] Page has a single primary action (or an explicit reason it doesn’t)
- [ ] Regions are clear (nav, main, secondary)
- [ ] Key path steps are unambiguous
- [ ] Clickable elements are clearly signified
- [ ] Spacing communicates grouping (inside < between)

## Visual system checklist
- [ ] Spacing scale defined and used
- [ ] Type scale defined and used
- [ ] Colour