bopen-web

Data visualization and charting. Use for "create a chart", "visualize this data", "build a dashboard", "plot this", "graph these metrics", "make a bar chart", "build a heatmap", or help choosing a chart type, picking a charting library by data scale, or building the pipeline from raw database state to rendered visualization.

This skill should be used when the user asks to "inspect this page in Chrome", "debug what's happening in my browser", "read the browser console logs", "interact with the page open in Chrome", or "attach to my live Chrome session". Interacts with the user's local Chrome browser session via Chrome DevTools Protocol — no extension, no Puppeteer — but only after explicit user approval to inspect, debug, or interact with an open tab.

This skill should be used when the user asks to "create a new project", "scaffold a Next.js app", "initialize a new app", "start a new project", "set up a new Next.js project", or mentions "create-next-project". Provides a guided, opinionated full-stack Next.js project initialization with Biome, Tailwind v4, shadcn/ui, better-auth, and Vercel deployment. Uses agent teams for parallel execution.

This skill should be used when the user asks to "optimize my Next.js app", "why is this page slow", "reduce my bundle size", "improve Core Web Vitals", or "run a Lighthouse audit". Diagnoses and fixes Next.js frontend performance issues using Lighthouse, bundle analysis, and animation best practices — covering LCP, TBT, and CLS.

Decide between static components and AI-generated interfaces, and build the latter. Use for "generative UI", "dynamic UI", "json-render", "render JSON as UI", "AI UI generation", "MCP App UI", "deliver UI in chat", or "interactive chat interface". Covers the json-render framework, renderer and catalog selection, and MCP Apps delivery through ui:// resources.

This skill should be used when adding GitHub star counts, star buttons, star widgets, or GitHub social proof to a website or app. Applies when the user says "add GitHub stars", "show star count", "add a star badge", "GitHub badge", "star widget", "GitHub social proof", "stargazer count", or wants to display how many stars a repo has on a marketing page, header, or landing page. Also applies when integrating the GitHub API for repository metadata display.

Assess and upgrade a Next.js project after resolving the target release from current official documentation. Includes tested automation and breaking-change guidance for the Next.js 15 to 16 migration. Use when the user says 'upgrade Next.js', 'migrate to Next.js 16', 'update my Next.js app', 'run the Next.js codemod', 'my Next.js version is outdated', or when a migration plan or baseline build comparison is needed.

Run local performance audits on a project without network calls. This skill should be used when the user says 'audit performance', 'check bundle size', 'find large images', 'check for heavy dependencies', 'run a perf audit', 'how big is my bundle', 'optimize images', 'find oversized assets', or before any performance optimization work. Also use when an agent needs baseline metrics before making changes. All scripts output structured JSON to stdout.

This skill should be used when the user asks to "audit my shadcn app", "run shadscan", "improve my shadscan score", "raise my shadscan grade", "fix accessibility/states/forms regressions in my shadcn components", or "add a shadscan CI gate". Drives the shadscan static analyzer (`npx @shadscan/cli`) through an audit → fix → re-score loop against shadcn React components, and wires it into CI as a score gate.