Frontend

TypeScript, React, Next.js, Angular, Tailwind, Motion, Vite · React Native, Expo, Capacitor.

Skills

Skill	Where it lives
interface-cheatsheet	this kit — ~60 checkable UI rules
memory-snapshot-perf	this kit — heap-snapshot leak hunting
browser-testing-with-devtools	installed, addyosmani/agent-skills
api-and-interface-design	installed, addyosmani/agent-skills

Worth adding:

npx -y skills@latest add elayadesign/ai-design-skills
npx -y skills@latest add jakubkrehel/skills -s better-ui
npx -y skills@latest add dmmulroy/anti-slop     # oxlint rules against low-evidence code

Not yet vendored here but in the upstream toolkit upstream: react-admin-dashboard-patterns (TanStack Router, MUI, RBAC, Keycloak OIDC, React Query CRUD — 14 KB) and expo-react-native-patterns (Expo Router, MVVM, Zustand, React Query — 14 KB). Both are dense enough to be worth pulling.

Playwright

microsoft/playwright-mcp lets the agent drive a real browser: E2E, visual checks, reproducing a UI bug it cannot see from the code.

claude mcp add playwright -- npx -y @playwright/mcp@latest

The pattern that works: agent writes the test → runs it → reads the failure → fixes. Without the MCP server it writes tests it cannot execute, which is guessing with extra steps.

Figma

figma-mcp-go locally, or GLips/Figma-Context-MCP. Feeding layout data beats feeding screenshots — the agent gets real spacing values instead of estimating from pixels.

refero.design is a reference library of real product UI, useful for "show me how others solved this screen" before generating one.

Rules that matter here

• Design tokens, never primitives in components: --color-text-secondary, not --blue-500.
• Dark mode gets its own palette, not an inversion.
• Agents over-produce UI copy. The CLAUDE.md rule: no subtitles or helper text under headings by default.
• Agents reach for a component library on every problem. ponytail counters it.