Add dotclaude configuration files
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Poshan Pandey
@@ -0,0 +1,57 @@
|
||||
# Rules
|
||||
|
||||
Rules are modular instruction files that Claude loads automatically. They extend CLAUDE.md without bloating it.
|
||||
|
||||
- `alwaysApply: true` — loaded every session, regardless of what files are open
|
||||
- `paths: [...]` — loaded only when working with files matching the glob patterns
|
||||
|
||||
## Available Rules
|
||||
|
||||
### code-quality.md
|
||||
**Scope**: Always
|
||||
|
||||
Principles (single-responsibility, no premature abstraction, composition over inheritance), naming conventions (files, variables, functions, constants), comment guidelines, code markers (TODO/FIXME/HACK/NOTE), and file organization (import order, export patterns, function ordering).
|
||||
|
||||
### testing.md
|
||||
**Scope**: Always
|
||||
|
||||
Three focused principles: test behavior not implementation, run single test files not the full suite, fix or delete flaky tests. Comprehensive test writing is handled by the `test-writer` skill.
|
||||
|
||||
### security.md
|
||||
**Scope**: Path-scoped (`src/api/**`, `src/auth/**`, `src/middleware/**`, `**/routes/**`, `**/controllers/**`)
|
||||
|
||||
Loads when touching API or auth code. Covers input validation, parameterized queries, XSS prevention, token handling, secret logging, constant-time comparison, security headers, rate limiting.
|
||||
|
||||
### frontend.md
|
||||
**Scope**: Path-scoped (`**/*.tsx`, `**/*.jsx`, `**/*.vue`, `**/*.svelte`, `**/*.css`, `**/*.scss`, `**/*.html`, `**/components/**`, `**/pages/**`, etc.)
|
||||
|
||||
Loads when touching frontend files. Design token requirements, design principles pick-list, component framework options, layout rules, accessibility (WCAG 2.1 AA), performance.
|
||||
|
||||
## Adding Your Own
|
||||
|
||||
Create a new `.md` file in this directory:
|
||||
|
||||
```yaml
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# Your Rule Name
|
||||
|
||||
- Your instructions here
|
||||
```
|
||||
|
||||
Or path-scoped:
|
||||
|
||||
```yaml
|
||||
---
|
||||
paths:
|
||||
- "src/your-area/**"
|
||||
---
|
||||
|
||||
# Your Rule Name
|
||||
|
||||
- Instructions that only apply when touching these files
|
||||
```
|
||||
|
||||
See [Claude Code docs](https://code.claude.com/docs/en/memory#path-specific-rules) for glob pattern syntax.
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# Code Quality
|
||||
|
||||
## Principles
|
||||
|
||||
- Functions do one thing. If it needs a section comment, extract that section.
|
||||
- No magic values — extract numbers, strings, and config to named constants.
|
||||
- Handle errors at the boundary. Don't catch and re-throw without adding context.
|
||||
- No premature abstractions. Three similar lines > a helper used once.
|
||||
- Don't add features or "improve" things beyond what was asked.
|
||||
- No dead code or commented-out blocks. Git has history.
|
||||
- Composition over inheritance.
|
||||
|
||||
## Naming
|
||||
|
||||
- **Files**: PascalCase for components/classes (`UserProfile.tsx`), kebab-case for utilities/directories (`date-utils.ts`)
|
||||
- **Booleans**: `is`, `has`, `should`, `can` prefix — `isLoading`, `hasPermission`
|
||||
- **Functions**: verb-first — `getUser`, `validateEmail`, `handleSubmit`
|
||||
- **Handlers/callbacks**: `handle*` internally, `on*` as props — `handleClick` / `onClick`
|
||||
- **Factories**: `create*` — `createUser`. **Converters**: `to*` — `toJSON`. **Predicates**: `is*`/`has*`
|
||||
- **Constants**: `SCREAMING_SNAKE` — `MAX_RETRIES`, `API_BASE_URL`
|
||||
- **Enums**: PascalCase members — `Status.Active`
|
||||
- **Abbreviations**: only universally known (`id`, `url`, `api`, `db`, `config`, `auth`). Acronyms as words: `userId` not `userID`
|
||||
|
||||
## Comments
|
||||
|
||||
- **WHY**, never WHAT. If the code needs a "what" comment, rename instead.
|
||||
- Comment: non-obvious decisions, workarounds with issue links, regex patterns, perf tricks
|
||||
- Don't comment: obvious code, self-explanatory function names, section dividers, type info the language provides
|
||||
- No commented-out code — delete it. No journal comments — git blame does this.
|
||||
- API docs (JSDoc, docstrings) at module boundaries only, not every internal function
|
||||
|
||||
## Code Markers
|
||||
|
||||
| Marker | Use |
|
||||
|---|---|
|
||||
| `TODO(author): desc (#issue)` | Planned work |
|
||||
| `FIXME(author): desc (#issue)` | Known bugs |
|
||||
| `HACK(author): desc (#issue)` | Ugly workarounds (explain the proper fix) |
|
||||
| `NOTE: desc` | Non-obvious context for future readers |
|
||||
|
||||
Must have an owner + issue link. Don't commit TODOs you can do now. Never use `XXX`, `TEMP`, `REMOVEME`.
|
||||
|
||||
## File Organization
|
||||
|
||||
- **Imports**: builtins → external → internal → relative → types. Blank line between groups.
|
||||
- **Exports**: named over default. Export at declaration site. One component/class per file.
|
||||
- **Functions**: public first, then private helpers in call order. Top-to-bottom reads as a story.
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
paths:
|
||||
- "**/migrations/**"
|
||||
- "**/migrate/**"
|
||||
- "**/db/migrate/**"
|
||||
- "**/alembic/**"
|
||||
- "**/alembic/versions/**"
|
||||
- "**/prisma/migrations/**"
|
||||
- "**/drizzle/**"
|
||||
- "**/knex/migrations/**"
|
||||
- "**/sequelize/migrations/**"
|
||||
- "**/typeorm/migrations/**"
|
||||
- "**/flyway/**"
|
||||
- "**/liquibase/**"
|
||||
---
|
||||
|
||||
# Database Migrations
|
||||
|
||||
- **Never modify an existing migration** — always create a new migration for changes. Existing migrations may have already run in production.
|
||||
- Every migration must be reversible — implement both up/forward and down/rollback.
|
||||
- Test migrations in both directions before committing.
|
||||
- Migration filenames are ordered by timestamp prefix — new migrations go at the end.
|
||||
- Never use raw SQL when the ORM/migration tool provides a method for the operation.
|
||||
- Never seed production data in migration files — use dedicated seed files.
|
||||
- Never drop columns or tables without first confirming the data is no longer needed.
|
||||
- Add indexes in their own migration, not bundled with schema changes — easier to rollback independently.
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
paths:
|
||||
- "src/api/**"
|
||||
- "src/services/**"
|
||||
- "**/controllers/**"
|
||||
- "**/routes/**"
|
||||
- "**/handlers/**"
|
||||
---
|
||||
|
||||
# Error Handling
|
||||
|
||||
- Use typed/custom error classes with error codes — not generic `Error("something went wrong")`.
|
||||
- Never swallow errors silently. Log or rethrow with added context about what operation failed.
|
||||
- Handle every rejected promise. No floating (unhandled) async calls.
|
||||
- HTTP error responses: consistent shape (e.g., `{ error: { code, message } }`), correct status codes (400 for validation, 401 for auth, 404 for not found, 500 for unexpected).
|
||||
- Never expose stack traces, internal paths, or raw database errors in production responses.
|
||||
- Retry transient errors (network timeouts, rate limits) with exponential backoff. Fail fast on validation and auth errors — don't retry.
|
||||
- Include correlation/request IDs in error logs when available.
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
paths:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/*.vue"
|
||||
- "**/*.svelte"
|
||||
- "**/*.css"
|
||||
- "**/*.scss"
|
||||
- "**/*.html"
|
||||
- "**/components/**"
|
||||
- "**/pages/**"
|
||||
- "**/views/**"
|
||||
- "**/layouts/**"
|
||||
- "**/styles/**"
|
||||
---
|
||||
|
||||
# Frontend
|
||||
|
||||
## Design Tokens
|
||||
|
||||
Before writing frontend code, find the project's existing tokens file (`tokens.css`, `variables.css`, `theme.ts`, `tailwind.config.*`, `_variables.scss`). If none exists, create one. Never hardcode raw values in components.
|
||||
|
||||
Required token categories: colors (semantic names with dark mode variants), spacing scale, border radius, shadows (elevation system), typography (display + body + mono fonts, type scale, weights), breakpoints, transitions (durations + easing), z-index scale.
|
||||
|
||||
## Design Principles
|
||||
|
||||
Pick one primary principle. Don't mix randomly.
|
||||
|
||||
| Principle | When to use |
|
||||
|---|---|
|
||||
| **Glassmorphism** | Overlays, modern dashboards |
|
||||
| **Neumorphism** | Settings panels, minimal controls |
|
||||
| **Brutalism** | Developer tools, editorial sites |
|
||||
| **Minimalism** | Portfolios, documentation, content-first |
|
||||
| **Maximalism** | Creative agencies, e-commerce |
|
||||
| **Claymorphism** | Playful apps, onboarding |
|
||||
| **Bento Grid** | Dashboards, feature showcases |
|
||||
| **Aurora / Mesh Gradients** | Landing pages, hero sections |
|
||||
| **Flat Design** | Mobile apps, system UI |
|
||||
| **Material Elevation** | Data-heavy apps, enterprise |
|
||||
| **Editorial** | Blogs, long-form content |
|
||||
|
||||
## Component Framework
|
||||
|
||||
Use whatever the project already has. Don't mix competing libraries.
|
||||
|
||||
| Category | Options (pick one) |
|
||||
|---|---|
|
||||
| CSS | Tailwind, vanilla CSS, CSS Modules, styled-components, Emotion, UnoCSS, Panda CSS |
|
||||
| Primitives | shadcn/ui, Radix, Headless UI, Ark UI, DaisyUI, Mantine, Chakra, Vuetify |
|
||||
| Animation | CSS transitions, Framer Motion, GSAP, View Transitions API, AutoAnimate |
|
||||
| Charts | Recharts, D3, Chart.js, Visx, ECharts, Nivo |
|
||||
| Icons | Lucide, Phosphor, Heroicons, Tabler Icons, Iconify |
|
||||
|
||||
## Layout
|
||||
|
||||
- CSS Grid for 2D, Flexbox for 1D. Use `gap`, not margin hacks.
|
||||
- Semantic HTML: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`.
|
||||
- Mobile-first. Touch targets: minimum 44x44px.
|
||||
|
||||
## Accessibility (non-negotiable)
|
||||
|
||||
- All interactive elements keyboard-accessible.
|
||||
- Images: meaningful `alt` text. Decorative: `alt=""`.
|
||||
- Form inputs: associated `<label>` or `aria-label`.
|
||||
- Contrast: 4.5:1 normal text, 3:1 large text.
|
||||
- Visible focus indicators. Never `outline: none` without replacement.
|
||||
- Color never the sole indicator.
|
||||
- `aria-live` for dynamic content. Respect `prefers-reduced-motion` and `prefers-color-scheme`.
|
||||
|
||||
## Performance
|
||||
|
||||
- Images: `loading="lazy"` below fold, explicit `width`/`height`.
|
||||
- Fonts: `font-display: swap`.
|
||||
- Animations: `transform` and `opacity` only.
|
||||
- Large lists: virtualize at 100+ items.
|
||||
- Bundle size: never import a whole library for one function.
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
paths:
|
||||
- "src/api/**"
|
||||
- "src/auth/**"
|
||||
- "src/middleware/**"
|
||||
- "**/routes/**"
|
||||
- "**/controllers/**"
|
||||
---
|
||||
|
||||
# Security
|
||||
|
||||
- Validate all user input at the system boundary. Never trust request parameters.
|
||||
- Use parameterized queries — never concatenate user input into SQL or shell commands.
|
||||
- Sanitize output to prevent XSS. Use framework-provided escaping.
|
||||
- Authentication tokens must be short-lived. Store refresh tokens server-side only.
|
||||
- Never log secrets, tokens, passwords, or PII.
|
||||
- Use constant-time comparison for secrets and tokens.
|
||||
- Set appropriate CORS, CSP, and security headers.
|
||||
- Rate-limit authentication endpoints.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# Testing
|
||||
|
||||
- Write tests that verify behavior, not implementation details.
|
||||
- Run the specific test file after changes, not the full suite — faster feedback.
|
||||
- If a test is flaky, fix or delete it. Never retry to make it pass.
|
||||
- Prefer real implementations over mocks. Only mock at system boundaries (network, filesystem, clock).
|
||||
- One assertion per test. If the name needs "and", split it.
|
||||
- Test names describe behavior: `should return empty array when input is empty`, not `test1`.
|
||||
- Arrange-Act-Assert structure. No logic (if/loops) in tests.
|
||||
- Never `expect(true)` or assert a mock was called without checking its arguments.
|
||||
Reference in New Issue
Block a user