# Claude Frontend Design Skill Requirements for Production-Grade React Components

> Master Claude's frontend design skills for production-grade React components. Learn essential requirements like single-file JSX, Tailwind CSS, state management, and approved libraries.

- Repository: [Ásgeir Thor Johnson/system_prompts_leaks](https://github.com/asgeirtj/system_prompts_leaks)
- Tags: api-reference
- Published: 2026-02-16

---

**Claude's frontend-design skill requires single-file JSX components with default exports, Tailwind-only styling, React state management, and specific allowed libraries to ensure production-ready code that runs in the Claude sandbox.**

The **frontend-design** skill enables Claude to create distinctive, production-grade React components according to strict architectural rules defined in the `asgeirtj/system_prompts_leaks` repository. These requirements, specified in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md), ensure generated code meets high design standards while remaining compatible with the Claude sandbox environment.

## Core Architectural Requirements

### Skill Activation and Scope

Claude must trigger the **frontend-design** skill when requests involve web components, pages, or full applications. According to lines 80-86 in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md), the skill's purpose is to "Create distinctive, production-grade frontend interfaces with high design quality"【🔗 /Anthropic/old/claude-opus-4.5.md#L80-L86】.

### Single-File Artifact Policy

All React code must be emitted as a single `.jsx` file. As specified in lines 48-52 of the source file, Claude's artifact policy forces all HTML/React code into one file to simplify rendering in the UI【🔗 /Anthropic/old/claude-opus-4.5.md#L48-L52】. This file must contain:

- The component implementation
- Any required CSS via Tailwind utilities
- All necessary import statements

### Component Export and Interface Design

Components must follow strict export and interface rules to ensure immediate renderability:

- **Default export**: The component must be exported as `export default function ComponentName()`
- **Zero external dependencies**: The component must not require external props, or must provide sensible default values for all props

These constraints, defined in lines 48-52, guarantee the component can be rendered instantly without additional wiring【🔗 /Anthropic/old/claude-opus-4.5.md#L48-L52】.

## Technical Implementation Constraints

### Styling with Tailwind CSS

Claude must use **only Tailwind's core utility classes** for styling. According to lines 51-52 in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md), arbitrary values and custom CSS files are prohibited because Tailwind is the only stylesheet available in the sandbox; arbitrary values cause runtime errors【🔗 /Anthropic/old/claude-opus-4.5.md#L51-L52】.

**Valid**: `className="px-4 py-2 bg-blue-600 rounded"`
**Invalid**: `className="w-[100px] bg-[#custom]"` or separate `.css` files

### State Management Limitations

Browser storage APIs are strictly forbidden. Lines 72-78 explicitly block `localStorage`, `sessionStorage`, and any browser storage APIs【🔗 /Anthropic/old/claude-opus-4.5.md#L72-L78】.

Instead, Claude must use:
- `useState` for simple state
- `useReducer` for complex state logic
- React Context if needed (imported explicitly)

### Allowed External Libraries

Claude may import from a curated list of libraries hosted in the sandbox environment. According to lines 53-71 in the source file, allowed libraries include【🔗 /Anthropic/old/claude-opus-4.5.md#L53-L71】:

- **Icons**: `lucide-react`
- **Charts**: `recharts`, `d3`, `Plotly`
- **Data processing**: `mathjs`, `lodash`, `papaparse`, `SheetJS`
- **3D graphics**: [`three.js`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/three.js) (CDN version only)
- **UI components**: `shadcn/ui`

All imports must be explicit at the top of the file, as shown in lines 51-53【🔗 /Anthropic/old/claude-opus-4.5.md#L51-L53】.

### Prohibited HTML Elements

HTML `<form>` tags are blocked in the iframe sandbox. Line 84 specifies that forms cause runtime failures and should be replaced with React `<button>` elements and `onClick` handlers【🔗 /Anthropic/old/claude-opus-4.5.md#L84-L84】.

## Design Quality Standards

Beyond technical constraints, Claude must deliver **distinctive, production-grade** interfaces. Lines 84-86 emphasize avoiding "generic AI aesthetics" and instead using modern design language with clear hierarchy, accessible contrast, and Material-Design-inspired spacing【🔗 /Anthropic/old/claude-opus-4.5.md#L84-L86】.

