Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

2026-07-092

agent-security-audit

larsderidder/theredbeard-pi-agent

Audit AI agent configurations for security risks — excessive permissions, prompt injection surfaces, data exfiltration paths, and missing guardrails. Use when reviewing CLAUDE.md files, MCP configs, agent orchestration code, or any AI agent setup.

2026-05-192

agentic-ai-risk-assess

larsderidder/theredbeard-pi-agent

Assess agentic AI applications against the OWASP Top 10 for Agentic Applications 2026. Use when reviewing autonomous AI agents, multi-agent systems, or agentic workflows for security risks including goal hijacking, tool misuse, privilege abuse, and rogue agent behavior.

2026-05-192

api-security-review

larsderidder/theredbeard-pi-agent

Comprehensive API security review against OWASP API Security Top 10 (2023). Use when reviewing OpenAPI/Swagger specs, auditing REST/GraphQL/gRPC implementations, testing authentication mechanisms, or checking API gateway configurations. Covers BOLA/IDOR, broken auth, mass assignment, rate limiting, SSRF, and more with real-world attack scenarios.

2026-05-192

code-review-security

larsderidder/theredbeard-pi-agent

Security-focused code review mapped to OWASP Top 10 and ASVS. Use when reviewing pull requests, auditing files or modules for vulnerabilities, or performing pre-merge security gate checks. Covers injection, auth, authorization, cryptography, data exposure, misconfiguration, and deserialization.

2026-05-192

iac-security-review

larsderidder/theredbeard-pi-agent

Security review of Infrastructure-as-Code (Terraform, Kubernetes, CloudFormation). Use when reviewing IaC files for misconfigurations, overpermissioning, exposed resources, missing encryption, secrets in code, and supply chain risks. Covers CIS benchmarks and cloud security best practices.

2026-05-192

name	website
description	Build fast, accessible, and SEO-friendly websites with modern best practices.

Website Development Rules

Performance

Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift
Render-blocking CSS delays first paint — inline critical CSS in <head>, defer the rest
Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with async or defer, audit regularly
Fonts cause invisible text flash (FOIT) — use font-display: swap and preload critical fonts
Measure with Lighthouse in incognito mode — extensions skew results

Mobile First

Start CSS with mobile styles, add complexity with min-width media queries — easier to scale up than strip down
Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
Horizontal scroll is a critical bug — test every page at 320px width minimum
viewport meta tag is required: <meta name="viewport" content="width=device-width, initial-scale=1">

Accessibility

Every <img> needs alt text — empty alt="" for decorative images, descriptive text for meaningful ones
Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
Form inputs must have associated <label> elements — placeholders alone are not accessible
Keyboard navigation must work — test every interactive element with Tab key
Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels

HTML Structure

One <h1> per page only — it's the page title, not a styling tool
Use semantic elements: <nav>, <main>, <article>, <aside>, <footer> — they communicate structure to browsers and assistive tech
<button> for actions, <a> for navigation — don't use divs with click handlers
External links should have rel="noopener" — prevents security vulnerability with target="_blank"
Validate HTML — broken markup causes unpredictable rendering across browsers

CSS Patterns

Avoid !important — it breaks cascade and makes debugging painful. Fix specificity instead
Use relative units (rem, em, %) over fixed px for text — respects user font size preferences
CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
Test without CSS loading — content should still be readable in plain HTML

Common Mistakes

Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
Not setting <html lang="en"> breaks screen reader pronunciation
Hardcoded http:// links break on HTTPS sites — use protocol-relative // or always https://
Assuming JavaScript is available — core content should work without JS (progressive enhancement)
Forgetting print styles — add @media print for pages users might print (receipts, articles)

SEO / Indexing

Canonical URLs must match the actual URL the server serves — a mismatch (e.g. trailing slash vs no trailing slash) confuses Google and can prevent indexing
Every content page needs at least one internal link pointing to it — pages only in a sitemap but with no referring page are deprioritized by Google's crawler
Content filters in templates can silently exclude pages from navigation — verify all pages are reachable by following links from the homepage, not just by checking the sitemap
"Discovered - currently not indexed" in Search Console usually means no internal links, not a technical block — fix linking first before requesting indexing

Before Launch

Test all forms actually submit — broken contact forms lose leads silently
Check 404 page exists and is helpful — default server 404 looks unprofessional
Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
Submit sitemap to Google Search Console — speeds up indexing
Set up uptime monitoring — know when your site goes down before users tell you