Web frontend rules. Pick the framework page that matches the work, then drop back to html and css for the primitives every page rests on.
Pages
- accessibility: WCAG 2.2 AA, semantic HTML, ARIA, keyboard, contrast, screen reader testing.
- ai-first-applications: Pillar for AI-first frontends: stream responses, show model state, keep outputs editable, handle errors, manage cost.
- llm-product-ux: Interaction design for LLM products: set expectations, show uncertainty, make outputs steerable and reversible.
- streaming-chat-interfaces: Stream LLM responses to chat UIs: SSE vs streamed fetch, incremental rendering, partial-JSON parsing, cancellation, reconnection.- astro: Astro for content-heavy static sites.
- blueprint: Palantir Blueprint for data-dense UIs.
- css: Modern CSS, layout, custom properties.
- css-animations: transition vs @keyframes, prefers-reduced-motion, compositor properties, scroll-driven animations.
- css-cascade-layers: @layer for predictable cascade order, third-party CSS, retiring !important.
- css-container-queries: @container for component-driven responsive layouts, cqi units, the responsive component pattern.
- css-custom-properties: Define tokens on :root, cascade, media-query theming, retire CSS-in-JS.
- css-flexbox: 1D layout, main vs cross axis, flex shorthand, gap over margins.
- css-grid: 2D layout, fr and minmax, subgrid, named lines, layout-vs-content separation.
- css-has-selector: :has() for parent-aware styling, form validity, child-driven layout, performance limits.
- forms: Native HTML forms, validation, autocomplete, progressive enhancement.
- html: Semantic HTML, accessibility, head and meta hygiene.
- nextjs: Next.js 15 App Router conventions.
- nextjs-app-router: File-system routing, layouts, route groups, parallel and intercepting routes.
- nextjs-async-dynamic-apis: params, searchParams, cookies(), headers(), draftMode() are Promises in Next.js 15; the codemod and pitfalls.
- nextjs-caching: The four caching layers, fetch options, unstable_cache, tags, revalidation.
- nextjs-image-optimization: next/image, sizes, priority for LCP, loaders, remotePatterns.
- nextjs-metadata-api: Static and dynamic metadata, OG and Twitter cards, sitemap.ts, robots.ts.
- nextjs-middleware: middleware.ts, matcher, Edge constraints, rewrite vs redirect, cookies.
- nextjs-route-handlers: route.ts endpoints, HTTP methods, streaming, when to prefer server actions.
- nextjs-server-actions: “use server”, FormData, progressive enhancement, revalidate, input validation.
- react: React component patterns.
- react-compiler: Opt-in build plugin (stable v1.0) that auto-memoizes; not on by default in React 19, and when manual memoization still matters.
- react-error-boundaries: Render-tree errors, fallback UI, Sentry logging, reset patterns.
- react-forms: Uncontrolled inputs, server actions, FormData, Zod validation.
- react-hooks: useState vs useReducer, useEffect discipline, custom hooks, memoization rules.
- react-performance: Profile first, virtualize lists, code split routes, selector hooks.
- react-server-components: RSC rendering model, the use client boundary, async fetching.
- react-state-management: Local first, URL state, Zustand or Jotai over Redux.
- react-suspense: Suspense boundaries, fallback design, useTransition vs useDeferredValue, SSR streaming.
- shadcn: shadcn/ui composition.
- tailwind: Tailwind v4 utility-first patterns.
- tailwind-arbitrary-values: [..] bracket syntax as a temporary escape hatch; extract to @theme after the third use.
- tailwind-dark-mode: class or media strategy, persisting the preference, system fallback, and theme-color meta.
- tailwind-debug: catch class-name conflicts, sort utilities, and diagnose build issues with ESLint and the Prettier plugin.
- tailwind-migration: migrate from custom CSS or v3 to Tailwind v4 using the leaf-first component pattern.
- tailwind-plugins: use @plugin for first-party and custom plugins; write custom utilities as CSS functions.
- tailwind-responsive: mobile-first viewport variants, then container queries when a component needs to respond to its slot.
- tailwind-theme: define design tokens once in @theme, get CSS custom properties and utility classes for free.
- tailwind-variants: group-, peer-, has-, supports-, data-*, and arbitrary variants for stateful styling without JS.
- html-aria-patterns: common ARIA patterns for live regions, dialogs, disclosure, tabs, and listbox.
- html-head-tags: required head tags in the right order: charset, viewport, title, description, canonical, OG, Twitter.
- html-links-rel: when and how to use every rel value: nofollow, noopener, preload, prefetch, preconnect, canonical.
- html-microdata: Microdata vs JSON-LD vs RDFa and when to migrate to JSON-LD.
- html-multimedia: picture, source, srcset, sizes, video, audio, and track with the loading strategy that prevents layout shift.
- html-semantic-elements: use the element that names the role: article, section, nav, main, aside, header, footer.
- html-tables: use tables for tabular data only; caption, thead, tbody, tfoot, and th scope for accessibility.
- astro-content-collections: define Zod schemas for content/, query with getCollection and getEntry, use collection references.
- astro-image-optimization: Image and Picture from astro:assets, remote domain config, AVIF/WebP with correct dimensions.
- astro-integrations: astro add to install integrations, ordering rules, and the default set for new projects.
- astro-islands: partial hydration directives, client:load/idle/visible/media/only, keeping the JS budget lean.
- astro-mdx: embed components in markdown with MDX, remark and rehype plugins, per-file import perf traps.
- astro-performance: zero JS by default, bundle audits with build —inspect, scoped CSS, font strategies.
- astro-ssr: switch to server output, pick an adapter, and opt routes in or out of prerendering with the prerender export.
- astro-view-transitions: SPA-feel navigation with the ViewTransitions component, named transitions, and persistent elements.