Skip to content
shipanysaas

New marketing site design, UI Skills and a responsive check

The landing page, header, footer and theme were rebuilt. UI Skills ship with the kit for every agent, and a script checks pages at every width.

Marketing site

  • The landing page, header, footer and theme were rebuilt in a light editorial style: white surfaces, an iris primary colour, Plus Jakarta Sans with Lora for accents, and a graphite dark mode.
  • An adversarial review and a Web Interface Guidelines audit led to fixes: white text on primary buttons now passes WCAG AA contrast in dark mode, sections have proper landmarks and headings, there is a skip-to-content link, rotating content pauses on hover and focus, and motion respects reduced-motion settings.

UI Skills for every agent

  • UI skills ship inside the repository as real folders: the UI Skills catalogue (synced with pnpm ui-skills:sync) and a set of design skills, in .claude/skills, .agents/skills and .cursor/skills.
  • pnpm ui-skills runs the UI Skills CLI through npx. It is deliberately not a dependency (see known issue 17).
  • .mcp.json registers the UI Skills MCP server.
  • AGENTS.md requires pnpm ui-skills start before any UI work.

Responsive check

pnpm --filter web-e2e responsive renders a page at widths from 320 to 1920 pixels, saves a full-page screenshot at each and fails on horizontal overflow. The rules it enforces are in docs/design/responsive.md.

Known issues

Three entries were added to docs/troubleshooting/agent-known-issues.md: a hand-written -webkit- prefix that makes Lightning CSS drop the standard property (15), unlayered CSS that overrides Tailwind utilities (16), and pnpm 11 failing every script after a dependency with an ignored build script is added (17).