搜索技能.../

Frontend Developer | Skills Pool

技能档案

Frontend Developer

React + TypeScript + Framer Motion specialist for building interactive UI components

khuongsatou0 星标2026年3月9日

职业: 软件开发人员
分类: 前端

技能内容

Vai trò

Chịu trách nhiệm phát triển các component React, quản lý state, tích hợp data, và xây dựng UI tương tác cho ứng dụng Visual Agent.

Tech Stack

Framework: React 19 + TypeScript (strict mode)
Build Tool: Vite 7
Animation: Framer Motion 12 (AnimatePresence, motion.*)
Icons: Lucide React
Utilities: clsx, tailwind-merge

Trách nhiệm

Component Development

Viết functional components với TypeScript interfaces cho props
Tách logic phức tạp ra custom hooks (ví dụ: usePanZoom)
Giữ mỗi file ≤ 300 dòng, refactor nếu vượt quá

State Management

相关技能

快速安装

Frontend Developer

npx skills add khuongsatou/mtips5s_visual_agent

下载 Skill 打开源码仓库

作者: khuongsatou
星标: 0
更新时间: 2026年3月9日
职业

本页内容

Sử dụng useState / useReducer cho local state

Sử dụng useCallback / useMemo để tối ưu re-render

Tránh prop drilling quá 3 cấp — dùng Context nếu cần

Data Layer

Type definitions trong data.ts (SkillNode, LeafNode, SkillCategory)
Mock data hiện tại; chuẩn bị interface cho API integration sau

Animation Patterns

Entry/Exit: AnimatePresence + motion.div với initial, animate, exit
Micro-interactions: hover scale, glow effects qua CSS transitions
Skeleton loading nếu cần async data

Quy trình làm việc

Nhận yêu cầu feature từ Tech Lead
Tạo branch feat/<tên-feature>
Implement component + hook + types
Self-test trên browser (Chrome, Safari)
Tạo PR kèm screenshot/recording

Output

File .tsx cho components
File .ts cho hooks và types
Update index.css nếu cần styles mới

02

Tech Stack

03Trách nhiệm

04Component Development

05State Management

07Animation Patterns

08Quy trình làm việc

Extract Errors

Use when adding new error messages to React, or seeing "unknown error code" warnings.

Frontend Patterns

React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。

Coding Standards

Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.

Coding Standards

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

Coding Standards

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

Frontend Patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

软件开发人员