Because Claude cannot execute components in the sandbox, it must **reason about correctness** by verifying:
- All imported symbols exist in the allowed libraries list
- Props have default values
- Tailwind classes use valid core utilities

## Code Examples

### Basic Component with React State

This example demonstrates the required structure: default export, explicit hook imports, Tailwind-only styling, and no external props.

```jsx
import { useState } from "react";

export default function LoginButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    // Simulated async login
    await new Promise(r => setTimeout(r, 800));
    setLoading(false);
    alert("Logged in!");
  };

  return (
    <button
      onClick={handleClick}
      disabled={loading}
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
    >
      {loading ? "Signing…" : "Sign In"}
    </button>
  );
}

```

*Key compliance points:* default export, no required props, Tailwind core utilities only, `useState` imported from "react", no `<form>` tags.

### Component with Allowed External Library

This example uses `recharts` from the allowed libraries list to demonstrate importing and using external dependencies.

```jsx
import { useState } from "react";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const sampleData = [
  { time: "Jan", value: 30 },
  { time: "Feb", value: 45 },
  { time: "Mar", value: 28 },
  { time: "Apr", value: 55 },
];

export default function TrendCard() {
  const [data] = useState(sampleData);

  return (
    <div className="p-4 bg-white rounded shadow">
      <h3 className="mb-2 text-lg font-medium text-gray-800">Monthly Trend</h3>
      <ResponsiveContainer width="100%" height={180}>
        <LineChart data={data}>
          <XAxis dataKey="time" stroke="#555" />
          <YAxis stroke="#555" />
          <Tooltip />
          <Line type="monotone" dataKey="value" stroke="#3b82f6" strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

```

*Key compliance points:* imports from allowed library (`recharts`), default export, Tailwind for layout, no browser storage APIs.

## Summary

- **Single-file constraint**: All React components must be delivered as one `.jsx` file containing logic, markup, and Tailwind classes.
- **Export requirements**: Components must use `export default` and require no external props (or provide defaults).
- **Styling limits**: Only Tailwind core utility classes are permitted; arbitrary values and custom CSS files are blocked.
- **State management**: Use React hooks (`useState`, `useReducer`) exclusively; `localStorage` and `sessionStorage` are forbidden.
- **Library restrictions**: Only curated libraries like `lucide-react`, `recharts`, and `shadcn/ui` may be imported.
- **HTML limitations**: `<form>` tags are prohibited; use React event handlers instead.
- **Design standards**: Output must avoid generic AI aesthetics and achieve distinctive, production-grade quality.

## Frequently Asked Questions

### Can I use custom CSS files or CSS-in-JS libraries with Claude's frontend-design skill?

No. According to the specifications in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md) lines 51-52, Claude must use **only Tailwind's core utility classes** for styling. Custom CSS files, CSS-in-JS solutions like styled-components, and Tailwind arbitrary values (e.g., `w-[100px]`) are prohibited because Tailwind is the only stylesheet available in the sandbox environment.

### Why does Claude forbid localStorage and sessionStorage in React components?

Browser storage APIs are explicitly blocked in the Claude sandbox environment. As documented in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md) lines 72-78, Claude must use React state management hooks like `useState` and `useReducer` instead. This constraint ensures components run correctly within the sandbox's security model while maintaining predictable state behavior.

### Which UI component libraries can Claude import when building React components?

Claude may import from a curated list of allowed libraries specified in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md) lines 53-71. These include **shadcn/ui** for pre-styled components, **lucide-react** for icons, **recharts** for data visualization, and utility libraries like **lodash** and **mathjs**. All imports must be explicit at the top of the single-file component.

### How should I handle form submissions without using HTML form tags?

Since HTML `<form>` tags are blocked in the Claude sandbox iframe (as noted in [`Anthropic/old/claude-opus-4.5.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-opus-4.5.md) line 84), you should implement form-like behavior using React `<button>` elements with `onClick` handlers. Manage form state with `useState`, handle validation within the component, and trigger actions directly through event handlers rather than traditional form submission events.