Agent Skills: frontend-dev-guidelines
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
ID: jackspace/ClaudeSkillz/frontend-dev-guidelines
166
Install this agent skill to your local
Skill Files
The files that make up frontend-dev-guidelines.
More agent skills
- filtering-bot-trafficIdentify, measure, and exclude bot / crawler / AI-agent traffic in PostHog web and product analytics using the traffic classification surface (the isLikelyBot / getTrafficType HogQL functions and the $virt_* virtual properties). Use when the user asks to "exclude bots", "filter out crawlers", "remove bot traffic from my numbers", "how much of my traffic is bots / AI crawlers", "is GPTBot / ChatGPT / Claude hitting my site", "break down traffic by human vs bot", or wants clean human-only counts in an insight or dashboard. For the real-time Live tab bot tiles, use exploring-live-traffic instead.
- darksol-random-oracleBankr-compatible skill for DARKSOL Random Oracle, an on-chain verifiable RNG API on Base. Use when an agent needs random numbers, coin flips, dice rolls, random sequences, shuffles, raffles, loot drops, games, simulations, casino mechanics, or auditable randomness. Supports DARKSOL holder free access and x402 USDC payments on Base.
- baoyu-electron-extractExtracts resources and JavaScript from any installed Electron app (`.asar` bundle), restoring original sources from `.js.map` files when available or formatting minified code with Prettier otherwise. Use when user wants to "extract Electron app", "decompile Electron", "get the source code of <app>", "inspect app.asar", "看 Electron 应用源码", "提取 .asar", or asks how a desktop Electron app is built. Skips `node_modules` and supports both macOS and Windows.
- setup-web-testsSet up Python test environment in Claude Code for web where flox is unavailable. Use when you need to run backend tests and `uv sync` fails due to Python version mismatch.
- pnpm-upgradeKeep pnpm current: preflight the published package and pnpm/action-setup self-installer, update pnpm locally, align packageManager in package.json, and refresh CI pins. Use this when refreshing the pnpm toolchain manually or in automation.
- refactorCode refactoring workflow - analyze → plan → implement → review → validate