Two files, one repository
tsongglod123/excel-formula-visualizer ships 2 formats across 5 indexed files. The question worth asking is whether the second one says anything the first does not.
CompareAGENTS.md ↔ Cline rules
| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 2 | 18 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 0 | 1 | 5 | 0% |
What each file covers
Sections
0 shared · 2 only in A · 18 only in B- − Development
- − Documentation
- + Coding Conventions
- + Component Architecture
- + Astro Component Patterns
- + Props Interface
- + Slots
- + Fragment
- + Layout Components
- + React Component Patterns
- + Component Structure
- + State Management
- + Performance (Follow `vercel-react-best-practices` skill)
- + Hydration with Astro
- + Frontend Design Guidelines
- + Web Design Compliance
- + Accessibility
- + CSS & Styling
- + TypeScript
- + File Organization
Commands
neither file has anySection tags
0 shared · 1 only in A · 5 only in B- − docs
- + code-style
- + architecture
- + types
- + ui
- + performance
Line diff
tsongglod123/excel-formula-visualizer · AGENTS.md
@@ −1 @@
1## Development
2
3When starting the dev server, use background mode:
4
5```
6astro dev --background
7```
8
9Manage the background server with `astro dev stop`, `astro dev status`, and `astro dev logs`.
10
11## Documentation
12
13Full documentation: https://docs.astro.build
14
15Consult these guides before working on related tasks:
16
17- [Adding pages, dynamic routes, or middleware](https://docs.astro.build/en/guides/routing/)
18- [Working with Astro components](https://docs.astro.build/en/basics/astro-components/)
19- [Using React, Vue, Svelte, or other framework components](https://docs.astro.build/en/guides/framework-components/)
20- [Adding or managing content](https://docs.astro.build/en/guides/content-collections/)
21- [Adding styles or using Tailwind](https://docs.astro.build/en/guides/styling/)
22- [Supporting multiple languages](https://docs.astro.build/en/guides/internationalization/)
23
tsongglod123/excel-formula-visualizer · .clinerules/coding-conventions.md
@@ +1 @@
1# Coding Conventions
2
3## Component Architecture
4
5- **Astro Components** — All UI components are `.astro` files with frontmatter (`---`) for logic and template for markup
6- **PascalCase** — Component filenames and exported names (e.g., `FeatureCard.astro`, `Hero.astro`)
7- **One component per file** — Each `.astro` file contains a single component
8- **Props** — Define props with TypeScript interface in frontmatter, export via `Astro.props`
9
10## Astro Component Patterns
11
12### Props Interface
13Define props using a TypeScript `Props` interface in the component frontmatter. Astro automatically picks up the `Props` interface for type checking:
14
15```astro
16---
17interface Props {
18 title: string;
19 description?: string;
20 children?: any; // if component accepts slotted content
21}
22
23const { title, description = "Default description" } = Astro.props;
24---
25```
26
27### Slots
28Use `<slot />` for injecting child content into components:
29- **Default slot**: `<slot />` — renders all unnamed children
30- **Named slots**: `<slot name="header" />` — matched via `slot="header"` attribute on child elements
31- **Fallback content**: `<slot><p>Default fallback</p></slot>` — shown when no children are passed
32- **Slot transfer**: Pass slots through nested components using both `name` and `slot` attributes: `<slot name="head" slot="head" />`
33
34### Fragment
35Use Astro's `<Fragment>` component (or short syntax `<>`) to pass multiple HTML elements into a named slot without a wrapping `<div>`:
36
37```astro
38<Fragment slot="body">
39 <tr><td>Item 1</td></tr>
40 <tr><td>Item 2</td></tr>
41</Fragment>
42```
43
44### Layout Components
45- Provide `<html>`, `<head>`, `<body>` page shell with `<slot />` for content injection
46- Accept props via `Astro.props` (e.g., `title`, `description`)
47- Place in `src/layouts/` directory (convention)
48- Can be nested (layout wrapping another layout)
49
50## React Component Patterns
51
52### Component Structure
53- Use `.jsx` or `.tsx` extensions for React components
54- Place React components in `src/components/` alongside Astro components
55- Use `'use client'` directive for components that need client-side interactivity
56
57### State Management
58- Use `useState` for local component state (e.g., collapsible groups, hover state)
59- Use `useReducer` for complex state logic (e.g., step-by-step mode)
60- Use `useRef` for DOM references and transient values
61- Use `useMemo`/`useCallback` sparingly — only for expensive computations
62
63### Performance (Follow `vercel-react-best-practices` skill)
64- **Eliminate waterfalls**: Use `Promise.all()` for independent async operations
65- **Bundle size**: Avoid barrel file imports, use dynamic imports for heavy components
66- **Re-render optimization**: Calculate derived state during rendering, use functional `setState` updates
67- **Client-side data fetching**: Use passive event listeners, deduplicate global listeners
68
69### Hydration with Astro
70- Use `client:load` for immediately-visible interactive React components
71- Use `client:idle` for lower-priority interactive elements
72- Use `client:visible` for below-the-fold interactive elements
73- Pass serializable props only (no functions, no complex objects)
74
75## Frontend Design Guidelines
76
77Always follow the `frontend-design` skill when creating new components, pages, or layouts:
78
79- **Bold Aesthetic Direction** — Choose a distinctive visual direction (minimalist, maximalist, editorial, etc.) and execute with precision. Avoid generic AI aesthetics.
80- **Typography** — Use distinctive, characterful font choices. Avoid generic fonts like Arial, Inter, Roboto for display. Pair display fonts with refined body fonts.
81- **Color & Theme** — Commit to a cohesive palette using CSS variables. Use dominant colors with sharp accents. Avoid timid, evenly-distributed palettes.
82- **Motion** — Use CSS animations for micro-interactions and page-load reveals. Favor CSS-only solutions. Use staggered `animation-delay` for orchestrated entrances.
83- **Spatial Composition** — Leverage asymmetry, overlap, generous negative space, and grid-breaking elements for visual interest.
84- **Backgrounds** — Add atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, or subtle grain overlays instead of flat solid colors.
85
86## Web Design Compliance
87
88When reviewing UI, follow the `web-design-guidelines` skill:
89
901. Fetch the latest guidelines from: `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`
912. Review files against all rules
923. Output findings in `file:line` format
93
94## Accessibility
95
96- Semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`
97- ARIA: Use `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-hidden="true"` for decorative elements
98- Keyboard: All interactive elements must be reachable and operable via keyboard (Tab, Enter, Escape, arrow keys)
99- Focus: Visible focus indicators, logical tab order, focus trapping for modals
100- Color: Maintain WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
101- Screen readers: Test with screen readers for UI changes; use `sr-only` for visually hidden but accessible content
102
103## CSS & Styling
104
105- **Tailwind CSS 4** — Use utility classes as the primary styling approach
106- **CSS Variables** — Define theme tokens in `global.css` using `@theme` directive
107- **Responsive Design** — Mobile-first approach with Tailwind breakpoints (`sm:`, `md:`, `lg:`, `xl:`)
108- **Custom Styles** — Use `@apply` sparingly; prefer inline utility classes
109- **No tailwind.config.js** — Tailwind v4 is CSS-based, configure via `@import "tailwindcss"` in `global.css`
110
111## TypeScript
112
113- Use TypeScript for all component logic and data structures
114- Define interfaces for props, AST nodes, and translation rules
115- Use strict mode (`strict: true` in tsconfig)
116- Avoid `any` — prefer explicit types or `unknown`
117
118## File Organization
119
120```
121src/
122├── components/ # Reusable Astro components
123├── layouts/ # Page layouts (Layout.astro)
124├── pages/ # Route pages (index.astro, visualize.astro, etc.)
125├── styles/ # Global CSS (global.css)
126└── assets/ # Static assets (images, icons)
@@ −1 +1 @@
1−## Development
1+# Coding Conventions
22
3−When starting the dev server, use background mode:
3+## Component Architecture
44
5+- **Astro Components** — All UI components are `.astro` files with frontmatter (`---`) for logic and template for markup
6+- **PascalCase** — Component filenames and exported names (e.g., `FeatureCard.astro`, `Hero.astro`)
7+- **One component per file** — Each `.astro` file contains a single component
8+- **Props** — Define props with TypeScript interface in frontmatter, export via `Astro.props`
9+
10+## Astro Component Patterns
11+
12+### Props Interface
13+Define props using a TypeScript `Props` interface in the component frontmatter. Astro automatically picks up the `Props` interface for type checking:
14+
15+```astro
16+---
17+interface Props {
18+ title: string;
19+ description?: string;
20+ children?: any; // if component accepts slotted content
21+}
22+
23+const { title, description = "Default description" } = Astro.props;
24+---
525 ```
6−astro dev --background
26+
27+### Slots
28+Use `<slot />` for injecting child content into components:
29+- **Default slot**: `<slot />` — renders all unnamed children
30+- **Named slots**: `<slot name="header" />` — matched via `slot="header"` attribute on child elements
31+- **Fallback content**: `<slot><p>Default fallback</p></slot>` — shown when no children are passed
32+- **Slot transfer**: Pass slots through nested components using both `name` and `slot` attributes: `<slot name="head" slot="head" />`
33+
34+### Fragment
35+Use Astro's `<Fragment>` component (or short syntax `<>`) to pass multiple HTML elements into a named slot without a wrapping `<div>`:
36+
37+```astro
38+<Fragment slot="body">
39+ <tr><td>Item 1</td></tr>
40+ <tr><td>Item 2</td></tr>
41+</Fragment>
742 ```
843
9−Manage the background server with `astro dev stop`, `astro dev status`, and `astro dev logs`.
44+### Layout Components
45+- Provide `<html>`, `<head>`, `<body>` page shell with `<slot />` for content injection
46+- Accept props via `Astro.props` (e.g., `title`, `description`)
47+- Place in `src/layouts/` directory (convention)
48+- Can be nested (layout wrapping another layout)
1049
11−## Documentation
50+## React Component Patterns
1251
13−Full documentation: https://docs.astro.build
52+### Component Structure
53+- Use `.jsx` or `.tsx` extensions for React components
54+- Place React components in `src/components/` alongside Astro components
55+- Use `'use client'` directive for components that need client-side interactivity
1456
15−Consult these guides before working on related tasks:
57+### State Management
58+- Use `useState` for local component state (e.g., collapsible groups, hover state)
59+- Use `useReducer` for complex state logic (e.g., step-by-step mode)
60+- Use `useRef` for DOM references and transient values
61+- Use `useMemo`/`useCallback` sparingly — only for expensive computations
1662
17−- [Adding pages, dynamic routes, or middleware](https://docs.astro.build/en/guides/routing/)
18−- [Working with Astro components](https://docs.astro.build/en/basics/astro-components/)
19−- [Using React, Vue, Svelte, or other framework components](https://docs.astro.build/en/guides/framework-components/)
20−- [Adding or managing content](https://docs.astro.build/en/guides/content-collections/)
21−- [Adding styles or using Tailwind](https://docs.astro.build/en/guides/styling/)
22−- [Supporting multiple languages](https://docs.astro.build/en/guides/internationalization/)
63+### Performance (Follow `vercel-react-best-practices` skill)
64+- **Eliminate waterfalls**: Use `Promise.all()` for independent async operations
65+- **Bundle size**: Avoid barrel file imports, use dynamic imports for heavy components
66+- **Re-render optimization**: Calculate derived state during rendering, use functional `setState` updates
67+- **Client-side data fetching**: Use passive event listeners, deduplicate global listeners
2368
69+### Hydration with Astro
70+- Use `client:load` for immediately-visible interactive React components
71+- Use `client:idle` for lower-priority interactive elements
72+- Use `client:visible` for below-the-fold interactive elements
73+- Pass serializable props only (no functions, no complex objects)
74+
75+## Frontend Design Guidelines
76+
77+Always follow the `frontend-design` skill when creating new components, pages, or layouts:
78+
79+- **Bold Aesthetic Direction** — Choose a distinctive visual direction (minimalist, maximalist, editorial, etc.) and execute with precision. Avoid generic AI aesthetics.
80+- **Typography** — Use distinctive, characterful font choices. Avoid generic fonts like Arial, Inter, Roboto for display. Pair display fonts with refined body fonts.
81+- **Color & Theme** — Commit to a cohesive palette using CSS variables. Use dominant colors with sharp accents. Avoid timid, evenly-distributed palettes.
82+- **Motion** — Use CSS animations for micro-interactions and page-load reveals. Favor CSS-only solutions. Use staggered `animation-delay` for orchestrated entrances.
83+- **Spatial Composition** — Leverage asymmetry, overlap, generous negative space, and grid-breaking elements for visual interest.
84+- **Backgrounds** — Add atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, or subtle grain overlays instead of flat solid colors.
85+
86+## Web Design Compliance
87+
88+When reviewing UI, follow the `web-design-guidelines` skill:
89+
90+1. Fetch the latest guidelines from: `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`
91+2. Review files against all rules
92+3. Output findings in `file:line` format
93+
94+## Accessibility
95+
96+- Semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`
97+- ARIA: Use `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-hidden="true"` for decorative elements
98+- Keyboard: All interactive elements must be reachable and operable via keyboard (Tab, Enter, Escape, arrow keys)
99+- Focus: Visible focus indicators, logical tab order, focus trapping for modals
100+- Color: Maintain WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
101+- Screen readers: Test with screen readers for UI changes; use `sr-only` for visually hidden but accessible content
102+
103+## CSS & Styling
104+
105+- **Tailwind CSS 4** — Use utility classes as the primary styling approach
106+- **CSS Variables** — Define theme tokens in `global.css` using `@theme` directive
107+- **Responsive Design** — Mobile-first approach with Tailwind breakpoints (`sm:`, `md:`, `lg:`, `xl:`)
108+- **Custom Styles** — Use `@apply` sparingly; prefer inline utility classes
109+- **No tailwind.config.js** — Tailwind v4 is CSS-based, configure via `@import "tailwindcss"` in `global.css`
110+
111+## TypeScript
112+
113+- Use TypeScript for all component logic and data structures
114+- Define interfaces for props, AST nodes, and translation rules
115+- Use strict mode (`strict: true` in tsconfig)
116+- Avoid `any` — prefer explicit types or `unknown`
117+
118+## File Organization
119+
120+```
121+src/
122+├── components/ # Reusable Astro components
123+├── layouts/ # Page layouts (Layout.astro)
124+├── pages/ # Route pages (index.astro, visualize.astro, etc.)
125+├── styles/ # Global CSS (global.css)
126+└── assets/ # Static assets (images, icons)
