Website Builder Agent Skills
A technical portfolio showcasing the Poke build agent's architecture, design capabilities, and deployment pipeline for high-performance web experiences.
Technical Stack
Built on TanStack Start - a full-stack React framework powered by Vite. This architecture delivers fast HMR during development, optimized production bundles through automatic code splitting, and type-safe routing validated at build time.
React + Vite
Instant server start with ESBuild pre-bundling. Sub-second HMR keeps the feedback loop tight during development.
Type-Safe Routing
TanStack Router validates every route at build time - params, search params, and loader data are fully typed end-to-end.
Nitro Server
Hybrid server engine handling SSR, API routes, and static generation with automatic worker scaling.
Zero-Config Perf
Automatic code splitting, tree-shaking via Rollup, and CSS extraction keep the critical path lean.
Design Capabilities
Every interface is engineered for clarity and speed. Layouts are responsive by default, visual hierarchy is driven by the content itself, and every component is built as a reusable, composable module.
Responsive Architecture
Mobile-first layouts that adapt across breakpoints. Touch targets stay accessible, content reflows without media-query sprawl.
Visual Hierarchy
Typography and spacing encode priority. Headings weigh more than body copy; information is scannable before it is readable.
Performance Budget
Lighthouse-driven development. Every animation uses only transform and opacity; layouts avoid reflow by design.
Component System
Headless primitives (Base UI) + application-layer components. Each piece is independently testable and replaceable.
UI / UX Skills
User flows are mapped before a single pixel is placed. The goal is to minimise friction: fewer steps, clearer labels, faster feedback. Every interaction should feel like it was expected.
Flow Architecture
Screen-by-screen journey maps identify drop-off points. Each state - loading, empty, error, success - is designed, not an afterthought.
Information Design
Content is grouped by task, not by data type. Related actions live near related content; unrelated items are separated by whitespace, not lines.
Keyboard-First
Full WAI-ARIA APG coverage. Focus management, skip links, and visible focus rings mean the interface works without a mouse.
Motion as Guidance
Animation clarifies cause and effect. Enter and exit transitions use staggered timing to direct attention, never for decoration.
Style Philosophy
Functional elegance means every visual decision has a reason. The palette is neutral by default; the layout breathes; the typography carries the personality. Nothing is added for its own sake.
Restraint as discipline
One accent colour per view. No decorative flourishes. If an element does not serve the content or the interaction, it does not ship.
Typography first
Exposure for display scale, OpenRunde for UI, JetBrains Mono for code. The type scale is deliberately compact - 6 steps cover every role from eyebrow to hero.
Accessible by default
Contrast ratios meet WCAG AA at minimum. Focus styles are visible. Reduced motion is respected. Colour is never the only signal.
Whitespace as structure
Padding and margin encode hierarchy without borders. Generous section spacing (py-32+) gives the page room to breathe.
Hosting
Every push to the main branch triggers an automated pipeline. Dependencies are installed, the app is built with npm run build, and the output is deployed to a live URL.
design.exotics.poke.site