Frontend
The parts of a site people see and click: pages, layouts, forms and buttons.
15 skills. Each one is plain markdown you can paste into ChatGPT, Claude, Gemini or any AI chat, or install in Claude Code or Cursor. How it works
add-analytics-and-privacy-policy
Adds privacy-friendly visitor analytics and a plain-English privacy page covering contact-form data, analytics and overseas providers, with Australian Privacy Principles notes. Not legal advice. Use when the user wants site analytics, visitor stats, a privacy policy or privacy page.
Not yet model-tested; testing Jan 2027Frontendadd-dark-mode-toggle
Adds a light/dark/system theme toggle that persists the choice in localStorage and avoids the white flash on page load, using CSS variables or Tailwind's dark class. Use when the user asks for dark mode, a night theme, a theme switcher, or follow-the-system colour scheme.
Not yet model-tested; testing Jan 2027Frontendadd-llms-txt-file
Writes an llms.txt file for a website or repo following the llmstxt.org format - a title, a one-line summary, short context and grouped links to the pages that matter - so AI assistants and AI search tools can find your key content. Use when the user wants an llms.txt, wants their docs readable by AI, or asks how AI tools should read their site.
Not yet model-tested; testing Jan 2027Frontendadd-seo-metadata-and-sitemap
Adds search basics to a Next.js site, with a title and description per page, Open Graph share images, sitemap.ts, robots.ts, LocalBusiness structured data and a favicon. Use when the user wants to show up on Google, improve SEO, fix link previews, or add a sitemap or meta tags.
Not yet model-tested; testing Jan 2027Frontendaudit-accessibility-and-performance
Runs a pre-launch quality pass on a website, with WCAG 2.2 AA quick checks (alt text, headings, labels, keyboard, focus, contrast) and Core Web Vitals fixes, checked with Lighthouse. Use when the user wants their site accessible, faster, a Lighthouse audit, or a quality check before launch.
Not yet model-tested; testing Jan 2027Frontendaudit-site-seo
Audits a live site's SEO and writes a ranked fix list - crawling and indexing, redirects and canonicals, titles and headings, content and search intent, Core Web Vitals, structured data and visibility in AI search answers. Use when traffic dropped, pages are not on Google, the user asks for an SEO audit or SEO health check, or wants to show up in ChatGPT and AI search.
Not yet model-tested; testing Jan 2027Frontendbuild-astro-site
Builds a content site with Astro and TypeScript - pages and layouts, Markdown or MDX content collections with a typed schema, interactive islands only where needed, Tailwind styling, images and SEO basics, then a static or server build. Use when the user wants a blog, docs, marketing or portfolio site with Astro, or asks about islands or content collections.
Not yet model-tested; testing Jan 2027Frontendbuild-mobile-app-with-expo
Builds an iOS and Android app with Expo and React Native - start the project the standard way, check the SDK version before any advice, install packages with npx expo install, then pick the right path for screens, navigation, dev builds or store release. Use when the user wants a mobile app, mentions Expo, React Native, Expo Go or EAS, or asks how to ship an app to the App Store.
Not yet model-tested; testing Jan 2027Frontendbuild-react-form-with-validation
Builds an accessible React form with React Hook Form and Zod schema validation, inline error messages and a loading submit state. Use when the user wants a signup, contact, checkout or settings form, form validation, required fields, or error messages under inputs.
Not yet model-tested; testing Jan 2027Frontendbuild-streaming-chat-ui
Builds the chat window for an AI assistant in React - message list, input box, words appearing as they stream in, a stop button, auto-scroll, loading and error states, and safe rendering of the bot's markdown. Use when the user wants a ChatGPT-like chat interface, a chat widget for their site, or streaming AI responses shown on screen.
Not yet model-tested; testing Jan 2027Frontendbuild-sveltekit-app
Builds a SvelteKit app with TypeScript and Svelte 5 runes - create the project, use file-based routes, load data in +page.server.ts, handle forms with actions, manage state with $state and $derived, keep secrets server-side, and deploy with the right adapter. Use when the user wants to build with SvelteKit or Svelte, or asks about runes, load functions or form actions.
Not yet model-tested; testing Jan 2027Frontendbuild-ui-with-shadcn
Builds a React interface with shadcn/ui the way it is meant to be used - set up with the shadcn CLI, add components as editable source files, compose them into forms, dialogs and tables, check diffs before updates and keep custom changes. Use when adding shadcn/ui to a project, installing or updating shadcn components, building screens from them, or setting up a custom shadcn registry.
Not yet model-tested; testing Jan 2027Frontendfix-core-web-vitals
Finds and fixes the cause of poor Core Web Vitals - slow LCP, laggy INP and layout shift (CLS) - starting from real-user field data, then applying targeted fixes to images, fonts, scripts and layout. Use when PageSpeed or Search Console flags Core Web Vitals, the page loads slowly, clicks feel laggy, or content jumps around.
Not yet model-tested; testing Jan 2027Frontendoptimise-react-performance
Reviews and speeds up a React or Next.js app by fixing the problems that matter most first - data-fetch waterfalls, large client bundles, too much client JavaScript, wasted re-renders and tangled component props. Use when a React or Next.js app needs to be faster, data fetches run in a waterfall, the bundle is big, components re-render too often, or the user asks for React best practices.
Not yet model-tested; testing Jan 2027Frontendset-up-nextjs-tailwind-site
Sets up a new Next.js App Router project with Tailwind, a shared layout, header, footer, 404 page and one route per page in your website brief, then pushes it to GitHub. Use when the user wants to start a new website, create a Next.js site, or turn a page list into a working project.
Not yet model-tested; testing Jan 2027