frontend

Plugin frontend from marketplace tianzecn-plugins in tianzecn/myclaudecode. Commands read from the repo's manifest — 1 month ago.

Skills (14)

• api-integration

  Integrate Apidog + OpenAPI specifications with your React app. Covers MCP server setup, type generation, and query layer integration. Use when setting up API clients, generating types from OpenAPI, or integrating with Apidog MCP.

• api-spec-analyzer

  Analyzes API documentation from OpenAPI specs to provide TypeScript interfaces, request/response formats, and implementation guidance. Use when implementing API integrations, debugging API errors (400, 401, 404), replacing mock APIs, verifying data types, or when user mentions endpoints, API calls,

• browser-debugger

  Systematically tests UI functionality, validates design fidelity with AI visual analysis, monitors console output, tracks network requests, and provides debugging reports using Chrome DevTools MCP. Use after implementing UI features, for design validation, when investigating console errors, for regr

• claudish-usage

  CRITICAL - Guide for using Claudish CLI ONLY through sub-agents to run Claude Code with OpenRouter models (Grok, GPT-5, Gemini, MiniMax). NEVER run Claudish directly in main context unless user explicitly requests it. Use when user mentions external AI models, Claudish, OpenRouter, or alternative mo

• core-principles

  Core principles and project structure for React 19 SPA development. Covers stack overview, project organization, agent execution rules, and authoritative sources. Use when planning new projects, onboarding, or reviewing architectural decisions.

• dependency-check

  Check for required dependencies (Chrome DevTools MCP, OpenRouter API) before running commands that need them. Use at the start of /implement, /review, /validate-ui commands to provide helpful setup guidance.

• performance-security

  Performance optimization, accessibility, and security best practices for React apps. Covers code-splitting, React Compiler patterns, asset optimization, a11y testing, and security hardening. Use when optimizing performance or reviewing security.

• react-patterns

  React 19 specific patterns including React Compiler optimization, Server Actions, Forms, and new hooks. Use when implementing React 19 features, optimizing components, or choosing between Actions vs TanStack Query for mutations.

• router-query-integration

  Integrate TanStack Router with TanStack Query for optimal data fetching. Covers route loaders with query prefetching, ensuring instant navigation, and eliminating request waterfalls. Use when setting up route loaders or optimizing navigation performance.

• shadcn-ui
• tanstack-query

  Comprehensive TanStack Query v5 patterns for async state management. Covers breaking changes, query key factories, data transformation, mutations, optimistic updates, authentication, testing with MSW, and anti-patterns. Use for all server state management, data fetching, and cache invalidation tasks

• tanstack-router

  TanStack Router patterns for type-safe, file-based routing. Covers installation, route configuration, typed params/search, layouts, and navigation. Use when setting up routes, implementing navigation, or configuring route loaders.

• tooling-setup

  Configure Vite, TypeScript, Biome, and Vitest for React 19 projects. Covers build configuration, strict TypeScript setup, linting/formatting, and testing infrastructure. Use when setting up new projects or updating tool configurations.

• ui-implementer

  Implements UI components from scratch based on design references (Figma, screenshots, mockups) with intelligent validation and adaptive agent switching. Use when user provides a design and wants pixel-perfect UI implementation with design fidelity validation. Triggers automatically when user mention

Slash commands (19)

• /frontend:api-docs-API文档

  从 OpenAPI/Swagger 规范、API URL 或代码库自动生成 API 文档

• /frontend:cleanup-artifacts-清理构建

  清理 Next.js 构建产物、缓存和依赖,回收磁盘空间

• /frontend:implement-ui-UI实现

  根据设计参考从零实现 UI 组件,智能验证和自适应代理切换

• /frontend:implement-功能实现

  全周期功能实现,多代理编排和质量门控

• /frontend:import-figma-Figma导入

  从 Figma Make 导入 React 组件并自动验证

• /frontend:nextjs-api-tester-Next.jsAPI测试器

  测试并验证 Next.js API 路由，包含全面的测试场景

• /frontend:nextjs-bundle-analyzer-Next.js包分析器

  分析并优化 Next.js 打包大小，提供详细建议

• /frontend:nextjs-component-generator-Next.js组件生成器

  为 Next.js 生成优化的 React 组件，使用 TypeScript 和最佳实践

