frontend-development

Frontend Development Skill

Use this skill when building or modifying frontend components, implementing UI designs, working with Carbon Design System, ensuring design consistency, or writing user-facing content.

When to Use This Skill

• Creating new React components
• Implementing Carbon Design System components
• Styling components and layouts
• Managing component state and hooks
• Optimizing frontend performance
• Writing accessible UI code
• Creating user-facing content and copy

Core Technologies

• React 18 with hooks
• Carbon Design System v11
• Vite build tool
• CSS/SASS for styling
• Carbon Charts for data visualization

Key Principles

1. Component-First Architecture - Build reusable, focused components
2. Carbon Design Consistency - Follow IBM Carbon Design System patterns
3. Accessibility - Ensure WCAG 2.1 AA compliance
4. Performance - Optimize rendering and bundle size
5. User-Centered Content - Write clear, concise UI text

Quick Reference

React Component Pattern

import { useState, useEffect } from 'react';
import { Button, TextInput } from '@carbon/react';

export const MyComponent = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue);
  
  useEffect(() => {
    // Side effects here
  }, [value]);
  
  return (
    <div>
      <TextInput
        id="input"
        labelText="Label"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={() => console.log(value)}>
        Submit
      </Button>
    </div>
  );
};

Carbon Design System Setup

// Import Carbon styles (in main.jsx or index.css)
import '@carbon/charts-react/styles.css';

// Or use CDN in index.css
@import 'https://unpkg.com/@carbon/[email protected]/css/styles.min.css';

// Import components
import {
  Theme,
  Button,
  TextInput,
  PasswordInput,  // Separate component in v11
  DataTable,
  Tabs,
  TabList,
  Tab
} from '@carbon/react';

Common Patterns