$ loading_
Learn frontend patterns for React, Next.js, state, performance, and UI best practices.
The material indicates a prompt-only/documentation-style frontend patterns skill with no required secrets, no declared remote endpoints, and no executable installation steps. Combined with an open-source GitHub source and very high community adoption, the overall risk is low.
The material explicitly states that no keys or environment variables are required; there is no indication of credential collection, storage, forwarding, or scope requests, so credential abuse risk is low.
No remote endpoints are declared, and the skill is marked as prompt-only. Although the README includes frontend example code using fetch(url), that is instructional sample code rather than network communication performed by the skill itself.
As a prompt-only/documentation skill, the material does not show any local process launching, script execution, or system capability use; the sample code is illustrative and does not grant execution capability to the skill itself.
There is no described ability to read or write local files, databases, clipboard contents, browser data, or other resources, nor any request for additional data access permissions, so the data exposure surface is limited.
The source is an open-source GitHub repository with very high community adoption (about 210k stars), which materially lowers supply-chain risk. Although the license is unspecified and maintenance status is unknown, it is still advisable to review repository contents and update activity before production use.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "frontend-patterns" skill from askskill: 1. Download https://raw.githubusercontent.com/affaan-m/ECC/main/skills/frontend-patterns/SKILL.md 2. Save it as ~/.claude/skills/frontend-patterns/SKILL.md 3. Reload skills and tell me it's ready
Please organize common frontend design patterns for a reusable React dashboard component library, covering container/presentational components, composition, and controlled vs uncontrolled components, with use cases and sample code.
A structured guide to React component patterns with explanations, use cases, and sample code.
Review common performance issues on a Next.js ecommerce homepage and explain how to optimize first paint, images, code splitting, caching strategy, and client-side rendering overhead, with implementation recommendations.
A categorized checklist of Next.js performance improvements by issue, cause, and recommended fix.
Compare the use boundaries of Context, Redux, Zustand, and TanStack Query in React projects, and recommend an approach and architecture for a mid-sized admin system.
A comparison and recommendation for state management, including pros, cons, use cases, and implementation advice.
Modern frontend patterns for React, Next.js, and performant user interfaces.
// 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>
<CardBody>Content</CardBody>
</Card>
interface TabsContextValue {
activeTab: string
setActiveTab: (tab: string) => void
}
const TabsContext = createContext<TabsContextValue | undefined>(undefined)
export function Tabs({ children, defaultTab }: {
children: React.ReactNode
defaultTab: string
}) {
const [activeTab, setActiveTab] = useState(defaultTab)
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
{children}
</TabsContext.Provider>
)
}
export function TabList({ children }: { children: React.ReactNode }) {
return <div className="tab-list">{children}</div>
}
export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
const context = useContext(TabsContext)
if (!context) throw new Error('Tab must be used within Tabs')
return (
<button
className={context.activeTab === id ? 'active' : ''}
onClick={() => context.setActiveTab(id)}
>
{children}
</button>
)
}
// Usage
<Tabs defaultTab="overview">
<TabList>
<Tab id="overview">Overview</Tab>
<Tab id="details">Details</Tab>
</TabList>
</Tabs>
interface DataLoaderProps<T> {
url: string
children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}
export function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
const [data, setData] = useState<T | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error | null>(null)
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false))
}, [url])
return <>{children(data, loading, error)}</>
}
// Usage
<DataLoader<Market[]> url="/api/markets">
{(markets, loading, error) => {
if (loading) return <Spinner />
if (error) return <Error error={error} />
return <MarketList markets={markets!} />
}}
</DataLoader>
export function useToggle(initialValue = false): [boolean, () => void] {
const [value, setValue] = useState(initialValue)
const toggle = useCallback(() => {
setValue(v => !v)
}, [])
return [value, toggle]
}
// Usage
const [isOpen, toggleOpen] = useToggle()
interface UseQueryOptions<T> {
onSuccess?: (data: T) => void
onError?: (error: Error) => void
enabled?: boolean
}
export function useQuery<T>(
key: string,
fetcher: () => Promise<T>,
options?: UseQueryOptions<T>
) {
const [data, setData] = useState<T | null>(null)
const [error, setError] = useState<Error | null>(null)
const [loading, setLoading] = useState(false)
…
Apply modern, safe, idiomatic C++ standards for writing, review, and refactoring.
Set up and manage Pi-hole DNS, blocking, and home network resolution.
Speed up complex tasks with parallel execution while preserving correctness.
Optimize React and Next.js performance during coding, review, and refactoring.
Apply Compose Multiplatform patterns for UI architecture, navigation, theming, and performance.
Translate visa document images into English and generate a bilingual PDF.
Build React microfrontends with shared dependencies, dynamic forms, and state management.
Write and review React 18/19 components using modern best practices.
Build accessible React and Next.js interfaces with robust UI accessibility patterns.
Build polished React and Next.js animations with reusable production-ready patterns.
Apply Nuxt 4 patterns for SSR safety, performance, and data fetching.
Learn idiomatic Rust patterns, ownership, concurrency, and robust error handling practices.