AgentSkillsCN

adding-frontend-feature

在 FoxESS 仪表板前端新增一项 UI 功能。适用于构建仪表板组件、添加面板、实现设置切换功能，或在被要求修改 public/index.html 时使用。

SKILL.md
--- frontmatter
name: adding-frontend-feature
description: "Add a new UI feature to the FoxESS dashboard frontend. Use when building dashboard components, adding panels, implementing settings toggles, or when asked to modify public/index.html."
user-invocable: true
argument-hint: "[e.g. 'add battery health panel' or 'dark mode toggle']"

Adding a Frontend Feature

You are adding a new feature to the FoxESS Battery Monitor dashboard. The entire frontend is a single file: public/index.html.

Before Starting

  1. •Read public/index.html to understand the current structure
  2. •Identify where the new feature fits (header, stats grid, weather panel, settings, etc.)
  3. •Plan the changes needed: HTML, CSS, and JS

iOS 12 Compatibility (MANDATORY)

All JavaScript in public/index.html MUST work on iOS 12 Safari:

  • •Use var — never let or const
  • •Use function() {} — never arrow functions () => {}
  • •Use string concatenation — never template literals
  • •Use indexed for loops — never for...of
  • •Use XMLHttpRequest — never fetch()
  • •No destructuring, spread, rest, optional chaining, nullish coalescing

Implementation Steps

  1. •Add HTML in the appropriate section of the file
  2. •Add CSS in the <style> block, following existing patterns:
    • •Dark theme: background #1a1a2e, cards #16213e, text #e0e0e0
    • •Accent colors: green #4ade80, blue #60a5fa, yellow #fbbf24
    • •Use existing class naming conventions
  3. •Add JavaScript:
    • •Cache new DOM elements in initializeElements() and add to the elements object
    • •Store any user config in the config object (persisted to localStorage)
    • •If adding a settings toggle, add it to the settings panel HTML, loadSettings(), and saveSettings()
    • •If fetching external data, use XMLHttpRequest with onreadystatechange
    • •If using Open-Meteo time data, use &timeformat=unixtime and new Date(timestamp * 1000)
  4. •Bump version: Update <meta name="app-version" content="X.Y.Z"> (semver)

Validation Checklist

Before finishing, grep for these patterns that would break iOS 12:

  • •Arrow functions: =>
  • •Let/const: \blet\b, \bconst\b (in JS, not CSS)
  • •Template literals: backtick characters
  • •For...of: for.*of

After Implementation

  1. •Ask the user if they want to commit and push
  2. •If committing, use a concise message with Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
  3. •Run /reflect to update documentation if the change is significant