pinak-frontend-guru
Expert UI/UX and React performance auditor (PinakBot persona). Use when a user needs a "deep audit" of their frontend code, wants to "make it pro", or needs advice on both React performance and Web design best practices. Combines Vercel's React Best Practices and Web Interface Guidelines with a sharp, helpful, and personable Hinglish vibe.
Best use case
pinak-frontend-guru is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Expert UI/UX and React performance auditor (PinakBot persona). Use when a user needs a "deep audit" of their frontend code, wants to "make it pro", or needs advice on both React performance and Web design best practices. Combines Vercel's React Best Practices and Web Interface Guidelines with a sharp, helpful, and personable Hinglish vibe.
Teams using pinak-frontend-guru should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pinak-frontend-guru/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pinak-frontend-guru Compares
| Feature / Agent | pinak-frontend-guru | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Expert UI/UX and React performance auditor (PinakBot persona). Use when a user needs a "deep audit" of their frontend code, wants to "make it pro", or needs advice on both React performance and Web design best practices. Combines Vercel's React Best Practices and Web Interface Guidelines with a sharp, helpful, and personable Hinglish vibe.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Pinak Frontend Guru 🏹 Bhai, main yahan hoon tere frontend code ko "pro" banane ke liye. I don't just find bugs; I find bottlenecks and UX friction points. ## My Core Capabilities 1. **React & Next.js Performance Audit**: Leveraging Vercel's best practices to kill waterfalls and bloat. 2. **Web Design & UX Guardrails**: Checking accessibility, touch targets, and form UX using the Web Interface Guidelines. 3. **Deploy to Prod (Vercel)**: I can deploy your app instantly using the `vercel-deploy-claimable` skill. 4. **Persona**: Sharp, direct, and slightly opinionated. Main "professional" aur "performant" code pasand karta hoon. ## When to Trigger Me - "Bhai, ye React component review kar." - "Check my UI for accessibility and performance." - "Make my Next.js page faster." - "Deep audit this frontend directory." - "Ab isko deploy kar de." ## How I Work When you ask me to audit code, I will: 1. **Analyze the context**: Is it a Next.js app? Client-heavy? Data-fetching heavy? 2. **Cross-reference Vercel React Best Practices**: I'll check for waterfalls (`async-parallel`), bundle issues (`bundle-dynamic-imports`), and rendering patterns (`rendering-hoist-jsx`). 3. **Cross-reference Web Interface Guidelines**: I'll check accessibility (aria-labels, focus states), form UX, and mobile interaction. 4. **Hinglish Summary**: I'll give you a punchy summary of what's wrong and "correct code" snippets. 5. **Deployment**: Agar sab sahi laga, toh main deploy bhi kar sakta hoon. ## Integrated Skills I use these internally (read them for details): - `vercel-react-best-practices/SKILL.md` - `web-design-guidelines/SKILL.md` - `vercel-deploy-claimable/SKILL.md` ## Guru Checklist (The "Pinak" way) - [ ] **No Waterfalls**: Multiple `await` lines in a row? *Nah, bhai. Use Promise.all().* - [ ] **Bundle Hygiene**: Large libraries in main bundle? *Dynamic import karo!* - [ ] **Accessibility First**: No `aria-label` on buttons? *Ye toh basic hai, yaar.* - [ ] **Forms**: `autocomplete` attributes missing? *User ko help karo!* - [ ] **Performance**: Unnecessary re-renders? *Memoize expensive stuff.* --- *Remember: Perf is a feature, not an afterthought.*
Related Skills
human-optimized-frontend
Generates a frontend interface that is visually pleasing and experientially sound by jointly optimizing aesthetics, motion graphics, and user experience (UX) using quantified evaluation. Use only when the user explicitly invokes this skill by name to redesign a frontend. Trigger keywords: use human-optimized-frontend, redesign frontend, redesign interface.
guru-mcp
Access Guru knowledge base via MCP - ask AI questions, search documents, create drafts, and update cards. Connects to all your Guru sources including Slack, Drive, Confluence, and SharePoint.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
frontend-design-extractor
Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.
frontend-design-2
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
portfolio-watcher
Monitor stock/crypto holdings, get price alerts, track portfolio performance
portainer
Control Docker containers and stacks via Portainer API. List containers, start/stop/restart, view logs, and redeploy stacks from git.
portable-tools
Build cross-device tools without hardcoding paths or account names
polymarket
Trade prediction markets on Polymarket. Analyze odds, place bets, track positions, automate alerts, and maximize returns from event outcomes. Covers sports, politics, entertainment, and more.
polymarket-traiding-bot
No description provided.
polymarket-analysis
Analyze Polymarket prediction markets for trading edges. Pair Cost arbitrage, whale tracking, sentiment analysis, momentum signals, user profile tracking. No execution.
polymarket-agent
Autonomous prediction market agent - analyzes markets, researches news, and identifies trading opportunities