frontend-technologies

어떤 스킬인가요?

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.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

typescript_skill: frontend

# frontend Guide

#!/usr/bin/env python3
import json
print(json.dumps({"skill": "frontend"}, indent=2))

---
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

```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

1. **Semantic HTML** - Use correct elements for accessibility
2. **Responsive Design** - Mobile-first approach
3. **Performance** - Optimize Core Web Vitals
4. **Accessibility** - WCAG 2.1 AA compliance
5. **Type Safety** - Use TypeScript
6. **Code Quality** - ESLint + Prettier
7. **Testing** - Aim for 80%+ coverage
8. **Documentation** - Storybook for components

## Resources

- [MDN Web Docs](https://developer.mozilla.org/)
- [React Documentation](https://react.dev/)
- [Web.dev Learning](https://web.dev/learn/)