Vibe Index
🎯

react-composition

🎯Skill

from front-depiction/claude-setup

VibeIndex|
What it does

Provides pattern-based recommendations and best practices for React component composition, guiding developers towards more modular and reusable component design.

react-composition

Installation

Install skill:
npx skills add https://github.com/front-depiction/claude-setup --skill react-composition
4
AddedJan 27, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Overview

# .claude

Pattern-based suggestions and guardrails for Claude Code tool usage via PreToolUse/PostToolUse hooks.

Overview

The pattern-detector system hooks into Claude Code's PreToolUse and PostToolUse events to provide:

  • Context-aware suggestions when patterns are detected in tool inputs
  • Permission controls (ask/deny) for dangerous operations
  • Automatic skill recommendations based on code patterns

Patterns

Patterns are markdown files in .claude/patterns/ with YAML frontmatter that match against tool inputs:

```markdown

---

name: prefer-option-over-null

description: Suggest Option type instead of null/undefined

event: PostToolUse

tool: Edit|Write

glob: "*/.ts"

pattern: "\bnull\b|\bundefined\b"

action: context

level: info

tag: code-smell

---

Use Option from Effect instead of null or undefined:

```typescript

// Avoid

const findUser = (id: string): User | null => ...

// Prefer

const findUser = (id: string): Option.Option => ...

```

```

Pattern Schema

Frontmatter fields (from patterns/schema.ts):

Actions

Content Matching

The pattern detector searches these fields in order:

  1. command (Bash)
  2. new_string (Edit)
  3. content (Write)
  4. pattern (Grep)
  5. query (WebSearch)
  6. url (WebFetch)
  7. prompt (WebFetch)

Falls back to JSON.stringify(tool_input) if none match.

Testing

Files

More from this repository10

🎯
pattern-matching🎯Skill

pattern-matching skill from front-depiction/claude-setup

🎯
effect-ai-streaming🎯Skill

effect-ai-streaming skill from front-depiction/claude-setup

🎯
domain-modeling🎯Skill

domain-modeling skill from front-depiction/claude-setup

🎯
legal-review🎯Skill

legal-review skill from front-depiction/claude-setup

🎯
domain-predicates🎯Skill

domain-predicates skill from front-depiction/claude-setup

🎯
layer-design🎯Skill

layer-design skill from front-depiction/claude-setup

🎯
parallel-explore🎯Skill

Explores and analyzes code patterns in parallel across multiple files or directories, providing context-aware suggestions and potential optimizations based on detected patterns.

🎯
wide-events🎯Skill

wide-events skill from front-depiction/claude-setup

🎯
effect-ai-prompt🎯Skill

effect-ai-prompt skill from front-depiction/claude-setup

🎯
effect-ai-language-model🎯Skill

Provides pattern-based suggestions and guardrails for using Effect's functional programming language model constructs in TypeScript code, focusing on improving type safety and reducing null/undefin...