# Send Senior Frontend to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "senior-frontend",
    "name": "Senior Frontend",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/alirezarezvani/senior-frontend",
    "canonicalUrl": "https://clawhub.ai/alirezarezvani/senior-frontend",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/senior-frontend",
    "sourceDownloadUrl": "https://clawhub.ai/api/v1/download?slug=senior-frontend",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "references/frontend_best_practices.md",
      "references/nextjs_optimization_guide.md",
      "references/react_patterns.md",
      "scripts/bundle_analyzer.py",
      "scripts/component_generator.py"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "senior-frontend",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-08T16:47:11.061Z",
      "expiresAt": "2026-05-15T16:47:11.061Z",
      "httpStatus": 200,
      "finalUrl": "https://clawhub.ai/api/v1/download?slug=senior-frontend",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://clawhub.ai/api/v1/download?slug=senior-frontend",
        "contentDisposition": "attachment; filename=\"senior-frontend-2.1.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "senior-frontend"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/senior-frontend"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/senior-frontend",
    "downloadUrl": "https://openagent3.xyz/downloads/senior-frontend",
    "agentUrl": "https://openagent3.xyz/skills/senior-frontend/agent",
    "manifestUrl": "https://openagent3.xyz/skills/senior-frontend/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/senior-frontend/agent.md"
  }
}
```
## Documentation

### Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.

### Table of Contents

Project Scaffolding
Component Generation
Bundle Analysis
React Patterns
Next.js Optimization
Accessibility and Testing

### Project Scaffolding

Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.

### Workflow: Create New Frontend Project

Run the scaffolder with your project name and template:
python scripts/frontend_scaffolder.py my-app --template nextjs



Add optional features (auth, api, forms, testing, storybook):
python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api



Navigate to the project and install dependencies:
cd my-app && npm install



Start the development server:
npm run dev

### Scaffolder Options

OptionDescription--template nextjsNext.js 14+ with App Router and Server Components--template reactReact + Vite with TypeScript--features authAdd NextAuth.js authentication--features apiAdd React Query + API client--features formsAdd React Hook Form + Zod validation--features testingAdd Vitest + Testing Library--dry-runPreview files without creating them

### Generated Structure (Next.js)

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

### Component Generation

Generate React components with TypeScript, tests, and Storybook stories.

### Workflow: Create a New Component

Generate a client component:
python scripts/component_generator.py Button --dir src/components/ui



Generate a server component:
python scripts/component_generator.py ProductCard --type server



Generate with test and story files:
python scripts/component_generator.py UserProfile --with-test --with-story



Generate a custom hook:
python scripts/component_generator.py FormValidation --type hook

### Generator Options

OptionDescription--type clientClient component with 'use client' (default)--type serverAsync server component--type hookCustom React hook--with-testInclude test file--with-storyInclude Storybook story--flatCreate in output dir without subdirectory--dry-runPreview without creating files

### Generated Component Example

'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export function Button({ className, children }: ButtonProps) {
  return (
    <div className={cn('', className)}>
      {children}
    </div>
  );
}

### Bundle Analysis

Analyze package.json and project structure for bundle optimization opportunities.

### Workflow: Optimize Bundle Size

Run the analyzer on your project:
python scripts/bundle_analyzer.py /path/to/project



Review the health score and issues:
Bundle Health Score: 75/100 (C)

HEAVY DEPENDENCIES:
  moment (290KB)
    Alternative: date-fns (12KB) or dayjs (2KB)

  lodash (71KB)
    Alternative: lodash-es with tree-shaking



Apply the recommended fixes by replacing heavy dependencies.


Re-run with verbose mode to check import patterns:
python scripts/bundle_analyzer.py . --verbose

### Bundle Score Interpretation

ScoreGradeAction90-100ABundle is well-optimized80-89BMinor optimizations available70-79CReplace heavy dependencies60-69DMultiple issues need attention0-59FCritical bundle size problems

### Heavy Dependencies Detected

The analyzer identifies these common heavy packages:

PackageSizeAlternativemoment290KBdate-fns (12KB) or dayjs (2KB)lodash71KBlodash-es with tree-shakingaxios14KBNative fetch or ky (3KB)jquery87KBNative DOM APIs@mui/materialLargeshadcn/ui or Radix UI

### React Patterns

Reference: references/react_patterns.md

### Compound Components

Share state between related components:

const Tabs = ({ children }) => {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = TabList;
Tabs.Panel = TabPanel;

// Usage
<Tabs>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
    <Tabs.Tab>Two</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel>Content 1</Tabs.Panel>
  <Tabs.Panel>Content 2</Tabs.Panel>
</Tabs>

### Custom Hooks

Extract reusable logic:

function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// Usage
const debouncedSearch = useDebounce(searchTerm, 300);

### Render Props

Share rendering logic:

function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));
  }, [url]);

  return render({ data, loading });
}

// Usage
<DataFetcher
  url="/api/users"
  render={({ data, loading }) =>
    loading ? <Spinner /> : <UserList users={data} />
  }
/>

### Next.js Optimization

Reference: references/nextjs_optimization_guide.md

### Server vs Client Components

Use Server Components by default. Add 'use client' only when you need:

Event handlers (onClick, onChange)
State (useState, useReducer)
Effects (useEffect)
Browser APIs

// Server Component (default) - no 'use client'
async function ProductPage({ params }) {
  const product = await getProduct(params.id);  // Server-side fetch

  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} />  {/* Client component */}
    </div>
  );
}

// Client Component
'use client';
function AddToCartButton({ productId }) {
  const [adding, setAdding] = useState(false);
  return <button onClick={() => addToCart(productId)}>Add</button>;
}

### Image Optimization

import Image from 'next/image';

// Above the fold - load immediately
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
/>

// Responsive image with fill
<div className="relative aspect-video">
  <Image
    src="/product.jpg"
    alt="Product"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

### Data Fetching Patterns

// Parallel fetching
async function Dashboard() {
  const [user, stats] = await Promise.all([
    getUser(),
    getStats()
  ]);
  return <div>...</div>;
}

// Streaming with Suspense
async function ProductPage({ params }) {
  return (
    <div>
      <ProductDetails id={params.id} />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

### Accessibility and Testing

Reference: references/frontend_best_practices.md

### Accessibility Checklist

Semantic HTML: Use proper elements (<button>, <nav>, <main>)
Keyboard Navigation: All interactive elements focusable
ARIA Labels: Provide labels for icons and complex widgets
Color Contrast: Minimum 4.5:1 for normal text
Focus Indicators: Visible focus states

// Accessible button
<button
  type="button"
  aria-label="Close dialog"
  onClick={onClose}
  className="focus-visible:ring-2 focus-visible:ring-blue-500"
>
  <XIcon aria-hidden="true" />
</button>

// Skip link for keyboard users
<a href="#main-content" className="sr-only focus:not-sr-only">
  Skip to main content
</a>

### Testing Strategy

// Component test with React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('button triggers action on click', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Click me</Button>);

  await userEvent.click(screen.getByRole('button'));
  expect(onClick).toHaveBeenCalledTimes(1);
});

// Test accessibility
test('dialog is accessible', async () => {
  render(<Dialog open={true} title="Confirm" />);

  expect(screen.getByRole('dialog')).toBeInTheDocument();
  expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');
});

### Common Next.js Config

// next.config.js
const nextConfig = {
  images: {
    remotePatterns: [{ hostname: "cdnexamplecom" }],
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizePackageImports: ['lucide-react', '@heroicons/react'],
  },
};

### Tailwind CSS Utilities

// Conditional classes with cn()
import { cn } from '@/lib/utils';

<button className={cn(
  'px-4 py-2 rounded',
  variant === 'primary' && 'bg-blue-500 text-white',
  disabled && 'opacity-50 cursor-not-allowed'
)} />

### TypeScript Patterns

// Props with children
interface CardProps {
  className?: string;
  children: React.ReactNode;
}

// Generic component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

### Resources

React Patterns: references/react_patterns.md
Next.js Optimization: references/nextjs_optimization_guide.md
Best Practices: references/frontend_best_practices.md
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: alirezarezvani
- Version: 2.1.1
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-08T16:47:11.061Z
- Expires at: 2026-05-15T16:47:11.061Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/senior-frontend)
- [Send to Agent page](https://openagent3.xyz/skills/senior-frontend/agent)
- [JSON manifest](https://openagent3.xyz/skills/senior-frontend/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/senior-frontend/agent.md)
- [Download page](https://openagent3.xyz/downloads/senior-frontend)