mirror of https://github.com/affaan-m/ECC.git synced 2026-08-17 21:15:40 +02:00

Files

T

sutazcaandGitHub e05a201258 fix(rules): add paths frontmatter to web rule pack (#2425 )

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).

2026-07-03 20:36:54 -07:00

2.3 KiB

Raw Permalink Blame History

paths

**/*.css

**/*.scss

**/*.sass

**/*.less

**/*.html

**/*.tsx

**/*.jsx

**/*.vue

**/*.svelte

This file extends common/coding-style.md with web-specific frontend content.

Web Coding Style

File Organization

Organize by feature or surface area, not by file type:

src/
├── components/
│   ├── hero/
│   │   ├── Hero.tsx
│   │   ├── HeroVisual.tsx
│   │   └── hero.css
│   ├── scrolly-section/
│   │   ├── ScrollySection.tsx
│   │   ├── StickyVisual.tsx
│   │   └── scrolly.css
│   └── ui/
│       ├── Button.tsx
│       ├── SurfaceCard.tsx
│       └── AnimatedText.tsx
├── hooks/
│   ├── useReducedMotion.ts
│   └── useScrollProgress.ts
├── lib/
│   ├── animation.ts
│   └── color.ts
└── styles/
    ├── tokens.css
    ├── typography.css
    └── global.css

CSS Custom Properties

Define design tokens as variables. Do not hardcode palette, typography, or spacing repeatedly:

:root {
  --color-surface: oklch(98% 0 0);
  --color-text: oklch(18% 0 0);
  --color-accent: oklch(68% 0.21 250);

  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-hero: clamp(3rem, 1rem + 7vw, 8rem);

  --space-section: clamp(4rem, 3rem + 5vw, 10rem);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Animation-Only Properties

Prefer compositor-friendly motion:

transform
opacity
clip-path
filter (sparingly)

Avoid animating layout-bound properties:

width
height
top
left
margin
padding
border
font-size

Semantic HTML First

<header>
  <nav aria-label="Main navigation">...</nav>
</header>
<main>
  <section aria-labelledby="hero-heading">
    <h1 id="hero-heading">...</h1>
  </section>
</main>
<footer>...</footer>

Do not reach for generic wrapper div stacks when a semantic element exists.

Naming

Components: PascalCase (ScrollySection, SurfaceCard)
Hooks: use prefix (useReducedMotion)
CSS classes: kebab-case or utility classes
Animation timelines: camelCase with intent (heroRevealTl)

2.3 KiB Raw Permalink Blame History