Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By kinneyyan
Front-end expert, proficient in various front-end skills, especially React and Next.js
npx claudepluginhub kinneyyan/prompts --plugin frontend-big-brotherYou are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, styles, and documentation following modern best practices.
You are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection points, unsafe DOM manipulation, and improper sanitization.
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.
Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility. Use PROACTIVELY for JavaScript optimization, async debugging, or complex JS patterns.
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
Expert in secure mobile coding practices specializing in input validation, WebView security, and mobile-specific security patterns. Use PROACTIVELY for mobile security implementations or mobile security code reviews.
Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows.
Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Frontend development skill with design and implementation checklists
React/TypeScript frontend + Go backend enforcement harness. 92 wired hooks across 101 scripts enforce patterns on every edit. Green != done: `test-warning-check` surfaces warnings on passing test/lint/type runs (DeprecationWarning, React `act()`, unhandled rejection, `@ts-ignore`); `ci-warning-audit` Stop-hook scans `gh run view --log` on green CI for deprecations / console warnings / skipped tests. 66 skills from TDD through CI-green PR, including /steelman anti-sycophancy guard + /snyk-ux-security per-path vuln sweep (JS + Go ecosystems; exploitability-triage first gate via `bun why`/`go mod why`/`govulncheck`; top-level direct dep bump first, parent dep bump second, resolutions/overrides/replace as last resort only with follow-up TODO to remove; React 18 pin + changelog-walked major bumps + no-deferral escalation; Go `snyk test --file=go.mod` + `go get -u` + `go mod tidy` + `govulncheck` verify). Session exit blocked while PR review threads remain unresolved. TypeScript escape hatches blocked at Edit. tsconfig strictness weakening blocked. Worktree isolation + branch safety hook-enforced. bun.lock + yarn.lock parity enforced (Snyk IO doesn't parse bun.lock). 21 LLM failure modes enforced: 7 Karpathy single-agent + 14 MAST multi-agent (Cemri et al. NeurIPS 2025). OWASP + STRIDE subset + snyk/bun audit. Core Web Vitals perf gate. MCP ban with CLI redirect (~20x token savings). Agent-browser wrap (~91% token reduction for AI browsing). 3-hat plan review (product/engineering/design). 9 agents (adds plan hats + karpathy reference), 5 routines. Opus 4.7 tuned, POSIX-friendly.
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Modern React and UI development expertise. Master React 19, Next.js 15, component architecture, state management, performance optimization, and design systems.
Frontend platform discipline: CSS, Tailwind CSS v4, accessibility, and browser-specific practices
Frontend and mobile development with React, Next.js, React Native, and Tailwind
A collection of rules, workflows/commands, skills, sub-agents, hooks, and commonly used configurations that I use in my daily work with coding agents (including but not limited to Cline, Kilo Code, Claude Code).
NOTE: Files in the workflows directory are being gradually merged into the commands directory to achieve unified workflows/commands management across all agents.
Copy the commands from setup_<platform>.sh into your terminal to copy all workflows/commands and skills from this repo to the Global configuration of Cline, Kilo Code, or Claude Code with one click:
prompts/
├── .claude-plugin # claude code plugin and marketplace manifest
│ └── marketplace.json # marketplace directory for /plugin marketplace add
├── claude-code # claude code related configuration
│ ├── agents # specialized sub-agents for delegation
│ │ ├── code-reviewer.md # professional code review expert
│ │ └── prompt-engineer.md # prompt engineering
│ ├── hooks
│ │ └── formatter.sh
│ ├── plugins
│ │ └── frontend-big-brother # claude code plugin provided by this repo: Frontend Big Brother
│ └── settings.json # commonly used claude code settings
├── claude-code-router
│ └── config.json # ccr common configuration
├── cline
│ └── hooks
│ └── PostToolUse # cline specific hook: formatting for frontend code
├── commands # workflows/commands for most coding agents
│ ├── commit-after-cr-lite.md # skill version of [Create Git Commit After Code Review]
│ ├── commit-after-cr.md # Create Git Commit After Code Review @deprecated
│ ├── commit.md # Create a Git commit with a concise message based on current changes
│ ├── create-unit-test.md # Generate corresponding frontend unit test file based on user-provided path
│ ├── gen-pages-doc.md # Generate README.md for page files using script provided by @bud-fe/docs-gen-cli
│ ├── gen-pages-menus-overview.md # Generate overview documentation for pages and menus using script provided by @bud-fe/docs-gen-cli
│ ├── learn.md # /learn - Extract patterns from conversation from https://github.com/affaan-m/everything-claude-code
│ ├── plan.md # /plan - Implementation planning from https://github.com/affaan-m/everything-claude-code
│ └── understand.md # Analyze and understand current project architecture
├── memory-bank # memory bank files
│ ├── code-spec.md # Frontend code conventions
│ └── testing-spec.md # Frontend unit testing conventions (EARS format)
├── rules # Always-follow guidelines (system prompt)
│ ├── baby-steps.md # Small steps, rapid progress
│ └── temporal-memory-bank.md # structured documentation system. from https://github.com/cline/prompts/blob/main/.clinerules/temporal-memory-bank.md
├── setup_claude.sh # installation script for claude code
├── setup_cline.sh # installation script for cline
├── setup_kilocode.sh # installation script for kilo code
├── skills # domain knowledge/skill packages
│ ├── code-review # code review (temporarily stores metrics data locally)
│ ├── ice-js-3-development-patterns # ice.js3 project console development patterns
│ └── metrics-report # metrics data reporting (data retrieved from local storage)
├── templates # some examples/best practices
│ └── ice3-project # AGENTS.md/CLAUDE.md for ice.js3 projects
│ ├── child-app # sub-app
│ │ ├── AGENTS.md
│ │ └── CLAUDE.md
│ └── framework-app # main app
│ ├── AGENTS.md
│ └── CLAUDE.md
└── workflows # only for cline, kilo code. Gradually merge into commands/
├── commit-after-cr-lite.md
├── commit-after-cr.md
├── create-unit-test.md
├── daily-summary.md
├── gen-pages-doc.md
├── gen-pages-menus-overview.md
└── spec.md