developing-frontend

sorfeb's avatarfrom sorfeb

Frontend development for Xbox 360-inspired portfolio using Next.js 15, React, CSS Modules, and audio integration.Use when building UI components, styling, animations, client-side logic, or when the user mentions"component", "UI", "frontend", "styling", "CSS", "animation", "responsive", or "audio feedback".

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026⬇️1downloads
[Code Generation]

When & Why to Use This Skill

This Claude skill specializes in high-fidelity frontend development for creating immersive, Xbox 360-inspired web portfolios using Next.js 15 and React. It streamlines the creation of interactive UI components by enforcing strict styling conventions with CSS Modules, integrating complex audio feedback systems, and ensuring seamless responsiveness across mobile and desktop breakpoints.

Use Cases

  • Developing interactive React components that require synchronized audio feedback for user actions like hovering, clicking, and navigation.
  • Building a responsive web portfolio with a nostalgic gaming aesthetic using Next.js 15 and TypeScript best practices.
  • Implementing consistent CSS Module layouts with predefined transitions and a strict 768px mobile/desktop bifurcation.
  • Generating production-ready frontend code that adheres to specific architectural rules, such as memoization for performance and custom hook integration for sound management.
namedeveloping-frontend
description|

Frontend Development

Specialized guidance for building Xbox 360-inspired React components with audio integration and responsive design.

Critical Rules

  1. Audio Integration: Every interactive element MUST have audio feedback
  2. CSS Modules Only: Use ComponentName.module.css for all styling
  3. 768px Breakpoint: Mobile/desktop bifurcation at this breakpoint
  4. No Console Logs: Use TypeScript error handling instead
  5. No Dev Server: Never start unless explicitly requested

Quick Start Pattern

'use client';

import React, { memo } from 'react';
import { useAudioManager } from '@/hooks/useAudioManager';
import styles from './Component.module.css';

interface ComponentProps {
  /** Clear JSDoc description */
  title: string;
}

const Component = memo<ComponentProps>(({ title }) => {
  const { playSound } = useAudioManager();

  const handleClick = () => {
    playSound('click');
    // Implementation
  };

  return (
    <div className={styles.container} onClick={handleClick}>
      {title}
    </div>
  );
});

export default Component;

Sound Types

Available sounds: hover, click, navigation, back, panel, panelLeft, ting, owawa, divine, unfold, channelUp, channelDown, swing, achievement

import { useNavigationSound } from '@/hooks/useNavigationSound';

const { navigateWithSound } = useNavigationSound();
navigateWithSound('/path', 'navigation');

CSS Conventions

.container {
  /* Layout first */
  display: flex;
  position: relative;

  /* Dimensions */
  width: 100%;

  /* Spacing */
  padding: 1rem;

  /* Visual */
  background: var(--color-primary);

  /* Transitions last - 0.3s for hover, 0.5s for major */
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .container { padding: 0.5rem; }
}

Reference Files

Pre-Completion Checklist

- [ ] Audio feedback on all interactive elements
- [ ] Responsive design at 768px breakpoint
- [ ] CSS Modules with descriptive class names
- [ ] No console.log statements
- [ ] TypeScript compiles (`npm run compile`)
- [ ] Storybook story (if major component)