| name | frontend-technologies |
| description | Master modern web development with HTML, CSS, JavaScript, React, Vue, Angular, Next.js, TypeScript, and responsive design. Use when building web applications, optimizing UI performance, or learning frontend frameworks. |
| sasmp_version | 1.3.0 |
| bonded_agent | 01-typescript-fundamentals |
| bond_type | PRIMARY_BOND |
Frontend Technologies Skill
Quick Start - React with TypeScript
import React, { useState, useEffect } from 'react';
interface Props {
title: string;
}
export function Example({ title }: Props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `${title}: ${count}`;
}, [count, title]);
return (
<div>
<h1>{title}</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(c => c + 1)}>
Increment
</button>
</div>
);
}
Core Technologies
Foundation
- HTML5 semantic markup
- CSS3 (Flexbox, Grid, animations)
- JavaScript ES2020+
- TypeScript for type safety
Frameworks
- React 18+ with hooks
- Vue.js 3+ composition API
- Angular 16+ with RxJS
- Svelte for compiler-based approach
Meta-Frameworks
- Next.js - React with SSR, SSG, API routes
- Nuxt - Vue with full-stack capabilities
- SvelteKit - Svelte framework
- Remix - Focus on web fundamentals
State Management
- React Context API
- Redux Toolkit
- Zustand, Jotai, Recoil
- Vue Composition API / Pinia
- MobX, Akita
Styling
- Tailwind CSS
- CSS Modules & BEM
- Styled Components / Emotion
- SASS/SCSS
Build Tools
- Vite (fast development)
- Webpack (powerful bundling)
- Turbopack (next-gen)
- esbuild (transpilation)
Testing
- Jest unit testing
- React Testing Library
- Cypress / Playwright E2E
- Vitest for Vite projects
Best Practices
- Semantic HTML - Use correct elements for accessibility
- Responsive Design - Mobile-first approach
- Performance - Optimize Core Web Vitals
- Accessibility - WCAG 2.1 AA compliance
- Type Safety - Use TypeScript
- Code Quality - ESLint + Prettier
- Testing - Aim for 80%+ coverage
- Documentation - Storybook for components
Resources
