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.
Why use this skill?
Optimize your React and Next.js applications with Pinak Frontend Guru. Get deep performance audits, UX/UI analysis, and seamless Vercel deployment help in one tool.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/sharanga10/pinak-frontend-guruWhat This Skill Does
Pinak Frontend Guru is an advanced AI agent skill designed to bridge the gap between functional code and professional-grade production software. Operating with a unique Hinglish persona, the skill acts as a dual-threat auditor: it simultaneously evaluates React/Next.js codebase performance using Vercel’s gold-standard best practices and critiques UX/UI patterns based on established Web Interface Guidelines. Unlike standard linters that only highlight syntax errors, Pinak identifies architectural bottlenecks like request waterfalls, inefficient bundle sizes, and accessibility regressions. It is built to ensure that your frontend is not only performant but also accessible, user-friendly, and ready for a seamless Vercel deployment.
Installation
To integrate this expert auditor into your OpenClaw environment, use the command:
clawhub install openclaw/skills/skills/sharanga10/pinak-frontend-guru
Once installed, the skill dynamically accesses your local frontend directory to provide real-time recommendations and refactoring suggestions.
Use Cases
- Production Readiness: Use this skill before a major launch to ensure your app meets modern web performance standards.
- Legacy Code Refactoring: Identify 'code smells' in aging React components that might be causing re-render bloat or UI lag.
- UX/Accessibility Auditing: Ensure your forms, buttons, and touch targets follow W3C and WCAG compliance via automated Interface Guideline checking.
- Deployment Automation: Seamlessly transition from audit to production by leveraging the skill's integrated ability to trigger deployments.
Example Prompts
- "Bhai, main ye complex dashboard build kar raha hoon, check kar performance mein kya bottlenecks ho sakte hain?"
- "My Next.js page is loading slowly, help me audit for waterfalls and fix the bundle size."
- "Is this component accessible? Review the accessibility and UX patterns in this file, then deploy it to Vercel."
Tips & Limitations
To get the most out of Pinak, always ensure your local repository is properly structured (e.g., standard Next.js directory layout). The skill performs best when given specific components or pages to focus on, rather than an entire monorepo at once. While the AI provides actionable advice on bundle splitting and rendering patterns, always verify the generated code changes in your staging environment before pushing to production. Remember: Performance is a feature, not an afterthought.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-sharanga10-pinak-frontend-guru": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, file-write, external-api
Related Skills
vercel-deploy
Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".