Run any Skill in Manus with one click

review-component

Stars1

Forks0

UpdatedJune 8, 2026 at 23:37

Review a UI component (especially Ant Design based) for the staff or public apps. Use when the user asks to review, audit, or improve a component in apps/staff or apps/public. Check for consistency with the shared @repo/ui, proper theming, accessibility, and TypeScript quality.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

simnova

simnova/agent-playground

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	review-component
description	Review a UI component (especially Ant Design based) for the staff or public apps. Use when the user asks to review, audit, or improve a component in apps/staff or apps/public. Check for consistency with the shared @repo/ui, proper theming, accessibility, and TypeScript quality.

UI Component Review Skill

You are an expert at reviewing React components that use Ant Design as the primary library in a Turborepo + Vite monorepo.

Context to Gather

Identify the component file(s) the user wants reviewed.
Read the component source.
Check how it uses (or should use) components from @repo/ui and direct antd imports.
Review the parent app's theme usage (staff vs public have different primary colors via AntdProvider).
Look at related TypeScript config from @repo/config-typescript/react.
Check for proper use of hooks, state, and GraphQL integration if applicable (these UIs talk to the shared api via Apollo).

Review Checklist

Ant Design usage: Is it using antd primitives correctly (Button, Form, Card, etc.)? Are custom styles minimal and justified?
Shared library: Does it leverage @repo/ui where appropriate instead of duplicating logic?
Theming: Does it respect the AntdProvider theme (different for staff vs public)?
TypeScript: Follows the strict config in packages/config-typescript. No any, good types, proper module resolution.
Performance/Accessibility: No unnecessary re-renders, proper ARIA where antd doesn't cover it, keyboard navigation.
Consistency: Matches patterns in the other UI (staff/public) and the existing packages/ui components.
Backend integration: If it calls GraphQL, is the query/mutation clean and properly typed?
Styling: Tailwind is allowed for layout, but antd should be primary for interactive elements.

Output Format

Start with a short summary (1-2 sentences).
List findings as:
- ✅ Good
- ⚠️ Needs improvement (with specific suggestion)
- ❌ Issue (must fix)
End with recommended next steps or refactored code snippet if the change is small.

Always reference specific file paths and line numbers when possible.

Do not make changes unless explicitly asked after the review.

More from this repository

same repository

implement-feature

simnova/agent-playground

Implement a new feature or component following the conventions of this monorepo. Use when the user asks to build something new in the staff/public UIs, shared packages, or api. Strongly prefer using Ant Design for UI work and the shared @repo/ui library.

2026-06-091

add-antd-component

simnova/agent-playground

Add a new Ant Design based component or page feature to the staff or public Vite apps, or extend the shared @repo/ui library. Use when the user wants to introduce new UI elements using antd as the primary library.

2026-06-081

add-new-vite-app

simnova/agent-playground

Scaffold a new Vite + React + TypeScript app in this Turborepo (e.g. a third UI besides staff and public). Use when the user wants to add another frontend that will also connect to the shared api backend.

2026-06-081

add-ui-component

simnova/agent-playground

Create a new reusable UI component or page feature in one of the Vite UIs (staff or public), or extend the shared @repo/ui library. Use when the user wants to add a new button, form, page section, or feature using Ant Design as the primary library.

2026-06-081

apollo-client

simnova/agent-playground

Guide for building React applications with Apollo Client in the staff and public Vite apps. Use when: (1) setting up or configuring Apollo Client in apps/staff or apps/public, (2) writing GraphQL queries or mutations with hooks (useQuery, useMutation), (3) configuring caching, cache policies, or optimistic UI, (4) managing local state or error handling in the UIs that connect to the shared apps/api backend, (5) troubleshooting Apollo Client errors, performance, or integration with Ant Design components. Always coordinate with the backend schema in apps/api and use the shared @repo/ui + AntdProvider theming. Prefer patterns that work for both staff (internal) and public (customer-facing) experiences.

2026-06-081

apollo-connectors

simnova/agent-playground

Guide for writing Apollo Connectors schemas to integrate REST APIs into GraphQL. Use this skill when: (1) connecting REST services to the GraphQL backend in apps/api, (2) using @source and @connect directives, (3) implementing entity resolvers with batching from external APIs. In this monorepo, use to extend the Hono/Apollo API without duplicating logic. The staff/public UIs can then query unified data. Coordinate with graphql-schema, update-graphql, apollo-server. Test via portless https://api.localhost/graphql.

2026-06-081

name	review-component
description	Review a UI component (especially Ant Design based) for the staff or public apps. Use when the user asks to review, audit, or improve a component in apps/staff or apps/public. Check for consistency with the shared @repo/ui, proper theming, accessibility, and TypeScript quality.

UI Component Review Skill

You are an expert at reviewing React components that use Ant Design as the primary library in a Turborepo + Vite monorepo.

Context to Gather

Identify the component file(s) the user wants reviewed.
Read the component source.
Check how it uses (or should use) components from @repo/ui and direct antd imports.
Review the parent app's theme usage (staff vs public have different primary colors via AntdProvider).
Look at related TypeScript config from @repo/config-typescript/react.
Check for proper use of hooks, state, and GraphQL integration if applicable (these UIs talk to the shared api via Apollo).

Review Checklist

Ant Design usage: Is it using antd primitives correctly (Button, Form, Card, etc.)? Are custom styles minimal and justified?
Shared library: Does it leverage @repo/ui where appropriate instead of duplicating logic?
Theming: Does it respect the AntdProvider theme (different for staff vs public)?
TypeScript: Follows the strict config in packages/config-typescript. No any, good types, proper module resolution.
Performance/Accessibility: No unnecessary re-renders, proper ARIA where antd doesn't cover it, keyboard navigation.
Consistency: Matches patterns in the other UI (staff/public) and the existing packages/ui components.
Backend integration: If it calls GraphQL, is the query/mutation clean and properly typed?
Styling: Tailwind is allowed for layout, but antd should be primary for interactive elements.

Output Format

Start with a short summary (1-2 sentences).
List findings as:
- ✅ Good
- ⚠️ Needs improvement (with specific suggestion)
- ❌ Issue (must fix)
End with recommended next steps or refactored code snippet if the change is small.

Always reference specific file paths and line numbers when possible.

Do not make changes unless explicitly asked after the review.