菜单
Specifies user interface designs, React components, and interaction flows following component-based architecture. Use when designing UI specifications, defining component props and state, or documenting user interaction flows for GloboTicket features.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Design system patterns for reusable UI via atomic design, Tailwind tokens/variants, and accessibility. Use when creating atoms/molecules, theming, or hardening a11y.
Entity Framework Core best practices for configuration, queries, concurrency, and multi-tenancy.
Frontend architecture patterns for React apps (React Router 7, TanStack Query). Use when planning features, defining routes, data strategies, and component gaps.
Infrastructure standards for Docker, scripts, middleware, and authentication in multi-tenant deployments.
Integration testing performance optimization, test parallelization, cleanup strategies, and CI/CD categorization patterns. Use when optimizing test execution speed, managing test data, or structuring tests for automated pipelines.
ASP.NET Core Minimal APIs patterns for endpoints, DTOs, validation, and service integration. Use when implementing API endpoints, defining request/response contracts, or structuring API projects with clean separation of concerns.
| name | spec-writing-ui |
| description | Specifies user interface designs, React components, and interaction flows following component-based architecture. Use when designing UI specifications, defining component props and state, or documenting user interaction flows for GloboTicket features. |
## User Interface Design
### Page Structure & Navigation
**New Pages**:
1. `/resources` - Resource listing page
2. `/resources/create` - Resource creation page
3. `/resources/:id` - Resource detail page
4. `/resources/:id/edit` - Resource edit page
**Navigation Updates**:
- Add "Resources" link to main navigation menu
- Update breadcrumb component to include resource paths
### Component Breakdown
#### ResourceListPage
**Purpose**: Display paginated, filterable list of resources
**Props**: None (uses URL query params)
**State Management**: Use Tanstack Query to fetch resources based on filters using endpoint `GET /api/resources` with query key ['resources', filters]
**Child Components**:
- `ResourceCard`: Display individual resource summary
- `ResourceFilters`: Filter controls
- `Pagination`: Page navigation
**User Interactions**:
- Click card → Navigate to detail page
- Apply filters → Update URL params, refetch
- Change page → Update URL, refetch
#### ResourceForm
**Purpose**: Reusable form for create/edit operations
**Props**:
- initialValues: ResourceFormData | undefined
- onSubmit: (data: ResourceFormData) => Promise<void>
- isLoading: boolean
**Validation Rules**:
Define validation once here, then reference in API section:
- Name: Required, max 100 characters
- Description: Optional, max 500 characters
- [List all validation rules with exact constraints matching OpenAPI spec]
**Form Fields**:
1. Name (text input, required, maxLength: 100)
2. Description (textarea, optional, maxLength: 500)
3. [List all fields with types - validation rules already defined above]
**API Integration**:
- Create mode: `POST /api/resources` (see [OpenAPI spec](#openapi-specification))
- Edit mode: `PUT /api/resources/:id`
- Uses validation rules defined above
### Interaction Flows
#### Create Resource Flow
1. User clicks "Create Resource" button
2. Navigate to /resources/create
3. User fills form (fields and validation defined in ResourceForm component)
4. On submit:
a. Validate form data (using validation rules from component spec)
b. POST /api/resources
c. On success: Navigate to detail page
d. On error: Display inline validation errors
### Accessibility Requirements
- All form inputs have associated labels
- Error messages announced to screen readers
- Keyboard navigation supported throughout
- Focus management on modal open/close
- ARIA labels on icon-only buttons
### Responsive Behavior
- Desktop (>1024px): 3-column grid
- Tablet (768-1024px): 2-column grid
- Mobile (<768px): Single column, stacked layout