菜单
Frontend development and API integration patterns for React, TypeScript, and state management
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-api-design --skill frontend-patterns命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
REST, GraphQL, and hybrid API architecture patterns for building scalable and maintainable APIs
Production-grade backend patterns for Node.js, Python, Go, and Java/Spring frameworks
Database design, optimization, and caching strategies for SQL, NoSQL, and Redis
基于 SOC 职业分类
正在显示 SKILL.md
| name | frontend-patterns |
| version | 2.0.0 |
| description | Frontend development and API integration patterns for React, TypeScript, and state management |
| sasmp_version | 1.3.0 |
| bonded_agent | 06-frontend-integration |
| bond_type | PRIMARY_BOND |
| atomic_design | {"single_responsibility":"Frontend API integration and state management","boundaries":{"includes":["data_fetching","state_management","error_handling","caching","optimistic_updates"],"excludes":["api_design","backend_implementation","database_queries"]}} |
| parameter_validation | {"schema":{"type":"object","properties":{"framework":{"type":"string","enum":["react","vue","svelte","nextjs"]},"state_library":{"type":"string","enum":["tanstack_query","swr","zustand","redux","apollo"]},"api_type":{"type":"string","enum":["rest","graphql"]}}}} |
| retry_config | {"enabled":true,"max_attempts":3,"backoff":{"type":"exponential","initial_delay_ms":1000,"max_delay_ms":10000}} |
| logging | {"level":"INFO","fields":["query_key","status","duration_ms","cache_hit"]} |
| dependencies | {"skills":["rest","graphql"],"agents":["06-frontend-integration"]} |
Build robust frontend applications with proper API integration and state management.
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
// Query configuration
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 30 * 60 * 1000, // 30 minutes (formerly cacheTime)
retry: 3,
retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
refetchOnWindowFocus: false,
},
},
});
// Type-safe API client
const api = {
users: {
list: async (params: { page: number; limit: number }) => {
const res = await fetch(`/api/users?${new URLSearchParams(params as )}`);
(!res.) (res);
res.() <<>>;
},
: (: ) => {
res = ();
(!res.) (res);
res.() <>;
},
: (: ) => {
res = (, {
: ,
: { : },
: .(data),
});
(!res.) (res);
res.() <>;
},
},
};
() {
({
: [, , { page }],
: api..({ page, : }),
: prev,
});
}
() {
({
: [, , id],
: api..(id),
: !!id,
});
}
() {
queryClient = ();
({
: api..,
: (newUser) => {
queryClient.({ : [, ] });
previous = queryClient.([, ]);
queryClient.([, ], ({
...old,
: [...(old?. || []), { ...newUser, : }],
}));
{ previous };
},
: {
queryClient.([, ], context?.);
},
: {
queryClient.({ : [, ] });
},
});
}
import useSWR, { mutate } from 'swr';
import useSWRMutation from 'swr/mutation';
const fetcher = async (url: string) => {
const res = await fetch(url);
if (!res.ok) throw new Error('Failed to fetch');
return res.json();
};
function useUsers() {
const { data, error, isLoading, isValidating } = useSWR<User[]>(
'/api/users',
fetcher,
{
revalidateOnFocus: false,
dedupingInterval: 5000,
}
);
return {
users: data,
isLoading,
isRefreshing: isValidating && data,
error,
};
}
// SWR Mutation
function useCreateUser() {
return useSWRMutation(
'/api/users',
async (url: string, { arg }: { arg: CreateUserInput }) => {
const res = await fetch(url, {
method: 'POST',
body: JSON.stringify(arg),
});
return res.json();
},
{
onSuccess: () => mutate('/api/users'),
}
);
}
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
interface AuthState {
user: User | null;
token: string | null;
isAuthenticated: boolean;
login: (credentials: Credentials) => Promise<void>;
logout: () => void;
updateUser: (updates: Partial<User>) => void;
}
const useAuthStore = create<AuthState>()(
devtools(
persist(
immer((set, get) => ({
user: null,
token: null,
isAuthenticated: false,
login: async (credentials) => {
const response = await api.auth.login(credentials);
set((state) => {
state.user = response.user;
state.token = response.token;
state.isAuthenticated = true;
});
},
logout: () => {
set((state) => {
state.user = null;
state.token = null;
state.isAuthenticated = false;
});
},
updateUser: (updates) => {
set((state) => {
if (state.user) {
Object.assign(state.user, updates);
}
});
},
})),
{ name: 'auth-store' }
),
{ name: 'Auth' }
)
);
// Selectors (prevent unnecessary re-renders)
const useUser = () => useAuthStore((state) => state.user);
const useIsAuthenticated = () => useAuthStore((state) => state.isAuthenticated);
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
// Async thunk
export const fetchUsers = createAsyncThunk(
'users/fetchAll',
async (params: { page: number }, { rejectWithValue }) => {
try {
return await api.users.list(params);
} catch (error) {
return rejectWithValue(error.message);
}
}
);
// Slice
const usersSlice = createSlice({
name: 'users',
initialState: {
items: [] as User[],
status: 'idle' as 'idle' | 'loading' | 'succeeded' | 'failed',
error: null as string | null,
pagination: { page: 1, total: 0 },
},
reducers: {
userAdded: (state, action: PayloadAction<User>) => {
state.items.push(action.payload);
},
userUpdated: (state, action: PayloadAction<User>) => {
const index = state.items.findIndex((u) => u.id === action.payload.id);
if (index !== -1) {
state.items[index] = action.payload;
}
},
},
extraReducers: (builder) => {
builder
.addCase(fetchUsers.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchUsers.fulfilled, (state, action) => {
state.status = 'succeeded';
state.items = action.payload.data;
state.pagination = action.payload.pagination;
})
.addCase(fetchUsers.rejected, (state, action) => {
state.status = 'failed';
state.error = action.payload as string;
});
},
});
export const { userAdded, userUpdated } = usersSlice.actions;
export default usersSlice.reducer;
// Custom error class
class ApiError extends Error {
constructor(
public response: Response,
public data?: { type: string; title: string; detail?: string }
) {
super(data?.title || 'API Error');
this.name = 'ApiError';
}
static async fromResponse(response: Response): Promise<ApiError> {
const data = await response.json().catch(() => null);
return new ApiError(response, data);
}
}
// Error boundary component
function QueryErrorBoundary({ children }: { children: React.ReactNode }) {
const queryClient = useQueryClient();
return (
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={reset}
fallbackRender={({ error, resetErrorBoundary }) => (
<div className="error-container">
<h2>Something went wrong</h2>
<p>{error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
>
{children}
</ErrorBoundary>
)}
</QueryErrorResetBoundary>
);
}
// Hook with error handling
function useUsersSafe(page: number) {
const query = useUsers(page);
useEffect(() => {
if (query.error instanceof ApiError) {
if (query.error.response.status === 401) {
// Redirect to login
router.push('/login');
} else if (query.error.response.status >= 500) {
// Show toast
toast.error('Server error. Please try again later.');
}
}
}, [query.error]);
return query;
}
function useTodoToggle() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (todo: Todo) =>
api.todos.update(todo.id, { completed: !todo.completed }),
onMutate: async (todo) => {
await queryClient.cancelQueries({ queryKey: ['todos'] });
const previous = queryClient.getQueryData<Todo[]>(['todos']);
queryClient.setQueryData<Todo[]>(['todos'], (old) =>
old?.map((t) =>
t.id === todo.id ? { ...t, completed: !t.completed } : t
)
);
return { previous };
},
onError: (err, todo, context) => {
queryClient.setQueryData(['todos'], context?.previous);
toast.error('Failed to update todo');
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] });
},
});
}
import { describe, it, expect, vi } from 'vitest';
import { renderHook, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
describe('Frontend Patterns', () => {
describe('useUsers hook', () => {
it('should fetch and return users', async () => {
vi.spyOn(global, 'fetch').mockResolvedValue({
ok: true,
json: async () => ({ data: [{ id: '1', name: 'Test' }] }),
} as Response);
const { result } = renderHook(() => useUsers(1), {
wrapper: createWrapper(),
});
await waitFor(() => expect(result.current.isSuccess).toBe(true));
expect(result.current.data?.data).toHaveLength(1);
});
it('should handle errors', async () => {
vi.spyOn(global, 'fetch').mockResolvedValue({
ok: false,
status: 500,
} as Response);
const { result } = renderHook(() => useUsers(1), {
wrapper: createWrapper(),
});
await waitFor(() => expect(result.current.isError).toBe(true));
});
});
describe('Zustand store', () => {
it('should update auth state on login', async () => {
const { result } = renderHook(() => useAuthStore());
await result.current.login({ email: 'test@test.com', password: 'pass' });
expect(result.current.isAuthenticated).toBe(true);
expect(result.current.user).toBeDefined();
});
it('should clear state on logout', () => {
const { result } = renderHook(() => useAuthStore());
result.current.logout();
expect(result.current.isAuthenticated).toBe(false);
expect(result.current.user).toBeNull();
});
});
});
| Issue | Cause | Solution |
|---|---|---|
| Infinite refetching | Missing dependency array | Use stable queryKey |
| Stale data shown | staleTime too high | Reduce staleTime or invalidate |
| Memory leak | Unmounted component | Use cleanup in useEffect |
| Too many re-renders | Non-memoized selectors | Use shallow comparison |
| Optimistic rollback fails | Missing previous snapshot | Always capture previous state |