skills.rest
stbui
stbuiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-developer

Develops React 19 frontend pages with Ant Design v6 following project conventions.

Updated Aug 9, 2026
Search Tags:#typescript#react#frontend development#vite#code standards#ant design#crud pages
One-click install
npx skills add https://github.com/stbui/trade-crawlee --skill frontend-developer-stbui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/stbui/trade-crawlee/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/stbui/trade-crawlee --skill frontend-developer-stbui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It enforces consistent, project-aligned frontend development for the trade-crawlee codebase, preventing style drift, forbidden dependencies, and missing error/loading states when building React pages. ## Core Features & Use Cases - Full-Cycle Module Development: Builds complete CRUD modules (list, detail, create, editor pages) with routing, API layer, types, and styled-components following the src/views/<module>/ directory convention. - Strict Coding Standards Enforcement: Mandates Ant Design v6 native components only, bans @ant-design/pro-components, requires TypeScript interfaces, and enforces loading/error/empty three-state handling on every user operation. - Use Case: When asked to add a new enterprise management module, it reads existing sibling modules first, then produces types.ts, api.ts, router-config.ts, list.tsx, detail.tsx, create.tsx, and editor.tsx that pass incremental lint checks out of the box. ## Quick Start Ask the agent to develop a new CRUD page or fix a frontend bug in the trade-crawlee project following its existing code conventions.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a CRUD page with React 19 and Ant Design v6?▼

Follow the module development order: define types.ts, encapsulate API calls in api.ts, register routes in router-config.ts, then build list.tsx with Table and search, detail.tsx, create.tsx, and editor.tsx reusing the form. Use useApiQuery or useList hooks for data fetching.

What state management works with React 19 and Ant Design?▼

Use @tanstack/react-query for server state, React built-in hooks like useState for page state, and Zustand or Context for cross-component sharing. Avoid introducing additional third-party state libraries unless necessary.

Can I use @ant-design/pro-components with Ant Design v6?▼

No, this project explicitly forbids @ant-design/pro-components and all Pro series components. Only native antd v6 components are allowed, with styled-components as a secondary option for custom styling needs.

How should API errors be handled in React components?▼

Wrap all async operations in try-catch blocks, check the error_code field in the ApiResponse structure, and display user-friendly messages via the useApp() context message API. Static message or Modal.confirm calls are prohibited.

Why does my Ant Design table overflow on smaller screens?▼

Tables must configure horizontal scrolling with scroll={{ x: 'max-content' }} to handle overflow. This is a mandatory project convention ensuring wide tables remain usable without breaking page layout.

Related Skills

Explore More Software Engineering Skills→
moking55moking55

create-backend-entity-with-global-type

Create NestJS TypeORM entities and shared TypeScript types for feature modules.

Community
Intermediate
openkaidenopenkaiden
10

complete-pr

Validate pull request completeness across code, tests, and documentation.

Official
Intermediate
TheCardGoatTheCardGoat
14

optimize

Diagnose and fix web performance bottlenecks across Core Web Vitals and rendering.

Official
Intermediate
cofincofin
15

inertia

Bridge server-side routing with client-side rendering using Inertia.js.

Community
Intermediate