@thierrynakoa/fire-flow 12.2.1 → 13.0.1

package/skills-library/ui-ux-pro-max/ACCESSIBILITY_ESSENTIALS.md

@@ -0,0 +1,115 @@
+---
+name: accessibility-essentials
+category: ui-ux-pro-max
+version: 1.0.0
+contributed: 2026-02-24
+contributor: dominion-flow
+tags: [accessibility, a11y, aria, wcag, screen-reader, keyboard]
+difficulty: medium
+---
+
+# Accessibility Essentials
+
+## Problem
+
+Accessibility is often treated as an afterthought, resulting in inaccessible apps that exclude users and violate WCAG guidelines. Retrofitting a11y is 10x harder than building it in from the start.
+
+## Solution Pattern
+
+Follow these 5 rules and you cover 80% of accessibility issues.
+
+## The 5 Rules
+
+### Rule 1: Semantic HTML First
+
+```html
+<!-- BAD: div soup -->
+<div class="btn" onclick="submit()">Submit</div>
+
+<!-- GOOD: native elements -->
+<button type="submit">Submit</button>
+```
+
+Native elements give you keyboard support, focus management, and screen reader announcements for free. Use `<button>`, `<a>`, `<input>`, `<select>`, `<nav>`, `<main>`, `<header>`, `<footer>`.
+
+### Rule 2: Every Image Has Alt Text
+
+```html
+<!-- Informative image -->
+<img src="chart.png" alt="Revenue grew 40% in Q3 2025" />
+
+<!-- Decorative image -->
+<img src="divider.png" alt="" role="presentation" />
+```
+
+- **Informative:** Describe what the image conveys, not what it looks like
+- **Decorative:** Empty `alt=""` so screen readers skip it
+
+### Rule 3: Keyboard Navigation Works
+
+```javascript
+// Every interactive element must be reachable with Tab
+// Every action must be triggerable with Enter or Space
+
+// Test: unplug your mouse and use the app for 5 minutes
+```
+
+Common fixes:
+- Add `tabindex="0"` to custom interactive elements
+- Add `onKeyDown` handlers for Enter/Space on non-button elements
+- Never remove `outline` without providing a visible focus indicator
+
+```css
+/* BAD */
+*:focus { outline: none; }
+
+/* GOOD */
+*:focus-visible {
+  outline: 2px solid #1971c2;
+  outline-offset: 2px;
+}
+```
+
+### Rule 4: Color Is Not the Only Indicator
+
+```html
+<!-- BAD: only color indicates error -->
+<input style="border-color: red" />
+
+<!-- GOOD: color + icon + text -->
+<input style="border-color: red" aria-invalid="true" aria-describedby="error-msg" />
+<span id="error-msg" role="alert">Email is required</span>
+```
+
+### Rule 5: ARIA Is a Last Resort
+
+```html
+<!-- If you can use native HTML, do that instead -->
+<!-- ARIA is for when you MUST build a custom widget -->
+
+<!-- Custom combobox (when <select> won't work) -->
+<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
+  ...
+</div>
+```
+
+**First rule of ARIA:** Don't use ARIA. Use semantic HTML.
+**Second rule of ARIA:** If you must, follow the WAI-ARIA Authoring Practices exactly.
+
+## Quick Audit Checklist
+
+- [ ] Page has exactly one `<h1>`
+- [ ] Heading levels don't skip (no h1 → h3)
+- [ ] All form inputs have associated `<label>` elements
+- [ ] Color contrast ratio is at least 4.5:1 (text) / 3:1 (large text)
+- [ ] Skip-to-content link exists
+- [ ] Tab order follows visual reading order
+
+## When to Use
+
+- Every web project, from the start
+- Code reviews — check for a11y before approving
+
+## When NOT to Use
+
+- Not applicable — always apply these 5 rules

package/skills-library/ui-ux-pro-max/DESIGN_SYSTEM_SCAFFOLDING.md

