Frontend patterns

Frontend Pattern Scanner Skill

Purpose

Auto-detect frontend (React/Vue/Angular/Svelte) code conventions by scanning the codebase. Works on any project.

Activation

When creating or modifying frontend code and no cached patterns exist yet.

---

How It Works

This skill does NOT hardcode patterns. Instead, it scans the codebase to discover them. Results are cached in .claude/idev/frontend-patterns/cache.md after first scan.

---

Phase 1: Detect Frontend Stack

Run these checks to identify the technology:

1. Read package.json → detect framework (react, vue, angular, svelte, next, nuxt)
2. Read package.json → detect key libraries:
   - State: redux, zustand, mobx, pinia, @tanstack/react-query
   - UI: antd, @mui/material, chakra-ui, tailwindcss, bootstrap
   - Routing: react-router-dom, vue-router, @angular/router
   - HTTP: axios, fetch wrapper, @tanstack/react-query
   - Forms: react-hook-form, formik, vee-validate
   - Date: dayjs, moment, date-fns, luxon
3. Read tsconfig.json or jsconfig.json → TypeScript or JavaScript
4. Glob for tailwind.config.* → Tailwind CSS
5. Glob for .eslintrc* → Linting rules

---

Phase 2: Discover Project Structure

Scan to find the architecture pattern:

1. Read src/ directory structure (ls src/)
2. Detect architecture style:
   - Feature-based: src/features/ or src/modules/
   - Layer-based: src/components/, src/services/, src/hooks/
   - Page-based: src/pages/ or app/ (Next.js/Nuxt)
3. Glob **/*Container*.{tsx,jsx,vue} → Container components
4. Glob **/*Page*.{tsx,jsx,vue} → Page components
5. Glob **/hooks/*.{ts,js} or **/composables/*.{ts,js} → Custom hooks
6. Glob **/services/*.{ts,js} or **/api/*.{ts,js} → API services
7. Glob **/models/*.{ts,js} or **/types/*.{ts,js} → Type definitions
8. Glob **/store/*.{ts,js} or **/slices/*.{ts,js} → State management
9. Grep for "createBrowserRouter|Routes|Route" → Routing setup file
10. Grep for "API_URL|BASE_URL|baseURL" in .env* → API configuration

---

Phase 3: Extract Patterns from Existing Code

For each discovered layer, read ONE representative file and extract the pattern:

3.1 Component Pattern

Pick one presentation/UI component
Extract: FC typing vs function declaration, props interface pattern, styling approach
Detect: CSS modules, Tailwind, styled-components, inline styles, UI library usage
Note: import ordering convention, export style (default vs named)

3.2 Container/Smart Component Pattern

Pick one container component
Extract: how hooks are used, how data flows to children, callback patterns
Detect: useCallback/useMemo usage, data transformation location, error handling

3.3 Hook Pattern

Pick one custom hook
Extract: return type, query/mutation pattern, error dispatching
Detect: query key pattern, cache invalidation strategy, optimistic updates
Note: query library version (v4 vs v5 differences)

3.4 Service/API Pattern

Pick one service file
Extract: HTTP client (axios instance, fetch wrapper), URL construction, response typing
Detect: interceptors, auth headers, error transformation, base URL config
Note: how API URLs are organized (enum, constants file, inline)

3.5 Type/Model Pattern

Pick one types file
Extract: interface vs type usage, enum style (string enum, const enum, object const)
Detect: DTO types, form data types, API response wrappers

3.6 State Management Pattern

Find store/slice files
Extract: how global state is structured, dispatch patterns
Detect: Redux toolkit, Zustand, Context, or other

3.7 Routing Pattern

Find routing config
Extract: route definition style, route constants, navigation pattern
Detect: lazy loading, guards/middleware, nested routes

---

Phase 4: Generate Cache

After scanning, write all discovered patterns to: .claude/idev/frontend-patterns/cache.md

Format:

# Frontend Patterns Cache
## Generated: [date]
## Project: [detected project name]
## Stack: [framework] + [UI lib] + [state mgmt] + [query lib]

### Paths
src root: [path]
Components: [path pattern]
Containers: [path pattern]
Hooks: [path pattern]
Services: [path pattern]
Types: [path pattern]
Routes: [file path]
Store: [path pattern]

### Component Template
[extracted pattern with placeholders]

### Container Template
[extracted pattern with placeholders]

### Hook Templates
Query hook: [pattern]
Mutation hook: [pattern]

### Service Template
[extracted pattern with placeholders]

### Type/Interface Template
[extracted pattern]

### Conventions
- Styling: [Tailwind/CSS Modules/styled-components/etc.]
- Exports: [default/named]
- Props: [interface naming]
- File naming: [kebab-case/PascalCase/camelCase]
- Error handling: [pattern]
- Navigation: [pattern]

### Function Index
[Compact list of exported/public functions, one per line:]
functionName — file:line — one-line purpose
[Cap at ~100 entries, most-used first. Used by function-extract for targeted
reads and by cache-refresh for incremental updates. Update entries whenever
adding or modifying functions.]

---

Phase 5: Usage

On subsequent tasks, load only the cache file instead of rescanning. Keep the cache under ~250 lines by trimming examples if it grows beyond that. Rescan if user says "refresh patterns" or if cache is older than 7 days.

---

Checklist (generic, auto-populated from scan)

When creating a new frontend feature, the scanner detects what files are needed:

• Types/interfaces in [detected types path]
• Service methods in [detected services path]
• API URL entries in [detected URL config]
• Query/mutation hooks in [detected hooks path]
• Container component in [detected containers path]
• Presentation component in [detected presentation path]
• Route registration in [detected routes file]
• Hook barrel exports in [detected barrel file] (if applicable)