Name: Static Frontend Engineer
Author: nicodelclaux-tech

スキルを検索.../

Static Frontend Engineer | Skills Pool

function renderMyPanel() {
  const el = document.getElementById('myPanel');
  if (!el) return;

  const rows = filteredRows(); // applies S.dateRange filter
  if (!rows.length) {
    el.innerHTML = '';  // safe — no user data in this constant
    el.insertAdjacentHTML('afterbegin', '<div class="empty-state"><span style="color:var(--muted);font-size:11px;">No data available</span></div>');
    return;
  }

  // Render content using textContent for all user-supplied strings
  el.innerHTML = '';
  rows.forEach(r => {
    const card = document.createElement('div');
    card.className = 'kpi-card';
    card.textContent = r.label;  // textContent, never innerHTML for data
    el.appendChild(card);
  });
}

function buildKpiCard(label, value, change, unit = '') {
  const card = document.createElement('div');
  card.className = 'kpi-card';
  card.innerHTML = `
    <div class="kpi-label"></div>
    <div class="kpi-value"></div>
    <div class="kpi-delta"></div>
  `;
  // Use textContent for all data values
  card.querySelector('.kpi-label').textContent = label;
  card.querySelector('.kpi-value').textContent = value != null ? `${value}${unit}` : '—';
  const changeEl = card.querySelector('.kpi-delta');
  if (change != null) {
    changeEl.textContent = `${change >= 0 ? '+' : ''}${change.toFixed(1)}%`;
    changeEl.classList.add(change >= 0 ? 'pos' : 'neg');
  } else {
    changeEl.textContent = '—';
  }
  return card;
}

function getOrInitChart(id) {
  if (!S.charts[id]) {
    const el = document.getElementById(id);
    if (!el) return null;
    S.charts[id] = echarts.init(el);
  }
  return S.charts[id];
}

// Usage:
const ch = getOrInitChart('myChart');
if (!ch) return;
ch.setOption({ /* option */ }, true);

// Country selector — in initPage() or DOMContentLoaded
document.getElementById('countrySelect')?.addEventListener('change', function() {
  S.country = this.value;
  renderAll();
});

// Date range button group
document.querySelectorAll('.date-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    S.dateRange = this.dataset.range;
    document.querySelectorAll('.date-btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    renderAll();
  });
});

// Do NOT write your own dark/light toggle.
// The design is DARK by default. Light mode is applied by toggling
// data-theme="light" on the <html> element via app.js.
// To make your charts re-render on theme change, call renderAll() from
// the existing theme callback, or add your chart to S.charts so the
// shared re-render loop picks it up.

<!-- New panel section — copy this pattern -->
<div class="chart-panel">
  <div class="panel-title chart-title">Section Title</div>
  <div class="flex items-center justify-between" style="padding: 8px 12px;">
    <span id="sectionStatus" style="color:var(--muted); font-size:11px;"></span>
  </div>

  <!-- Chart container -->
  <div id="sectionChart" class="chart-canvas chart-main"></div>

  <!-- Empty state (shown via JS when no data) -->
  <div id="sectionEmpty" class="empty-state" style="display:none;">
    <span style="color:var(--muted); font-size:11px;">No data available for this selection</span>
  </div>
</div>

Mistake	Consequence	Correct approach
Defining a function name already in `js/ui.js` or `app.js`	Silent override, breaks shared behavior	Check all JS files first; rename if collision
Using `innerHTML` for data values	XSS vulnerability	Use `textContent`
Hardcoding hex colors	Breaks light mode	Use CSS custom properties
Calling `fetchCommodityHistory()` in multiple places	Double requests, race condition	Call only in `initPage()` once
Using `val ?? 0` for missing prices	Shows 0 instead of gap	Use `val ?? null` and check in chart data
Adding Tailwind classes without checking light mode	Dark-only component	Test by setting `html[data-theme="light"]`
Using raw Tailwind color utilities (`text-blue-600`)	Bypasses theme tokens	Use `text-app-sky`, `text-app-emerald` etc.

"Implement the forward curve KPI strip and chart as specified by charting-analytics"
"Add the power-gas correlation panel to power.html after the hero chart"
"Fix the commodities page — Gas panel is blank because NGUSD returns 402"
"Implement the custom legend for the YoY comparison chart"
"Wire up the new comparison country toggle to re-render the histogram"
"Add a status chip below the ticker bar showing last data update time"

Static Frontend Engineer

1. Identity

2. Core Mission

3. When to Use This Skill

Static Frontend Engineer

1. Identity

2. Core Mission

3. When to Use This Skill

4. When NOT to Use This Skill

5. Critical Architecture Rules

6. JavaScript Patterns

Render Function Template

KPI Card Build Function

Chart Container Init

Adding a Filter Event Listener

Dark Mode Toggle (dark-first — do not reimplement)

7. HTML Section Template

8. Common Mistakes to Avoid

9. Guardrails

10. Quality Checklist

11. Handoff Instructions

12. Example Prompts

Xurl

Acp Router

Coding Standards

Api Design

Mcp Server Patterns

Backend Patterns