AgentSkillsCN

frontend-desktop-dev

综合运用CSS、Node.js与Electron的专业技能，打造全面的前端与桌面端开发能力。无论是构建Web前端、Node.js后端，还是开发Electron桌面应用，此技能都能助你游刃有余。它能自动协调CSS专家、Node.js专家与Electron专家之间的协作，确保每个环节无缝衔接。

SKILL.md
--- frontmatter
name: frontend-desktop-dev
version: 1.0.0
description: "Comprehensive frontend and desktop development skill combining CSS, Node.js, and Electron expertise. Use for building web frontends, Node.js backends, or Electron desktop applications. Automatically coordinates between css-expert, nodejs-expert, and electron-expert agents."

Frontend & Desktop Development

フロントエンド/デスクトップ開発のための統合スキル。CSS、Node.js、Electron の専門家エージェントを統合活用します。

Quick Start

code
/frontend-desktop-dev [タスク説明]

例:

  • •/frontend-desktop-dev Electron でシステムトレイアプリを作成
  • •/frontend-desktop-dev レスポンシブなダッシュボードの CSS を設計
  • •/frontend-desktop-dev Node.js で高負荷 API を最適化

専門家エージェント

このスキルは以下のエージェントを活用します：

Agent専門領域主なユースケース
css-expertCSS/SCSS/CSS-in-JSレイアウト、アニメーション、レスポンシブデザイン
nodejs-expertNode.js/TypeScript非同期処理、ストリーム、API、パフォーマンス
electron-expertElectronデスクトップアプリ、IPC、ネイティブ統合、配布

タスク別ワークフロー

Electron アプリ開発

code
1. electron-expert: アーキテクチャ設計（main/renderer 分離）
2. nodejs-expert: メインプロセスロジック
3. css-expert: UI スタイリング
4. electron-expert: パッケージング・配布

Web フロントエンド

code
1. css-expert: レイアウト・スタイル設計
2. nodejs-expert: ビルドツール設定（Webpack, Vite）
3. css-expert: パフォーマンス最適化

Node.js バックエンド

code
1. nodejs-expert: API 設計・実装
2. nodejs-expert: パフォーマンス・セキュリティ

技術スタック対応

CSS

  • •CSS3, SCSS/Sass, PostCSS
  • •CSS-in-JS (styled-components, Emotion)
  • •Tailwind CSS, CSS Modules
  • •Flexbox, Grid, Container Queries

Node.js

  • •Express, Fastify, Nest.js
  • •npm, pnpm, yarn
  • •Streams, Worker Threads
  • •TypeScript, ESM

Electron

  • •Main/Renderer architecture
  • •IPC, preload scripts
  • •electron-builder, electron-forge
  • •Auto-updates, code signing

セキュリティ考慮事項

Electron

  • •Context Isolation 必須
  • •Preload で最小限の API のみ expose
  • •IPC 入力の完全なバリデーション
  • •CSP (Content Security Policy) 設定

Node.js

  • •入力バリデーション (Zod, Joi)
  • •Rate limiting
  • •Helmet でセキュリティヘッダー
  • •依存関係の脆弱性チェック

CSS

  • •XSS 対策（動的スタイルの sanitize）
  • •ユーザー入力を直接 CSS に使用しない

パフォーマンス指標

領域目標計測方法
CSSFCP < 1.5s, CLS < 0.1Lighthouse
Node.jsP99 latency < 200msAPM ツール
Electron起動時間 < 2s内部計測

WCAG コンプライアンス検証（CSS 変更時必須）

CSS/UI 変更時は以下の検証を行う：

検証チェックリスト

code
□ コントラスト比 (WCAG AA)
  - 通常テキスト: 4.5:1 以上
  - 大きいテキスト: 3:1 以上
  - UI コンポーネント: 3:1 以上

□ Light/Dark モード両方で検証
  - テキスト可読性
  - ボーダー視認性
  - シャドウ効果

□ インタラクション状態
  - :hover のコントラスト
  - :focus の視認性 (2px+ outline)
  - :disabled の区別

□ モーション設定
  - prefers-reduced-motion 対応

推奨ワークフロー

code
1. CSS 変更実装
2. /style-review で自動検証
3. 問題修正
4. Light/Dark 両モードで目視確認
5. コミット

スキル連携: /style-review スキルで WCAG 検証を自動化可能

関連リソース

公式ドキュメント

品質基準