Claude Frontend Design Skill Requirements for Production-Grade React Components

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, 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, 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, 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 (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.

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.

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 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 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}