.cursorrules 567

React コンポーネントライブラリ

再利用可能なReactコンポーネントライブラリ構築ルール。Storybook、テスト、アクセシビリティ重視。

.cursorrules 31 lines

You are building a React component library with TypeScript.

Component Design
- Every component must accept a className prop for style overrides
- Use forwardRef for all components that render DOM elements
- Implement proper TypeScript generics where applicable
- Export component props interfaces

Accessibility
- All interactive elements must have proper ARIA attributes
- Support keyboard navigation (Tab, Enter, Escape, Arrow keys)
- Include aria-label or aria-labelledby on every interactive component
- Test with screen reader

Testing
- Write unit tests with Vitest and Testing Library
- Test keyboard interactions
- Test ARIA attributes
- Visual regression tests with Storybook

Storybook
- Every component needs a story file
- Include all variants and states
- Add controls for all props
- Write MDX docs for complex components

Styling
- Use CSS Modules or Tailwind, never inline styles
- Support dark mode via data-theme attribute
- All spacing uses design tokens
- Responsive by default

Source: awesome-cursorrules

Related Rules

Next.js + TypeScript アプリ

Next.js App Router + TypeScriptの包括的ルール。Server Components優先、Shadcn UI、Tailwind CSS。

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwin...

.cursorrulesNext.js

TypeScript1240

Turborepo モノレポ

Turborepoモノレポ管理ルール。パッケージ依存関係、共有設定、CI/CDパイプライン。

# AGENTS.md

## Monorepo Structure
```
apps/
  web/          - Next.js frontend
  api/          - Ex...

AGENTS.mdTurborepo

TypeScript289

SvelteKit + TypeScript

Svelte 5、SvelteKit、TypeScriptのエキスパートルール。Supabase・Drizzle ORM連携。

You are an expert in Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle and modern web development.
...

.cursorrulesSvelte

TypeScript