• /frontend:nextjs-middleware-creator-Next.js中间件创建器

  创建优化的 Next.js 中间件，支持认证、速率限制和路由逻辑

• /frontend:nextjs-migration-helper-Next.js迁移助手

  全面的 Next.js 迁移助手，支持 Pages Router 到 App Router、JavaScript 到 TypeScript 和现代模式

• /frontend:nextjs-performance-audit-Next.js性能审计

  全面的 Next.js 性能审计，提供可执行的优化建议

• /frontend:nextjs-scaffold-Next.js脚手架

  创建新的 Next.js 应用，遵循最佳实践和最优配置

• /frontend:review-代码审查

  多模型代码审查编排器,支持并行执行和共识分析

• /frontend:validate-ui-UI验证

  多代理编排的 UI 设计验证,支持迭代修复和可选的外部 AI 专家审查

• /frontend:vercel-analytics-Vercel分析工具

  为 React/Vite 项目配置 Vercel Analytics 和 Speed Insights

• /frontend:vercel-deploy-optimize-Vercel部署优化

  优化并部署 Next.js 应用到 Vercel，支持性能监控

• /frontend:vercel-edge-function-Vercel边缘函数

  生成优化的 Vercel 边缘函数，支持地理位置、认证和数据转换

• /frontend:vercel-env-sync-Vercel环境同步

  在本地开发和 Vercel 部署之间同步环境变量

• /frontend:前端设计

  从「最糟糕的用户」视角设计极致人性化的前端交互与布局方案，确保任何人都能一眼看懂、一步用明白

Subagents (11)

• api-analyst

  Use this agent when you need to understand or verify API documentation, including data types, request/response formats, authentication requirements, and usage patterns. This agent should be invoked proactively when:\n\n<example>\nContext: User is implementing a new API integration\nuser: "I need to

• architect

  Use this agent when you need to plan, architect, or create a comprehensive development roadmap for a React-based frontend application. This agent should be invoked when:\n\n<example>\nContext: User wants to start building a new admin dashboard for multi-tenant management.\nuser: "I need to create an

• cleaner

  Use this agent when the user has approved an implementation and is satisfied with the results, and you need to clean up all temporary files, scripts, test files, documentation, and artifacts created during the development process. This agent should be invoked after implementation is complete and bef

• css-developer

  Use this agent when you need CSS architecture guidance, want to ensure CSS changes don't break existing styles, or need to understand the application's CSS patterns and rules. This agent maintains CSS knowledge and provides strict guidelines for UI development.\n\nExamples:\n\n- Context: UI develope

• designer

  Use this agent when you need to review and validate that an implemented UI component matches its reference design with DOM inspection and computed CSS analysis. This agent acts as a senior UX/UI designer reviewing implementation quality. Trigger this agent in these scenarios:\n\n<example>\nContext:

• developer

  Use this agent when you need to implement TypeScript frontend features, components, or refactorings in a Vite-based project. Examples: (1) User says 'Create a user profile card component with avatar, name, and bio fields' - Use this agent to implement the component following project patterns and bes

• plan-reviewer

  Use this agent to review architecture plans with external AI models before implementation begins. This agent provides multi-model perspective on architectural decisions, helping identify issues early when they're cheaper to fix. Examples:\n\n1. After architect creates a plan:\nuser: 'The architectur

• reviewer

  Use this agent when you have completed writing or modifying a logical chunk of code and need comprehensive review against simplicity principles, AEI documentation requirements, OWASP security standards, and production-readiness criteria. Examples:\n\n1. After implementing a new feature:\nuser: 'I've

• test-architect

  Use this agent when you need comprehensive test coverage analysis and implementation. Specifically use this agent when: (1) You've completed implementing a feature and need unit and integration tests written, (2) Existing tests are failing and you need a root cause analysis to determine if it's a te

• tester

  Use this agent when you need to manually test a website's user interface by interacting with elements, verifying visual feedback, and checking console logs. Examples:\n\n- Example 1:\n user: "I just updated the checkout flow on localhost:3000. Can you test it?"\n assistant: "I'll launch the ui-man

• ui-developer

  Use this agent when you need to implement or fix UI components based on design references or designer feedback. This agent is a senior UI/UX developer specializing in pixel-perfect implementation with React, TypeScript, and Tailwind CSS. Trigger this agent in these scenarios:\n\n<example>\nContext:

Similar plugins