ui-component-patterns

Build reusable, maintainable UI components following modern design patterns. Use when creating component libraries, implementing design systems, or building scalable frontend architectures. Handles React patterns, composition, prop design, TypeScript, and component best practices.

1.20x

Quality

73%

Does it follow best practices?

Impact

88%

1.20x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.agent-skills/ui-component-patterns/SKILL.md

Evaluation results

67%

23%

CMS Dashboard: Expandable Content Panel Component

Compound component with context and file structure

Criteria

Without context

With context

Compound pattern: static attachment

100%

Context for shared state

100%

Context error guard

100%

TypeScript interfaces

100%

Optional props with defaults

100%

Component folder structure

62%

Storybook story file

CSS module file

forwardRef usage

displayName set

JSDoc with @example

100%

Accessibility attributes

100%

No inline objects/functions in JSX

97%

14%

E-Commerce: Product Catalog with Live Filtering

Performance optimization and logic separation

Criteria

Without context

With context

Custom hook for filtering logic

100%

No business logic in UI component

100%

React.memo on ProductCard

100%

useMemo for derived data

100%

useCallback for event handler

100%

No inline objects/functions in JSX

60%

70%

TypeScript interfaces

100%

Component folder structure

100%

Accessibility attributes

28%

100%

Single responsibility

100%

Design System: Generic Feed and Typography Components

Render props and polymorphic component design

Criteria

Without context

With context

Render props on Feed

100%

renderItem signature with index

100%

Generic Feed typing

100%

Polymorphic 'as' prop on Text

100%

Polymorphic HTML attribute forwarding

100%

Storybook story files

100%

Component folder structure

100%

TypeScript interfaces

100%

Accessibility attributes

100%

Composition over props

100%

No inline objects/functions in JSX

100%

displayName set

100%

Repository: supercent-io/skills-template
Commit: c033769

Evaluated: 28 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

CMS Dashboard: Expandable Content Panel Component E-Commerce: Product Catalog with Live Filtering Design System: Generic Feed and Typography Components

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.