Skills Guide

Constructeur UI Production

VérifiéSûr

Génère des bundles de production optimisés pour l'interface de la plateforme de trading, avec minification, division du code et hachage des chunks. Prend en charge les builds de staging, l'analyse des bundles avec visualiseur, les sourcemaps et un serveur de prévisualisation. Aide à garantir des temps de chargement rapides et à respecter les budgets de taille avant le déploiement.

Spar Skills Guide Bot
DeveloppementIntermédiaire
7002/06/2026
Claude Code
#ui-build#production-bundling#bundle-analysis#optimization

Recommandé pour

Développeur backendClaude CodeRevue de codeDéveloppeur frontendDéveloppeur fullstackRefactoring

Notre avis

Construit un bundle de production optimisé pour l'interface de la plateforme de trading, avec vérifications de type et linting intégrés.

Points forts

  • Automatise la validation TypeScript et le linting avant le build.
  • Fournit une analyse de bundle pour identifier les dépendances volumineuses.
  • Respecte des budgets de taille pour garantir des performances optimales.
  • Offre des options pour les environnements de staging et le prévisualisation.

Limites

  • Spécifique à une configuration de build existante (npm, Vite/Rollup).
  • Ne gère pas les erreurs de build au-delà des vérifications pré-build.
  • Ne supporte pas d'autres bundlers comme Webpack sans adaptation.
Quand l'utiliser

Lorsque vous devez générer un bundle de production prêt pour le déploiement, avec des optimisations et une analyse de taille.

Quand l'éviter

Pour des builds de développement rapides ou si votre projet utilise une configuration de build non standard.

Analyse de sécurité

Sûr
Score qualité90/100

This skill runs standard local build commands (npm run build, etc.) with no destructive or exfiltration actions. It does not involve network requests to external services or manipulation of sensitive data beyond what a typical build process entails.

Aucun point d'attention détecté

Exemples

Standard production build
/ui-build
Build with bundle analysis
/ui-build --analyze
Staging environment build
/ui-build --staging

name: ui-build description: Build production UI bundle with optimizations argument-hint: "[--staging|--analyze|--sourcemap]"

UI Production Builder

Build optimized production bundle for the trading platform UI.

Usage

  • /ui-build - Build for production
  • /ui-build --staging - Build for staging environment
  • /ui-build --analyze - Build with bundle analysis
  • /ui-build --sourcemap - Include source maps
  • /ui-build --preview - Build and start preview server

Build Outputs

services/ui/dist/
├── index.html
├── assets/
│   ├── index-[hash].js      # Main bundle
│   ├── index-[hash].css     # Styles
│   ├── vendor-[hash].js     # Vendor chunk
│   └── [chunk]-[hash].js    # Code-split chunks
└── favicon.ico

Instructions

When this skill is invoked:

  1. Parse arguments:

    • No args: npm run build (production)
    • --staging: npm run build:staging
    • --analyze: Add rollup-plugin-visualizer
    • --sourcemap: Enable source maps
    • --preview: Build then run preview

  2. Pre-build checks:

    • Run TypeScript check: npm run typecheck
    • Run linter: npm run lint
    • Check for environment variables

  3. Build:

    cd services/ui
npm run build

  4. Display build results:

    UI Build Complete
═══════════════════════════════════════════════════════════

Environment: production
Build time:  12.4s

Output: dist/
─────────────────────────────────────────────────────────
index.html                    1.2 KB
assets/index-a1b2c3.js      245.8 KB  (gzip: 78.2 KB)
assets/index-d4e5f6.css      32.4 KB  (gzip: 6.8 KB)
assets/vendor-g7h8i9.js     412.3 KB  (gzip: 132.1 KB)
assets/charts-j0k1l2.js      89.5 KB  (gzip: 28.4 KB)
─────────────────────────────────────────────────────────
Total:                      781.2 KB  (gzip: 245.5 KB)

✓ No unused exports detected
✓ All chunks within size budget

  5. For --analyze:

    • Generate bundle visualization
    • Open stats.html in browser
    • Show largest dependencies
    • Identify optimization opportunities

  6. For --preview:

    npm run preview
    • Serve built files locally
    • Test production build before deploy

  7. Build warnings to surface:

    • Large bundle sizes (>500KB)
    • Missing environment variables
    • Deprecated dependencies
    • TypeScript errors (build will fail)

  8. Size budgets:

    • Main bundle: <300KB (gzip <100KB)
    • Vendor bundle: <500KB (gzip <150KB)
    • Individual chunks: <100KB
Skills similaires

Expert Next.js App Router

Developpement

Un skill qui transforme Claude en expert Next.js App Router.

Claude CodeCursoradvanced
890
234
2,846
Admin

Générateur de README

Developpement

Crée des README.md professionnels et complets pour vos projets.

claudeCursorWindsurfbeginner
259
72
821
Admin

Rédacteur de Documentation API

Developpement

Génère de la documentation API complète au format OpenAPI/Swagger.

claudeCursorWindsurfintermediate
156
44
682
Admin