Instruction file imported from thematters/matters-web (.cursor/rules/component-architecture.mdc). Copyright stays with the author.

Component Architecture

Name: component-architecture
Author: thematters

Matters Web follows a component-based architecture using React and Next.js.

Component Organization

Reusable components are organized in the src/components/ directory, each in its own folder with the following structure:

ComponentName/
  ├── index.tsx              # Main component export
  ├── styles.module.css      # Component styles
  ├── gql.ts                 # GraphQL queries/mutations (if needed)
  └── ComponentName.test.tsx # Component tests

Component Types

UI Components: Pure presentational components
Compositions Components: Components that are built on top of other UI components and may include GraphQL fragments as part of their UI requirements

Key Component Directories

src/components/Layout: Page layout components
src/components/Form: Form input components
src/components/Button: Button components
src/components/Dialog: Modal dialog components
src/components/GlobalDialogs: App-wide dialogs
src/components/GlobalToasts: Toast notification system

{ "ocm": "1", "id": "thematters-matters-web-component-architecture-rule", "kind": "skill", "name": "component-architecture", "description": "Matters Web follows a component-based architecture using React and Next.js.", "publisher": "thematters", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Matters Web follows a component-based architecture using React and Next.js." ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/thematters/matters-web", "path": ".cursor/rules/component-architecture.mdc", "ref": "4dfc916ec72f1b268e90c32fc56c900b877c6a55", "url": "https://github.com/thematters/matters-web/blob/4dfc916ec72f1b268e90c32fc56c900b877c6a55/.cursor/rules/component-architecture.mdc", "key": "thematters/matters-web/.cursor/rules/component-architecture.mdc" } }, "instructions": "# Component Architecture\n\nMatters Web follows a component-based architecture using React and Next.js.\n\n## Component Organization\n\nReusable components are organized in the `src/components/` directory, each in its own folder with the following structure:\n\n```\nComponentName/\n ├── index.tsx # Main component export\n ├── styles.module.css # Component styles\n ├── gql.ts # GraphQL queries/mutations (if needed)\n └── ComponentName.test.tsx # Component tests\n```\n\n## Component Types\n\n- **UI Components**: Pure presentational components\n- **Compositions Components**: Co", "cost": { "context_tokens": 306 } }

component-architecture

About

Component Architecture

Component Organization

Component Types

Key Component Directories

Use it

Manifest

Reviews