agentsclimarketplace

React builder

Skill AtulPurohit/Antigravity-Awesome-Skills/plugins/frontend-architect/skills/react-builder

Installable GitHub library of 300+ professional agentic skills for Claude Code, Antigravity IDE, Gemini CLI, Cursor, and Copilot. Features a custom NPX installer, 9 stack-specific bundles, validation schemas, security auditing, and an interactive catalog explorer app.

Install
npx -y skills add AtulPurohit/Antigravity-Awesome-Skills --skill react-builder

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

  • 29 days oldThe repository was created 29 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build scalable React applications with proper component architecture, custom hooks, state management, and performance optimization.

SKILL.md

3.1 KB, 611 tokens by cl100k_base, as published. Nobody here has run it

React Application Builder

Purpose

Build production React applications with clean component architecture, reusable hooks, and optimal performance.

Project Structure

src/
├── components/
│   ├── ui/              # Reusable UI components (Button, Input, Modal)
│   └── features/        # Feature-specific components
├── hooks/               # Custom hooks
├── services/            # API calls
├── stores/              # State management (Zustand)
├── utils/               # Utilities
└── types/               # TypeScript types

Component Patterns

// Compound component pattern
const Select = ({ children, value, onChange }: SelectProps) => {
  return (
    <SelectContext.Provider value={{ value, onChange }}>
      <div className="select-container">{children}</div>
    </SelectContext.Provider>
  );
};

Select.Option = ({ value, children }: OptionProps) => {
  const { value: selected, onChange } = useSelectContext();
  return (
    <div
      role="option"
      aria-selected={selected === value}
      onClick={() => onChange(value)}
    >
      {children}
    </div>
  );
};

// Usage
<Select value={city} onChange={setCity}>
  <Select.Option value="nyc">New York</Select.Option>
  <Select.Option value="la">Los Angeles</Select.Option>
</Select>

Custom Hooks

// Data fetching hook with caching
function usePost(id: string) {
  const [state, setState] = useState<{
    data: Post | null;
    loading: boolean;
    error: Error | null;
  }>({ data: null, loading: true, error: null });

  useEffect(() => {
    const controller = new AbortController();
    
    api.getPost(id, controller.signal)
      .then(data => setState({ data, loading: false, error: null }))
      .catch(error => {
        if (!controller.signal.aborted) {
          setState({ data: null, loading: false, error });
        }
      });
    
    return () => controller.abort();
  }, [id]);

  return state;
}

Performance

// Memoization
const ExpensiveComponent = memo(({ data }: Props) => {
  const processed = useMemo(() => processData(data), [data]);
  const handleClick = useCallback(() => doSomething(data), [data]);
  return <div onClick={handleClick}>{processed}</div>;
});

// Lazy loading
const HeavyChart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<ChartSkeleton />}>
  <HeavyChart data={data} />
</Suspense>

Outputs

  1. Component library structure
  2. Custom hooks for data fetching, forms, auth
  3. State management setup (Zustand/React Query)
  4. Performance optimization patterns
  5. Testing setup with React Testing Library

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 327,069. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.