# Usage/web

> Using OpenCode for web development - HTML, CSS, JavaScript, and frontend frameworks

- Skill: `timsonner/usage-web` (Agent Skill)
- Install (CLI): `npx skillmds@latest add timsonner/usage-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/timsonner/usage-web/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: timsonner (https://skillmd.com/u/timsonner)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/timsonner/usage-web

---


# Using OpenCode for Web Development

OpenCode provides excellent support for web development projects, helping you work with HTML, CSS, JavaScript, and various frontend frameworks.

## Web Technologies Supported

OpenCode understands and can assist with:

- HTML5 and semantic markup
- CSS3, Sass, Less, and other preprocessors
- JavaScript (ES6+) and TypeScript
- Frontend frameworks: React, Vue, Angular, Svelte
- Build tools: Webpack, Vite, Parcel, Rollup
- Testing frameworks: Jest, Mocha, Cypress, Testing Library

## Web Development Assistance

### 1. Frontend Development
- Creating responsive layouts with CSS Grid and Flexbox
- Implementing accessibility best practices (a11y)
- Writing semantic HTML with proper structure
- Developing reusable UI components

### 2. Styling and Design
- Converting designs to code (HTML/CSS from mockups)
- Implementing CSS methodologies (BEM, SMACSS, etc.)
- Working with CSS-in-JS solutions
- Creating and maintaining design systems

### 3. JavaScript/TypeScript
- Writing modern JavaScript with ES6+ features
- Implementing TypeScript interfaces and types
- Working with asynchronous code (Promises, async/await)
- Managing state in frontend applications

### 4. Framework-Specific Help
- React: Hooks, context, component lifecycle
- Vue: Composition API, reactive data, directives
- Angular: Components, services, dependency injection
- Svelte: Reactive statements, stores, transitions

### 5. Testing and Quality
- Writing unit tests for frontend components
- Creating end-to-end tests with Cypress or Playwright
- Implementing accessibility testing
- Setting up CI/CD pipelines for web projects

## Common Web Tasks with OpenCode

### Creating a Responsive Component
```
Create a responsive navigation bar that collapses into a hamburger menu on mobile devices.
Use HTML5 semantic elements, CSS Flexbox, and vanilla JavaScript for the toggle functionality.
```

### Implementing State Management
```
Add state management to this React application using React Context API for user authentication state.
Include login, logout, and token persistence functionality.
```

### Styling with CSS-in-JS
```
Convert this CSS module to styled-components, maintaining all existing styles and responsive breakpoints.
```

### Writing Tests
```
Create unit tests for this Vue component using Jest and Vue Test Utils, covering props, events, and computed properties.
```

### Performance Optimization
```
Optimize this webpage for better Lighthouse scores by implementing lazy loading, minimizing CSS/JS, and optimizing images.
```

## Web Best Practices with OpenCode

When using OpenCode for web development:

1. **Follow Standards**: Ask OpenCode to follow web standards and best practices
2. **Accessibility First**: Request a11y considerations in UI implementations
3. **Performance Conscious**: Consider bundle size and performance when implementing features
4. **Responsive Design**: Ensure mobile responsiveness in UI components
5. **Maintainability**: Prioritize clean, modular code that's easy to maintain

## Example Prompts

```
How can I improve the accessibility of this form? @src/components/LoginForm.jsx
```

```
Create a CSS grid layout for a product catalog with responsive breakpoints.
```

```
Explain how to implement server-side rendering in this Next.js application.
```

```
Refactor this vanilla JavaScript code to use modern ES6+ features and best practices.
```