maestro: Skill for Claude Code

Frontend Web Patterns (TEMPLATE)

This is a TEMPLATE skill. Copy this directory and customize it for your frontend framework.

Quick reference for frontend development patterns. For detailed examples, see linked guides.

Skill Usage

Aspect	Details
Consumer	subagent-frontend-architect
Purpose	Code patterns and examples for frontend implementation
Invocation	Subagents read this skill; NOT directly invocable by users
How to Customize	Replace examples below with your framework's patterns

---

Step 1: Choose Your Framework

Replace this section with your framework-specific requirements:

Option A: React

// Example: React with hooks and TypeScript
import React, { useState, useEffect } from 'react'

interface Props {
  data: DataType
}

export const MyComponent: React.FC<Props> = ({ data }) => {
  const [state, setState] = useState<StateType>(initialState)

  useEffect(() => {
    // side effects
  }, [dependencies])

  return <div>{/* JSX */}</div>
}

Option B: Vue 3

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const data = ref<DataType>(initialValue)
const computedValue = computed(() => data.value * 2)

onMounted(() => {
  // lifecycle hook
})
</script>

Option C: Angular

// Example: Angular component with TypeScript
import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  data: DataType

  constructor(private service: MyService) {}

  ngOnInit(): void {
    // initialization
  }
}

Option D: Svelte

<script lang="ts">
  import { onMount } from 'svelte'

  let data: DataType = initialValue

  $: computedValue = data * 2

  onMount(() => {
    // lifecycle
  })
</script>

<div>{data}</div>