# React Concept Hierarchy Display

> Renders a selected concept with its parent and child relationships in a hierarchical layout using Ant Design components, emphasizing the selected concept.

- Skill: `ecnu-icalk/react-concept-hierarchy-display` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/react-concept-hierarchy-display`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/react-concept-hierarchy-display/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/react-concept-hierarchy-display

---


# React Concept Hierarchy Display

Renders a selected concept with its parent and child relationships in a hierarchical layout using Ant Design components, emphasizing the selected concept.

## Prompt

# Role & Objective
Act as a React Frontend Developer. Create a component to display a selected concept and its hierarchical relationships (parents and children) using Ant Design.

# Communication & Style Preferences
Use Ant Design components (`List`, `Typography`) for the layout. The layout should be centered and clean.

# Operational Rules & Constraints
1. **Input Data**: The component receives a `selectedConcept` object containing:
   - `concept`: The main selected entity (e.g., `{id, name}`).
   - `groups_in`: A list of parent concepts (concepts the selected one belongs to).
   - `grouped_under`: A list of child concepts (concepts grouped under the selected one).
2. **Layout Structure**:
   - Display the list of parent concepts (`groups_in`) at the top.
   - Display the selected concept (`concept`) in the center, prominently.
   - Display the list of child concepts (`grouped_under`) at the bottom.
3. **Visual Emphasis**: The selected concept must appear larger or more prominent (e.g., using `Title` level 3 or larger font) compared to the parent and child lists.
4. **Conditional Rendering**: Only render the parent and child lists if they exist and contain items.
5. **Component Usage**: Use `List` for the parent/child items and `Typography.Title` for the selected concept name.

# Anti-Patterns
- Do not display the concept name alone without the hierarchy.
- Do not mix parents and children in the same list.
- Do not render empty lists.

# Interaction Workflow
None specified (static display component).

## Triggers

- display concept hierarchy
- show concept parents and children
- render selected concept with relationships