Run any Skill in Manus with one click

add-antd-component

Stars1

Forks0

UpdatedJune 8, 2026 at 23:37

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.

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 DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	add-antd-component
description	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.

Add Ant Design Component Skill

Follow this workflow when adding UI components that use Ant Design (antd) v5+.

Steps

Determine scope
- Is this for apps/staff, apps/public, or a shared component in packages/ui?
- Staff and public have different themes via AntdProvider (staff often blue primary, public green in examples).
Explore existing patterns
- Read current components in the target app and in packages/ui/src/ (especially antd-provider.tsx).
- Check how antd components are currently used (Button, Form, Card, List, Input, etc.).
- Look at agents/skills/add-ui-component.md and the Grok-native add-ui-component skill for general guidance.
Design
- Prefer composing antd primitives.
- Use ConfigProvider theme tokens where possible.
- Keep layout/spacing with Tailwind if needed, but antd for interactive components.
- Make the component theme-aware and responsive.
- If reusable, place it in packages/ui/src/ and export it.
Implementation
- Create or edit .tsx files.
- Use proper TypeScript (extends @repo/config-typescript/react).
- If it needs data, integrate with Apollo Client cleanly (the UIs talk to the shared apps/api GraphQL backend).
- Add the component to a page or create a small demo section.
Polish
- Run biome check . --write on the changed files.
- Run tsgo --noEmit (or the package's check-types).
- Consider accessibility (antd handles a lot, but verify).
Review
- Strongly consider running the review-component skill on the new work.

Ant Design Specific Tips

Use Form, Input, Button, Card, Modal, Table, Select, etc. as primary building blocks.
Leverage theme prop on ConfigProvider / AntdProvider for differentiation between staff and public.
For icons, use @ant-design/icons.
Avoid heavy custom CSS; use antd's design system and token overrides.

Output

Create the component files.
Show a short usage example in the relevant App or a new demo page.
Note any updates needed to the shared library or theming.
Suggest whether this should also get a portable version in agents/skills/.

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-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

apollo-federation

simnova/agent-playground

Guide for authoring Apollo Federation subgraph schemas with entities, sharing, and cross-subgraph resolution. Use this skill when: (1) creating or evolving federated schemas for the backend (future split of apps/api or new subgraphs), (2) defining entities with @key, (3) using @shareable, @external, @requires, @provides, @override, (4) troubleshooting composition errors. In this monorepo, start with the single server in apps/api but prepare for federation. Coordinate with graphql-schema, update-graphql, rover. The UIs in staff/public would query the supergraph.

2026-06-081

name	add-antd-component
description	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.

Add Ant Design Component Skill

Follow this workflow when adding UI components that use Ant Design (antd) v5+.

Steps

Determine scope
- Is this for apps/staff, apps/public, or a shared component in packages/ui?
- Staff and public have different themes via AntdProvider (staff often blue primary, public green in examples).
Explore existing patterns
- Read current components in the target app and in packages/ui/src/ (especially antd-provider.tsx).
- Check how antd components are currently used (Button, Form, Card, List, Input, etc.).
- Look at agents/skills/add-ui-component.md and the Grok-native add-ui-component skill for general guidance.
Design
- Prefer composing antd primitives.
- Use ConfigProvider theme tokens where possible.
- Keep layout/spacing with Tailwind if needed, but antd for interactive components.
- Make the component theme-aware and responsive.
- If reusable, place it in packages/ui/src/ and export it.
Implementation
- Create or edit .tsx files.
- Use proper TypeScript (extends @repo/config-typescript/react).
- If it needs data, integrate with Apollo Client cleanly (the UIs talk to the shared apps/api GraphQL backend).
- Add the component to a page or create a small demo section.
Polish
- Run biome check . --write on the changed files.
- Run tsgo --noEmit (or the package's check-types).
- Consider accessibility (antd handles a lot, but verify).
Review
- Strongly consider running the review-component skill on the new work.

Ant Design Specific Tips

Use Form, Input, Button, Card, Modal, Table, Select, etc. as primary building blocks.
Leverage theme prop on ConfigProvider / AntdProvider for differentiation between staff and public.
For icons, use @ant-design/icons.
Avoid heavy custom CSS; use antd's design system and token overrides.

Output

Create the component files.
Show a short usage example in the relevant App or a new demo page.
Note any updates needed to the shared library or theming.
Suggest whether this should also get a portable version in agents/skills/.