frontend-fundamentals
Auto-invoke when reviewing React, Vue, or frontend component code. Enforces component architecture, state management patterns, and UI best practices.
Full skill instructions
"A component should do ONE thing well. If you're describing it with 'and', split it."
Activate this skill when reviewing:
❌ UserDashboard.tsx (1000 lines)
- fetches data, manages state, renders UI, handles routing
✅ Split into:
- UserDashboardPage.tsx (container)
- UserStats.tsx (presentation)
- UserActivity.tsx (presentation)
- useUserData.ts (hook)
❌ return <div>{users.filter(u => u.active).map(u => ...)}</div>
✅ const activeUsers = useMemo(() => users.filter(u => u.active), [users]);
return <div>{activeUsers.map(u => ...)}</div>
❌ <App user={user}>
<Layout user={user}>
<Main user={user}>
<Widget user={user} />
✅ const user = useUser(); // in Widget.tsx
❌ <Button primary secondary large small disabled loading />
✅ <Button variant="primary" size="large" state="loading" />
Ask the junior these questions instead of giving answers:
See detailed patterns in:
/standards/frontend/component-architecture.md| Flag | Question to Ask |
|---|---|
| File > 200 lines | "Can we split this into smaller pieces?" |
| > 5 useState calls | "Should some of this state be lifted or combined?" |
| useEffect with [] deps but uses external values | "Are we missing dependencies?" |
| Direct DOM manipulation | "Is there a React way to do this?" |
| Inline styles everywhere | "Should we use a consistent styling approach?" |
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
This handles everything around building autonomous agents for Claude Code plugins.
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
This is the meta-skill for building skills themselves.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Helps you build event-driven automation for Claude Code using hooks that trigger on tool use, session events, and stop conditions.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Shows Claude Code how to build slash commands from markdown files, covering the YAML frontmatter options, dynamic arguments with $1/$2...
This is your reference when scaffolding Claude Code plugins or figuring out why components aren't loading.
Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos).
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience