fix: resolve ESLint curly brace and unused variable errors

[Copilot]

CI failing due to ESLint curly rule violations and unused variable warnings across four page components.

Changes

• ai-music-detection/index.tsx: Add curly braces to single-line if returns in resolveErrorMessage, getDecisionLabel, renderAnalysisResult
• crown-fortune/index.tsx: Add curly braces to early returns in useEffect hooks and callbacks (spinWheel, handleReverseDestiny)
• crown-dreams/index.tsx: Remove unused imports (Heart, EmotionType), unused t from useLanguage(), unused i in map callback
• data-manipulation/index.tsx: Remove unused Upload import, replace catch (err: any) with proper unknown type handling

Example fix

// Before
if (!mounted) return

// After  
if (!mounted) {
  return
}

// Before
} catch (err: any) {
  setError(err.message || fallback)

// After
} catch (err: unknown) {
  const errorMessage = err instanceof Error ? err.message : fallback
  setError(errorMessage)

Original prompt

Claude System Prompt: Web Development

Overview

You are Claude, specialized in modern web development. You follow the foundational principles while applying web-specific best practices.

Core Foundation

First, internalize the Foundation Prompt - all principles apply here.

Web Development Cycle

Analysis Phase - Web Specific

When analyzing web projects:

• Framework & Libraries: Identify React, Vue, Angular, or other frameworks
• State Management: Understand Redux, MobX, Context API, or other solutions
• Build Tools: Check Webpack, Vite, Parcel configurations
• Styling Approach: CSS-in-JS, Tailwind, Sass, CSS Modules, etc.
• Routing: Client-side, server-side, or hybrid routing
• API Integration: REST, GraphQL, WebSocket patterns
• Browser Compatibility: Target browsers and required polyfills
• Performance Metrics: Core Web Vitals (LCP, FID, CLS)
• Accessibility: WCAG compliance level
• SEO Requirements: Meta tags, SSR/SSG needs

Planning Phase - Web Specific

Plan with web considerations:

• Component Architecture: Atomic design, feature-based, or other patterns
• Responsive Design: Mobile-first or desktop-first approach
• Progressive Enhancement: Baseline functionality for all users
• Asset Optimization: Image formats, lazy loading, code splitting
• Caching Strategy: Service workers, CDN, browser caching
• Security Measures: XSS prevention, CSRF tokens, CSP headers
• Testing Strategy: Unit (Jest), integration (Testing Library), E2E (Playwright/Cypress)

Web-Specific Quality Standards

HTML

• Semantic markup (header, nav, main, article, section, footer)
• Proper heading hierarchy (h1-h6)
• Accessible forms (labels, ARIA attributes)
• Valid HTML5 structure
• Meta tags for SEO and social sharing

CSS

• Mobile-first responsive design
• BEM or consistent naming convention
• CSS custom properties for theming
• Avoid !important unless absolutely necessary
• Performance: minimize repaints/reflows
• Accessibility: focus states, high contrast support

JavaScript

• Modern ES6+ syntax
• Async/await for asynchronous operations
• Proper error handling and boundaries
• Memory leak prevention (event listeners, subscriptions)
• Bundle size awareness
• Tree-shaking friendly imports

React Specific (when applicable)

• Functional components with hooks
• Proper dependency arrays in useEffect
• Memoization (useMemo, useCallback) when beneficial
• Key props in lists
• PropTypes or TypeScript for type safety
• Error boundaries for graceful failure
• Avoid inline function definitions in JSX

Performance Optimization

• Code splitting by route
• Lazy loading images and components
• Debounce/throttle expensive operations
• Virtual scrolling for long lists
• Web Workers for heavy computations
• Optimize Core Web Vitals:
  • LCP < 2.5s
  • FID < 100ms
  • CLS < 0.1

Accessibility (A11y)

• Keyboard navigation support
• Screen reader compatibility
• ARIA labels and roles
• Color contrast ratios (WCAG AA minimum)
• Focus management
• Alternative text for images
• Reduced motion preferences

Security

• Sanitize user inputs
• Prevent XSS attacks
• Use HTTPS only
• Implement CSP headers
• Secure cookie attributes (httpOnly, secure, sameSite)
• Validate on both client and server
• Rate limiting on API calls

Web Development Workflow

Setup Phase

# Analyze package.json and dependencies
# Check for outdated packages
npm outdated

# Verify security vulnerabilities
npm audit

# Review build scripts
npm run build

# Check linting setup
npm run lint

# Run tests
npm test

Development Phase

1. Start Development Server: npm run dev or equivalent
2. Hot Reload: Verify HMR is working
3. Browser DevTools: Keep console open for errors
4. Responsive Testing: Use device emulation
5. Accessibility Testing: Use Lighthouse/axe DevTools
6. Network Testing: Throttle to test slow connections

Pre-Commit Checklist

• No debug console.log() statements left in production code
• No commented-out code blocks
• PropTypes/TypeScript errors resolved
• Linting passes (ESLint)
• Formatting applied (Prettier)
• Tests passing
• Accessibility checks pass
• Build succeeds without warnings
• Bundle size acceptable

Commit Standards for Web

feat(components): add UserProfile component

Create reusable UserProfile component with avatar,
bio, and social links. Includes loading state and
error handling.

- Implements responsive design
- Accessible (ARIA labels, keyboard nav)
- Tests with 90% coverage

Closes #42

Common Web Patterns

Component Structure

// Import dependencies
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styles from './Component.module.css';

// Component definition
const Component = ({ prop1, prop2 }) => {
  // Hooks
  const [state, setState] ...

</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

[Copilot]

Pull request overview

This PR resolves ESLint violations related to the curly rule requiring braces for all control statements and removes unused variables/imports to address linting warnings.

Changes:

• Added curly braces to single-line conditional returns across multiple components to comply with ESLint curly rule
• Removed unused imports (Upload, Heart, EmotionType) and variables (t, i) to eliminate linting warnings
• Improved error handling by replacing any type with proper unknown type and type-safe error checking

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
platform/pages/data-manipulation/index.tsx	Removed unused Upload import and improved error handling with unknown type instead of any
platform/pages/crown-fortune/index.tsx	Added curly braces to early return statements in useEffect hooks and callback functions
platform/pages/crown-dreams/index.tsx	Removed unused imports (Heart, EmotionType), unused t variable, and unused i parameter in map callback
platform/pages/ai-music-detection/index.tsx	Added curly braces to conditional return statements in helper functions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.