Agent Skills: comprehensive-frontend-dev
Complete frontend development skill combining distinctive design aesthetics with technical excellence. Creates production-grade web applications using React, Next.js, TypeScript, and modern tooling. Use when building web components, pages, or applications that require both exceptional design quality and robust technical implementation. Handles everything from creative UI design to performance optimization, component scaffolding, bundle analysis, and deployment.
ID: nickloveinvesting/WONDER-APP/comprehensive-frontend-dev
Install this agent skill to your local
Skill Files
The files that make up comprehensive-frontend-dev.
More agent skills
- build-mcp-appThis skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the context of MCP. Use AFTER the build-mcp-server skill has settled the deployment model, or when the user already knows they want UI widgets.
- sonoscliControl Sonos speakers (discover/status/play/volume/group).
- n8n-code-pythonWrite Python in n8n Code nodes (native Python, `language` pythonNative, n8n 2.x). Use when the user explicitly wants Python in a Code node, when migrating old Pyodide/"Python (Beta)" code that used _input/_json/_node/_now, or when a Python Code node fails with NameError, "Security violations detected", "Import of standard library module … is disallowed", "__build_class__ not found", "A 'json' property isn't a dictionary", or "Python runner unavailable". Covers the only two variables (_items/_item), dict-only access, imports blocked by default, the sandbox's denied builtins, accepted return shapes, and how errors interact with onError. JavaScript is the default for Code nodes — native Python has no n8n helpers and, by default, no imports. EXCEPTION — for Python in the AI-agent-callable Custom Code Tool (@n8n/n8n-nodes-langchain.toolCode), use the n8n-code-tool skill instead (input is _query, return must be a string).
- chrome-devtoolsControl and inspect Chrome browser using Chrome DevTools Protocol - navigate pages, debug network requests, analyze performance, take screenshots, interact with elements, and automate browser tasks.
- selecting-vizro-chartsUse this skill when choosing chart types, applying Plotly Express conventions, configuring colors, building KPI cards, or adding tables (AG Grid) to Vizro dashboards. Activate when the user asks which chart fits their data, needs custom chart functions, wants to set colors or palettes, is creating KPI metric cards, or needs a tabular detail view.
- cachingCaching strategies — invalidation, TTL guidelines, cache keys, cache layers, and when not to cache. Use when implementing or reviewing caching logic.