frontend-patterns SKILL.md skillA

frontend-patterns from hashgraph-online/awesome-codex-plugins is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

mdr add hashgraph-online/awesome-codex-plugins/frontend-patterns@git:20260512.6523792

Pins git:20260512.6523792 in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 17 of 17 checks passed

Kind

SKILL.md skill

Repository

hashgraph-online/awesome-codex-plugins

Path

plugins/Colin4k1024/tsp/skills/frontend-patterns/SKILL.md

Versions recorded

1

Latest version

git:20260512.6523792, committed May 12, 2026

Size

14,773 bytes

Repository stars

1,501

License

Apache-2.0

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# Frontend Development Patterns

Modern frontend patterns for React, Next.js, and performant user interfaces.

## When to Activate

- Building React components (composition, props, rendering)
- Managing state (useState, useReducer, Zustand, Context)
- Implementing data fetching (SWR, React Query, server components)
- Optimizing performance (memoization, virtualization, code splitting)
- Working with forms (validation, controlled inputs, Zod schemas)
- Handling client-side routing and navigation
- Building accessible, responsive UI patterns

## Component Patterns

### Composition Over Inheritance

```typescript
// PASS: GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Usage
<Card>
  <CardHeader>Title</CardHeader>
…

Read the whole file at its exact version.

How to install

mdr add hashgraph-online/awesome-codex-plugins/frontend-patterns@sha256:dd04a1c02503036e

[![mdr](https://markdownregistry.com/badge/art_5lgth3mi2fjooglj.svg)](https://markdownregistry.com/a/art_5lgth3mi2fjooglj)

Versions

The registry has recorded 1 version of this file, committed on May 12, 2026.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_5lgth3mi2fjooglj
GET https://markdownregistry.com/api/v1/resolve?ref=hashgraph-online/awesome-codex-plugins/frontend-patterns
GET https://markdownregistry.com/api/v1/blob/dd04a1c02503036ee7f4d649c9b7b75d2e6954a94d6f464faedfa992701d1978

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from hashgraph-online/awesome-codex-plugins

Every file in hashgraph-online/awesome-codex-plugins

Other files named frontend-patterns

Browse by kind, by grade A, or by owner.