Loading...
Loading...
Comprehensive frontend development specialist for building modern web applications with React, Vue, Angular, and modern tooling including state management, testing, and performance optimization
npx skill4agent add 404kidwiz/claude-supercode-skills frontend-developer-skillFrontend Framework Selection
├─ New Project (greenfield)
│ ├─ Needs SEO + server-side rendering
│ │ ├─ Team knows React → Next.js 14+
│ │ ├─ Team knows Vue → Nuxt.js 3+
│ │ └─ Team flexible → Next.js (ecosystem advantage)
│ │
│ ├─ SPA without SSR requirements
│ │ ├─ React experience → React 18+ (Vite)
│ │ ├─ Vue experience → Vue 3 (Vite)
│ │ └─ Enterprise/complex forms → Angular 15+
│ │
│ └─ Static site (blog, docs)
│ └─ Astro, Next.js SSG, or Vite + React
│
└─ Existing Project
└─ Continue with existing framework (consistency)| Scenario | Library | Bundle Size | Use Case |
|---|---|---|---|
| Simple local state | useState, useReducer | 0 KB | Component-level state |
| Shared state (2-3 components) | Context API | 0 KB | Theme, auth, simple global |
| Medium app (<10 slices) | Zustand | ~1 KB | Most apps, good DX |
| Large app (10+ slices) | Redux Toolkit | ~11 KB | Enterprise, time-travel debug |
| Server state | TanStack Query | ~12 KB | API data, caching |
Styling Decision
├─ Rapid prototyping → Tailwind CSS
├─ Component library → Radix UI + Tailwind
├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion)
├─ Large team → CSS Modules or Tailwind + Design Tokens
└─ Performance-critical → Plain CSS / SCSSfunction useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}// Presentational (dumb)
const UserList = ({ users, onUserClick }: UserListProps) => (
<ul>
{users.map(user => (
<li key={user.id} onClick={() => onUserClick(user.id)}>
{user.name}
</li>
))}
</ul>
);
// Container (smart)
const UserListContainer = () => {
const { users, fetchUsers } = useUsers();
useEffect(() => fetchUsers(), [fetchUsers]);
return <UserList users={users} onUserClick={handleClick} />;
};