reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/opt-shell/Pattern Search
Searchopt-shell example

Pattern Search

searchShellPatterns로 recipe, slot, policy, adapter, audit-rule, anti-pattern 패턴을 키워드 검색합니다.

Keyword search over 50+ indexed harness patterns for agent integration.

patternsearchindexagent
bun add @reopt-ai/opt-shell
searchShellPatternsindexShellPatterns
1024px

Pattern Search

하네스 패턴 인덱스를 키워드로 검색합니다.

8 results / 60 indexed
recipeListWorkspace recipe

Collection browsing is the primary user action. Scan, filter, and bulk-operate on rows of data.

<ListWorkspace header={...} content={...} />
adapterShellDataGridAdapter

Wraps opt-datagrid with harness chrome (card/plain styling), loading/empty/error states, and inspect snapshots.

<ShellDataGridAdapter rows={rows} columns={columns} getRowId={getRowId} empty={emptyState} status={statusFooter} />
slotheader slot (list)

Required slot "header" in the list recipe.

<ListWorkspace header={<YourComponent />} />
slotcontent slot (list)

Required slot "content" in the list recipe.

<ListWorkspace content={<YourComponent />} />
slottoolbar slot (list)

Optional slot "toolbar" in the list recipe.

<ListWorkspace toolbar={<YourComponent />} />
slotfilters slot (list)

Optional slot "filters" in the list recipe.

<ListWorkspace filters={<YourComponent />} />
slotaside slot (list)

Optional slot "aside" in the list recipe.

<ListWorkspace aside={<YourComponent />} />
slotfooter slot (list)

Optional slot "footer" in the list recipe.

<ListWorkspace footer={<YourComponent />} />

Related Examples

스크롤 가능한 콘텐츠 영역
3개 항목 선택됨
Layoutopt-shell

Bottom Bar

ShellBottomBar로 선택 액션과 승인 액션을 화면 하단에 sticky하게 붙여 작업 맥락을 유지합니다.

stickybulk-actionsfooter
ShellProviderShellBottomBar
Open

Completeness Score

audit finding 수를 조절하면서 점수 변화를 확인하세요.

3/5
72/ 1007/10 passed
layout0%
recipe-contract67%
adapter-ownership100%
state-ux100%
design-document100%
scaffold-bundle100%
accessibility100%
Scoringopt-shell

Completeness Score

computeCompletenessScore로 audit finding을 7개 카테고리로 분류하고 0-100 가중 평균 점수를 산출합니다.

completenessscoreauditscoring
computeCompletenessScore
Open

Coverage Report

8개 라우트 파일 대비 하네스 rollout target 매칭 결과

75%6/8 covered
Recipe Breakdown
dashboard: 1list: 1detail: 1editor: 1fullscreen: 1
Uncovered Paths
  • app/settings/page.tsx
  • app/analytics/page.tsx
Scoringopt-shell

Coverage Report

computeShellCoverage로 라우트 파일 대비 하네스 채택률을 정적 분석하고 recipe별 breakdown과 미커버 경로를 표시합니다.

coverageroutesrolloutscoring
computeShellCoverage
Open
PreviousCoverage Report