Complete frontend development skill combining distinctive design aesthetics with technical excellence. Creates production-grade web applications using React, Next.js, TypeScript, and modern tooling. Use when building web components, pages, or applications that require both exceptional design quality and robust technical implementation. Handles everything from creative UI design to performance optimization, component scaffolding, bundle analysis, and deployment.
From web-devnpx claudepluginhub nickloveinvesting/nick-love-plugins --plugin web-devThis skill uses the workspace's default tool permissions.
references/nextjs_optimization.mdreferences/react_patterns.mdscripts/bundle_analyzer.pyscripts/component_generator.pySearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Complete toolkit for building exceptional frontend applications that combine distinctive design with technical excellence.
Before any technical implementation, establish a strong design foundation:
1. Context Understanding
2. Aesthetic Direction Choose a BOLD, intentional aesthetic direction. Avoid generic AI aesthetics:
3. Visual System Design
Typography Hierarchy
/* Distinctive font system */
:root {
--font-display: 'Playfair Display', 'Crimson Text', 'Abril Fatface';
--font-body: 'Source Sans Pro', 'IBM Plex Sans', 'Nunito Sans';
--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro';
}
Color & Theme System
:root {
/* Theme-specific color variables */
--color-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
--color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
--color-surface: hsl(var(--surface-h) var(--surface-s) var(--surface-l));
--color-text: hsl(var(--text-h) var(--text-s) var(--text-l));
}
Animation Framework
/* Orchestrated motion system */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.stagger-animation > * {
animation: fadeInUp 0.6s ease-out forwards;
}
.stagger-animation > *:nth-child(1) { animation-delay: 0ms; }
.stagger-animation > *:nth-child(2) { animation-delay: 100ms; }
.stagger-animation > *:nth-child(3) { animation-delay: 200ms; }
Core Technologies
Project Structure
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base design system components
│ ├── forms/ # Form-specific components
│ └── layout/ # Layout components
├── pages/ # Page components
├── hooks/ # Custom React hooks
├── lib/ # Utilities and configurations
├── styles/ # Global styles and themes
├── types/ # TypeScript type definitions
└── utils/ # Helper functions
1. Component Development
# Generate new component with scaffolding
python scripts/component_generator.py ComponentName --type=ui
2. Performance Analysis
# Analyze bundle size and performance
python scripts/bundle_analyzer.py ./build --detailed
3. Quality Assurance
# Run comprehensive checks
npm run lint # ESLint + Prettier
npm run type-check # TypeScript compilation
npm run test # Unit tests
npm run test:e2e # End-to-end tests
Design System Components
// Base component with design system integration
interface BaseComponentProps {
variant?: 'primary' | 'secondary' | 'accent';
size?: 'sm' | 'md' | 'lg' | 'xl';
className?: string;
children?: React.ReactNode;
}
const Button: React.FC<BaseComponentProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({
variant = 'primary',
size = 'md',
className,
children,
...props
}) => {
return (
<button
className={cn(
'rounded-lg font-semibold transition-all duration-200',
variants[variant],
sizes[size],
className
)}
{...props}
>
{children}
</button>
);
};
Performance Optimizations
// Lazy loading with Suspense
const LazyComponent = lazy(() => import('./HeavyComponent'));
// Memoized expensive computations
const expensiveValue = useMemo(() => {
return heavyCalculation(data);
}, [data]);
// Optimized re-renders
const MemoizedComponent = memo(({ items }: { items: Item[] }) => {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
});
State Management
// Zustand store with TypeScript
interface AppState {
user: User | null;
theme: 'light' | 'dark';
setUser: (user: User | null) => void;
toggleTheme: () => void;
}
const useAppStore = create<AppState>((set) => ({
user: null,
theme: 'light',
setUser: (user) => set({ user }),
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light'
})),
}));
Error Boundaries & Loading States
class ErrorBoundary extends Component<
{ children: ReactNode; fallback: ReactNode },
{ hasError: boolean }
> {
constructor(props: any) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(_: Error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}
Comprehensive patterns and practices in references/react_patterns.md:
Complete optimization guide in references/nextjs_optimization.md:
Design system guidelines in references/design_system.md:
Technical standards in references/frontend_best_practices.md:
python scripts/component_generator.py ButtonCard --type=ui --props="title,subtitle,onClick"
python scripts/bundle_analyzer.py ./build --optimize --report
python scripts/frontend_scaffolder.py --template=dashboard --features="auth,charts,forms"
# Development
npm run dev # Start development server
npm run build # Production build
npm run preview # Preview build locally
npm run analyze # Bundle analysis
# Quality
npm run lint # Lint and format code
npm run type-check # TypeScript validation
npm run test # Unit tests
npm run test:e2e # End-to-end tests
npm run lighthouse # Performance audit
# Tools
python scripts/component_generator.py <name> [options]
python scripts/bundle_analyzer.py <path> [options]
python scripts/frontend_scaffolder.py [options]
// Feature: User Profile Dashboard
// 1. Design Direction: Minimal editorial with bold typography
// 2. Technical Implementation: React + TypeScript + Zustand
// 3. Performance: Lazy loading + memoization
// 4. Testing: Unit + integration + E2E coverage
const UserDashboard: React.FC = () => {
const { user, updateUser } = useAppStore();
const { data: metrics, isLoading } = useQuery(['user-metrics'], fetchMetrics);
return (
<ErrorBoundary fallback={<ErrorFallback />}>
<Suspense fallback={<DashboardSkeleton />}>
<div className="dashboard-container stagger-animation">
<ProfileHeader user={user} />
<MetricsGrid metrics={metrics} loading={isLoading} />
<ActivityFeed userId={user.id} />
</div>
</Suspense>
</ErrorBoundary>
);
};
Remember: Exceptional frontend development requires both creative vision and technical excellence. Never compromise on either aesthetic quality or technical implementation.