@@ -0,0 +1,133 @@
+---
+name: design-system-scaffolding
+category: ui-ux-pro-max
+version: 1.0.0
+contributed: 2026-02-24
+contributor: dominion-flow
+tags: [design-system, tokens, components, theming, tailwind, css-variables]
+difficulty: medium
+---
+
+# Design System Scaffolding
+
+## Problem
+
+Projects start with ad-hoc colors, spacing, and typography. By week 3, there are 47 different blues and 12 font sizes. A minimal design system prevents this drift.
+
+## Solution Pattern
+
+Start with design tokens (CSS variables), a type scale, and a spacing scale. Add components as needed.
+
+## Step 1: Design Tokens
+
+```css
+:root {
+  /* Colors — semantic names, not visual */
+  --color-primary: #1971c2;
+  --color-primary-light: #e7f5ff;
+  --color-secondary: #099268;
+  --color-danger: #e03131;
+  --color-warning: #f08c00;
+  --color-text: #1e1e1e;
+  --color-text-muted: #868e96;
+  --color-surface: #ffffff;
+  --color-border: #dee2e6;
+
+  /* Spacing — 4px base unit */
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-6: 1.5rem;   /* 24px */
+  --space-8: 2rem;     /* 32px */
+  --space-12: 3rem;    /* 48px */
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-mono: 'Fira Code', monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+}
+```
+
+## Step 2: Dark Mode (Free with Tokens)
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #e9ecef;
+    --color-text-muted: #adb5bd;
+    --color-surface: #1a1b1e;
+    --color-border: #373a40;
+  }
+}
+
+/* OR manual toggle */
+[data-theme="dark"] {
+  --color-text: #e9ecef;
+  --color-surface: #1a1b1e;
+}
+```
+
+## Step 3: Component Patterns
+
+```jsx
+// Button — uses tokens, supports variants
+function Button({ variant = 'primary', size = 'md', children, ...props }) {
+  return (
+    <button
+      className={`btn btn-${variant} btn-${size}`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+```
+
+```css
+.btn {
+  font-family: var(--font-sans);
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.btn-primary { background: var(--color-primary); color: white; }
+.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
+.btn-md { padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
+```
+
+## Rules
+
+1. **Never use raw color values in components** — always reference tokens
+2. **Spacing uses the scale** — no `margin: 13px`
+3. **Typography uses the scale** — no `font-size: 0.9375rem`
+4. **New tokens require justification** — why isn't an existing one sufficient?
+
+## When to Use
+
+- Starting any project with a UI
+- When you notice color/spacing inconsistencies growing
+- When adding dark mode support
+
+## When NOT to Use
+
+- Projects using an established design system (Material UI, shadcn/ui)
+- Backend-only projects

package/skills-library/ui-ux-pro-max/RESPONSIVE_LAYOUT_PATTERNS.md

@@ -0,0 +1,119 @@
+---
+name: responsive-layout-patterns
+category: ui-ux-pro-max
+version: 1.0.0
+contributed: 2026-02-24
+contributor: dominion-flow
+tags: [responsive, css, layout, grid, flexbox, mobile-first, breakpoints]
+difficulty: medium
+---
+
+# Responsive Layout Patterns
+
+## Problem
+
+Building layouts that work across mobile, tablet, and desktop without duplicating components or writing fragile media queries. Most responsive bugs come from desktop-first thinking.
+
+## Solution Pattern
+
+Mobile-first CSS with a consistent breakpoint system and layout primitives.
+
+## Breakpoint System
+
+```css
+/* Mobile-first: base styles ARE mobile */
+/* sm: 640px  — large phones / small tablets */
+/* md: 768px  — tablets */
+/* lg: 1024px — small desktops */
+/* xl: 1280px — large desktops */
+
+/* Tailwind uses these by default */
+```
+
+**Rule: Never write `max-width` media queries.** Always build up from mobile with `min-width`.
+
+## Layout Primitives
+
+### 1. Stack (vertical flow)
+
+```css
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+```
+
+### 2. Cluster (horizontal wrap)
+
+```css
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+```
+
+### 3. Sidebar Layout
+
+```css
+.with-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.with-sidebar > :first-child {
+  flex-basis: 250px;
+  flex-grow: 1;
+}
+.with-sidebar > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 60%;
+}
+```
+
+### 4. Auto Grid (responsive without media queries)
+
+```css
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+  gap: 1rem;
+}
+```
+
+This is the most powerful pattern — cards automatically reflow from 1 column on mobile to 3-4 on desktop with zero media queries.
+
+### 5. Container Queries (2025+)
+
+```css
+.card-container {
+  container-type: inline-size;
+}
+
+@container (min-width: 400px) {
+  .card { flex-direction: row; }
+}
+```
+
+Container queries let components respond to their container, not the viewport. Better for reusable components.
+
+## Common Mistakes
+
+- **Fixed widths** — Use `max-width` with percentage fallbacks, never `width: 960px`
+- **Overflow hiding** — `overflow: hidden` masks layout bugs. Fix the root cause.
+- **Viewport units for text** — `font-size: 5vw` is unreadable on extremes. Use `clamp()`.
+- **Forgetting touch targets** — Minimum 44x44px for interactive elements on mobile.
+
+## When to Use
+
+- Any project with a web frontend
+- Starting a new layout system
+- Debugging responsive issues
+
+## When NOT to Use
+
+- Electron/native apps with fixed viewports
+- Print stylesheets (different paradigm)