Instruction file imported from vazinedaalat/vz-frontend (.cursor/rules/frontend-architecture.mdc). Copyright stays with the author.

Frontend Architecture & Clean Code

Name: frontend-architecture
Author: vazinedaalat

Follow feature-based modular architecture (skills/architecture.md).

Structure

src/features/[feature]/
  components/   # feature UI only
  hooks/
  constants/    # copy & sample data
  types/
  pages/
  index.ts      # public API

Features must not import other features directly
Shared UI: components/ui, components/shared, components/animated
Pure helpers: lib/ · app shell: app/

TypeScript

Strict types; no any unless unavoidable and justified
Prefer interface for object shapes; export domain types from types/
Discriminated unions over boolean soup for UI states
Keep noUnusedLocals / noUnusedParameters clean

Components

Small, composable, presentational by default
Props typed; avoid prop drilling when a feature-local hook/store fits
No data-fetching inside dumb UI primitives (components/ui)
Prefer extending Button / Container / SectionHeading over one-off styled copies
Name files kebab-case.tsx; components PascalCase

State & data

Server state → TanStack Query (when APIs exist)
Client UI state → Zustand only for cross-cutting UI (app/store)
Form validation → Zod + React Hook Form when forms appear

Extensibility checklist

New section = new component + constants entry + page composition
Copy/CTA centralized (constants) so marketing edits stay one-file
Motion isolated (Reveal, backdrop components) so pages stay readable
No drive-by refactors outside the requested scope

Canonical references: skills/components.md, skills/development.md

{ "ocm": "1", "id": "vazinedaalat-vz-frontend-frontend-architecture-rule", "kind": "skill", "name": "frontend-architecture", "description": "Clean, extensible React/TypeScript architecture for Vazinedalat frontend", "publisher": "vazinedaalat", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Clean, extensible React/TypeScript architecture for Vazinedalat frontend" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/vazinedaalat/vz-frontend", "path": ".cursor/rules/frontend-architecture.mdc", "ref": "949715980968bfcdf8742281884d131aa3190b5b", "url": "https://github.com/vazinedaalat/vz-frontend/blob/949715980968bfcdf8742281884d131aa3190b5b/.cursor/rules/frontend-architecture.mdc", "key": "vazinedaalat/vz-frontend/.cursor/rules/frontend-architecture.mdc" }, "applies_to": "src/**/*.{ts,tsx}" }, "instructions": "# Frontend Architecture & Clean Code\n\nFollow feature-based modular architecture (`skills/architecture.md`).\n\n## Structure\n\n```\nsrc/features/[feature]/\n components/ # feature UI only\n hooks/\n constants/ # copy & sample data\n types/\n pages/\n index.ts # public API\n```\n\n- Features must **not** import other features directly\n- Shared UI: `components/ui`, `components/shared`, `components/animated`\n- Pure helpers: `lib/` · app shell: `app/`\n\n## TypeScript\n\n- Strict types; no `any` unless unavoidable and justified\n- Prefer `interface` for object shapes; export domain types from `types/", "cost": { "context_tokens": 402 } }

frontend-architecture

About

Frontend Architecture & Clean Code

Structure

TypeScript

Components

State & data

Extensibility checklist

Use it

Manifest

Reviews