mirror of
https://github.com/affaan-m/ECC.git
synced 2026-08-20 22:42:22 +02:00
sutazcaandGitHub
e05a201258
Every other language pack (typescript, react, python, golang, vue, ...) scopes its rules with a paths: YAML frontmatter block, so Claude Code only loads them when matching files are in context. The 7 files in rules/web/ ship without frontmatter, and per the official rules-loading docs (https://code.claude.com/docs/en/memory) rules without a paths field load unconditionally into every session - ~15.5KB of always-on context even in projects with no frontend code. Add the same frontmatter convention used by the react pack, scoped to web-facing file types (css/scss/sass/less/html/tsx/jsx/vue/svelte).
92 lines
2.1 KiB
Markdown
92 lines
2.1 KiB
Markdown
---
|
|
paths:
|
|
- "**/*.css"
|
|
- "**/*.scss"
|
|
- "**/*.sass"
|
|
- "**/*.less"
|
|
- "**/*.html"
|
|
- "**/*.tsx"
|
|
- "**/*.jsx"
|
|
- "**/*.vue"
|
|
- "**/*.svelte"
|
|
---
|
|
> This file extends [common/patterns.md](../common/patterns.md) with web-specific patterns.
|
|
|
|
# Web Patterns
|
|
|
|
## Component Composition
|
|
|
|
### Compound Components
|
|
|
|
Use compound components when related UI shares state and interaction semantics:
|
|
|
|
```tsx
|
|
<Tabs defaultValue="overview">
|
|
<Tabs.List>
|
|
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
|
|
<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
|
|
</Tabs.List>
|
|
<Tabs.Content value="overview">...</Tabs.Content>
|
|
<Tabs.Content value="settings">...</Tabs.Content>
|
|
</Tabs>
|
|
```
|
|
|
|
- Parent owns state
|
|
- Children consume via context
|
|
- Prefer this over prop drilling for complex widgets
|
|
|
|
### Render Props / Slots
|
|
|
|
- Use render props or slot patterns when behavior is shared but markup must vary
|
|
- Keep keyboard handling, ARIA, and focus logic in the headless layer
|
|
|
|
### Container / Presentational Split
|
|
|
|
- Container components own data loading and side effects
|
|
- Presentational components receive props and render UI
|
|
- Presentational components should stay pure
|
|
|
|
## State Management
|
|
|
|
Treat these separately:
|
|
|
|
| Concern | Tooling |
|
|
|---------|---------|
|
|
| Server state | TanStack Query, SWR, tRPC |
|
|
| Client state | Zustand, Jotai, signals |
|
|
| URL state | search params, route segments |
|
|
| Form state | React Hook Form or equivalent |
|
|
|
|
- Do not duplicate server state into client stores
|
|
- Derive values instead of storing redundant computed state
|
|
|
|
## URL As State
|
|
|
|
Persist shareable state in the URL:
|
|
- filters
|
|
- sort order
|
|
- pagination
|
|
- active tab
|
|
- search query
|
|
|
|
## Data Fetching
|
|
|
|
### Stale-While-Revalidate
|
|
|
|
- Return cached data immediately
|
|
- Revalidate in the background
|
|
- Prefer existing libraries instead of rolling this by hand
|
|
|
|
### Optimistic Updates
|
|
|
|
- Snapshot current state
|
|
- Apply optimistic update
|
|
- Roll back on failure
|
|
- Emit visible error feedback when rolling back
|
|
|
|
### Parallel Loading
|
|
|
|
- Fetch independent data in parallel
|
|
- Avoid parent-child request waterfalls
|
|
- Prefetch likely next routes or states when justified
|