Coding
PromptBeginner5 minmarkdown
Markdown Converter
Agent skill for markdown-converter
23
Guide for AI coding agents working in this repository.
Sign in to like and favorite skills
Guide for AI coding agents working in this repository.
Financial Advisory Homepage - a single-page React application built with Vite, TypeScript, Tailwind CSS v4, shadcn/ui, and Zustand state management.
bun install # Install dependencies (use Bun as package manager) bun run dev # Start development server bun run build # TypeScript check + production build bun run lint # Run ESLint bun run preview # Preview production build
Note: No test framework configured. If tests are added, prefer Vitest.
src/ ├── main.tsx # Entry point ├── App.tsx # Root component ├── index.css # Global styles + Tailwind ├── components/ │ ├── layout/ # Header, Footer (page-level layout) │ ├── sections/ # Page sections (Hero, Values, Stats, etc.) │ ├── common/ # Reusable components (NavLink, SectionHeading, etc.) │ └── ui/ # shadcn/ui primitives only ├── store/ # Zustand stores (*.store.ts) ├── lib/ # Utilities (cn, constants) ├── types/ # TypeScript interfaces (index.ts) └── styles/ # CSS theme tokens (theme.css)
@/ for src imports (e.g., @/components/ui/button)import type for type-only importsimport { Menu } from "lucide-react"; import { Button } from "@/components/ui/button"; import type { NavItem } from "@/types";
function keyword, not arrow functions@/types/index.tsindex.ts// Good export function MyComponent({ title }: MyComponentProps) { ... } // Avoid for components export const MyComponent = ({ title }: MyComponentProps) => { ... }
| Type | Convention | Example |
|---|---|---|
| Components | PascalCase | |
| Stores | kebab-case + | |
| Constants | SCREAMING_SNAKE_CASE | , |
| Interfaces | PascalCase | |
| CSS variables | kebab-case with | |
import type for type-only importsdocument.getElementById("root")!)@/lib/utils)styles/theme.css<div className={cn('base-classes', condition && 'conditional', className)} />
@/store/ui.store.ts, UI state only (no async, no persistence)// Good - selective subscription const mobileNavOpen = useUIStore((state) => state.mobileNavOpen); // Avoid - subscribes to entire store const store = useUIStore();
?.) for potentially undefined valuesCSS variables in
styles/theme.css:
--bg-main: #faf7f3; --bg-cream: #ece7df; --bg-muted: #d7e6e7 --teal-dark: #0f3940; --teal-accent: #123b43 --text-primary: #0b2b2e; --text-muted: #5b6f73 --border-subtle: rgba(15, 57, 64, 0.15);
px-4 (mobile), px-6 (tablet), px-8 (desktop)clamp() for headingsReact 19, Tailwind CSS 4, shadcn/ui (Radix), Zustand, Framer Motion, Lenis, Lucide React
Code is valid only if:
bun install && bun run dev worksbun run build completes with no TypeScript errorsbun run lint passes with no errorsUses flat config (ESLint 9.x):
@eslint/js recommended, typescript-eslint recommendedreact-hooks, react-refresh**/*.{ts,tsx}, Ignores: dist/