Loading
Also from Kynth Studios
Also from Kynth Studios
Also from Kynth Studios
1# Coding Conventions23## Component Architecture45- **Astro Components** — All UI components are `.astro` files with frontmatter (`---`) for logic and template for markup6- **PascalCase** — Component filenames and exported names (e.g., `FeatureCard.astro`, `Hero.astro`)7- **One component per file** — Each `.astro` file contains a single component8- **Props** — Define props with TypeScript interface in frontmatter, export via `Astro.props`910## Astro Component Patterns1112### Props Interface13Define props using a TypeScript `Props` interface in the component frontmatter. Astro automatically picks up the `Props` interface for type checking:1415```astro16---17interface Props {18 title: string;19 description?: string;20 children?: any; // if component accepts slotted content21}2223const { title, description = "Default description" } = Astro.props;24---25```2627### Slots28Use `<slot />` for injecting child content into components:29- **Default slot**: `<slot />` — renders all unnamed children30- **Named slots**: `<slot name="header" />` — matched via `slot="header"` attribute on child elements31- **Fallback content**: `<slot><p>Default fallback</p></slot>` — shown when no children are passed32- **Slot transfer**: Pass slots through nested components using both `name` and `slot` attributes: `<slot name="head" slot="head" />`3334### Fragment35Use Astro's `<Fragment>` component (or short syntax `<>`) to pass multiple HTML elements into a named slot without a wrapping `<div>`:3637```astro38<Fragment slot="body">39 <tr><td>Item 1</td></tr>40 <tr><td>Item 2</td></tr>41</Fragment>42```4344### Layout Components45- Provide `<html>`, `<head>`, `<body>` page shell with `<slot />` for content injection46- Accept props via `Astro.props` (e.g., `title`, `description`)47- Place in `src/layouts/` directory (convention)48- Can be nested (layout wrapping another layout)4950## React Component Patterns5152### Component Structure53- Use `.jsx` or `.tsx` extensions for React components54- Place React components in `src/components/` alongside Astro components55- Use `'use client'` directive for components that need client-side interactivity5657### State Management58- 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 values61- Use `useMemo`/`useCallback` sparingly — only for expensive computations6263### Performance (Follow `vercel-react-best-practices` skill)64- **Eliminate waterfalls**: Use `Promise.all()` for independent async operations65- **Bundle size**: Avoid barrel file imports, use dynamic imports for heavy components66- **Re-render optimization**: Calculate derived state during rendering, use functional `setState` updates67- **Client-side data fetching**: Use passive event listeners, deduplicate global listeners6869### Hydration with Astro70- Use `client:load` for immediately-visible interactive React components71- Use `client:idle` for lower-priority interactive elements72- Use `client:visible` for below-the-fold interactive elements73- Pass serializable props only (no functions, no complex objects)7475## Frontend Design Guidelines7677Always follow the `frontend-design` skill when creating new components, pages, or layouts:7879- **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.8586## Web Design Compliance8788When reviewing UI, follow the `web-design-guidelines` skill:89901. Fetch the latest guidelines from: `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`912. Review files against all rules923. Output findings in `file:line` format9394## Accessibility9596- Semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`97- ARIA: Use `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-hidden="true"` for decorative elements98- 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 modals100- 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 content102103## CSS & Styling104105- **Tailwind CSS 4** — Use utility classes as the primary styling approach106- **CSS Variables** — Define theme tokens in `global.css` using `@theme` directive107- **Responsive Design** — Mobile-first approach with Tailwind breakpoints (`sm:`, `md:`, `lg:`, `xl:`)108- **Custom Styles** — Use `@apply` sparingly; prefer inline utility classes109- **No tailwind.config.js** — Tailwind v4 is CSS-based, configure via `@import "tailwindcss"` in `global.css`110111## TypeScript112113- Use TypeScript for all component logic and data structures114- Define interfaces for props, AST nodes, and translation rules115- Use strict mode (`strict: true` in tsconfig)116- Avoid `any` — prefer explicit types or `unknown`117118## File Organization119120```121src/122├── components/ # Reusable Astro components123├── 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)127```
One repository carrying more than one format is the comparison this product exists for: does anyone actually write different content in each file, or is one a copy of the other?
| Repository | Format | Stack | Covers | Score | Changed |
|---|---|---|---|---|---|
| tsongglod123/excel-formula-visualizer.clinerules/development.md · 0 | Cline rules | setupbuildtestarch+2 | 86/100 | today | |
| tsongglod123/excel-formula-visualizer.clinerules/memory-bank.md · 0 | Cline rules | archperformancedocs | 48/100 | today | |
| tsongglod123/excel-formula-visualizer.clinerules/project-context.md · 0 | Cline rules | testing-strategy | 16/100 | today | |
| tsongglod123/excel-formula-visualizerAGENTS.md · 0 | AGENTS.md | docs | 31/100 | today |
Same format, overlapping stack, ranked by quality.
| Repository | Format | Stack | Covers | Score | Changed |
|---|---|---|---|---|---|
| bashdeban/fastmind.clinerules/.project-consistency-keeper2.md · 5 | Cline rules | setupbuildtestlint-format+11 | 100/100 | 14 days ago | |
| JCodesMore/ai-website-cloner-template.clinerules · 32k | Cline rules | buildlint-formatstylearch+3 | 97/100 | 7 days ago | |
| BryaanF/LiantPortfolio.clinerules/project-guidelines.md · 0 | Cline rules | buildstylearchgit+2 | 96/100 | 14 days ago | |
| u9401066/zotero-keepervscode-extension/resources/repo-assets/pubmed-search-mcp/.clinerules/50-pubmed-project.md · 6 | Cline rules | testlint-formatstylearch+1 | 94/100 | 14 days ago | |
| u9401066/zotero-keeper.clinerules/50-pubmed-project.md · 6 | Cline rules | testlint-formatstylearch+1 | 94/100 | 14 days ago | |
| VaillerTeeter/HoshimiNest.clinerules/project-identity.md · 1 | Cline rules | setuparchtypesdo-not | 93/100 | 12 days ago | |
| blendsdk/codeops-mcp.clinerules/project.md · 0 | Cline rules | buildteststylearch+7 | 91/100 | 14 days ago | |
| tsongglod123/excel-formula-visualizer.clinerules/development.md · 0 | Cline rules | setupbuildtestarch+2 | 86/100 | today |
A badge carrying the measured quality of the strongest agent config file in this repository, out of 100. It reads from this index every time somebody loads your page, so it changes when the measurement changes and there is nothing to keep up to date. Free, no account, and the value is not something you or we can set by hand.
[](https://rulestack.kynth.studio/configs/tsongglod123-excel-formula-visualizer-clinerules-coding-conventions)Would rather not hotlink us? Every badge is also served in shields.io’s endpoint schema, so shields renders the image and your readers never talk to our domain:
Published by Toolproof, the masthead over this index and eight others. The method behind the number is at toolproof.kynth.studio/methodology, and the whole thing is readable as JSON with no key at /api.