docs(web-react): standardize README code examples #DS-2421

Author: dlouhak

.agents/skills/figma-to-spirit/SKILL.md

@@ -163,7 +163,7 @@ When analyzing Figma, check if children have `w-full` (full width) or `shrink-0
 - **If children do NOT have `w-full`** → Parent should use `alignmentX="left"` to prevent unwanted width expansion
 - **Children with both `w-full` AND `max-width`** → Parent uses `alignmentX="stretch"`, child stretches UP TO its max-width constraint
 
-```jsx
+```tsx
 // WRONG - alignmentX="left" prevents children from filling width even when Figma shows w-full
 <Flex direction="vertical" spacing="space-1000" alignmentX="left">
   <Box UNSAFE_style={{ maxWidth: "800px" }}>...</Box>  {/* Won't stretch to 800px */}
@@ -211,7 +211,7 @@ When analyzing Figma, check if children have `w-full` (full width) or `shrink-0
 
 Heading and Text accept accent colors, but you must use the **full token name** (not short form).
 
-```jsx
+```tsx
 // WRONG - short form "accent-02" causes TypeScript lint error
 <Heading elementType="div" size="xlarge" textColor="accent-02">300K+</Heading>
 
@@ -230,7 +230,7 @@ When only one breakpoint is provided in Figma:
 1. **Identify the breakpoint** - Check Figma frame width (mobile < 768px, tablet 768-1024px, desktop > 1024px)
 2. **Add responsive props** for other breakpoints:
 
-```jsx
+```tsx
 // Grid: reduce columns on smaller screens
 <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} />
 
@@ -430,7 +430,7 @@ Before finalizing code:
 
 **CRITICAL: Never substitute icon names with your own choices.**
 
-```jsx
+```tsx
 // WRONG - Developer substituted "semantically appropriate" icons
 <Icon name="shield-dualtone" />  // Was "placeholder" in Figma
 <Icon name="folder" />           // Was "placeholder" in Figma
@@ -455,7 +455,7 @@ The rule: If CodeConnect shows `iconName="placeholder"`, your code MUST use `ico
 
 **CRITICAL: Never use deprecated features even if they appear in older Figma files.**
 
-```jsx
+```tsx
 // WRONG - using deprecated hideOnCollapse prop
 <UncontrolledCollapse id="collapse-1" hideOnCollapse>
   Content
@@ -505,7 +505,7 @@ All prop values must come from Figma layer data (`get_design_context`, CodeConne
 - **Text colors**: Screenshot rendering may not accurately represent color tokens.
 - **Sizes**: Component sizes (e.g., Section `size`, Tag `size`) cannot be reliably read from screenshots.
 
-```jsx
+```tsx
 // WRONG - Guessed backgroundColor from screenshot appearance
 <Section backgroundColor="secondary" size="xlarge">
   <Heading elementType="h1">Title</Heading>

.agents/skills/figma-to-spirit/components/cards.md

@@ -54,7 +54,7 @@ Makes a Card interactive by providing a clickable title link that stretches to c
 
 1. **Using Heading with textColor instead of CardLink when Figma shows link styling**
 
-   ```jsx
+   ```tsx
    // WRONG - Figma shows themed/link/primary/state-default color on title
    <Card>
      <CardMedia>
@@ -86,7 +86,7 @@ Makes a Card interactive by providing a clickable title link that stretches to c
 
 2. **Forgetting isHeading on CardTitle when using CardLink**
 
-   ```jsx
+   ```tsx
    // WRONG - CardTitle without isHeading when it should be a heading
    <CardTitle>
      <CardLink href="#">Card Title</CardLink>
@@ -100,7 +100,7 @@ Makes a Card interactive by providing a clickable title link that stretches to c
 
 3. **Using regular Link instead of CardLink inside Card**
 
-   ```jsx
+   ```tsx
    // WRONG - Link doesn't provide Card-level click target
    <Card>
      <CardBody>
@@ -131,7 +131,7 @@ Makes a Card interactive by providing a clickable title link that stretches to c
 
 ### Examples
 
-```jsx
+```tsx
 // Basic Card with link (Figma shows link color on title)
 <Card>
   <CardMedia>
@@ -191,7 +191,7 @@ Container for Card title content. Can render as a heading or plain container.
 
 ### Examples
 
-```jsx
+```tsx
 // Static Card title (no link)
 <CardTitle isHeading headingProps={{ size: 'large' }}>
   Static Card Title
@@ -216,7 +216,7 @@ Container for Card description/body text.
 
 ### Examples
 
-```jsx
+```tsx
 <CardDescription>This is the card description text that provides additional context.</CardDescription>
 ```
 
@@ -228,7 +228,7 @@ Container for Card description/body text.
 
 When Figma shows a Card WITHOUT link styling on the title:
 
-```jsx
+```tsx
 <Card>
   <CardMedia>
     <img src="https://picsum.photos/seed/static/400/300" alt="" />
@@ -246,7 +246,7 @@ When Figma shows a Card WITHOUT link styling on the title:
 
 When Figma shows a Card WITH link color tokens on the title (`themed/link/...`):
 
-```jsx
+```tsx
 <Card>
   <CardMedia>
     <img src="https://picsum.photos/seed/clickable/400/300" alt="" />
@@ -264,7 +264,7 @@ When Figma shows a Card WITH link color tokens on the title (`themed/link/...`):
 
 When Figma shows a Card with button actions (not title link):
 
-```jsx
+```tsx
 <Card>
   <CardBody>
     <CardTitle isHeading>Card with Actions</CardTitle>
@@ -304,7 +304,7 @@ Container for Card visual content (images, icons, IconBox) in the artwork slot.
 
 When using IconBox inside CardArtwork in a horizontal Card layout, the IconBox stretches to fill the full Card height instead of maintaining its square aspect ratio. This is especially noticeable when the Card has additional content (like CardFooter with buttons) that makes it taller.
 
-```jsx
+```tsx
 // WRONG - IconBox stretches vertically to fill CardArtwork height
 <Card direction="horizontal" isBoxed>
   <CardArtwork>
@@ -351,7 +351,7 @@ When using IconBox inside CardArtwork in a horizontal Card layout, the IconBox s
 
 2. **Expecting alignmentX to work on horizontal Cards**
 
-   ```jsx
+   ```tsx
    // WRONG - alignmentX has no effect on horizontal Card
    <Card direction="horizontal">
      <CardArtwork alignmentX="center">
@@ -371,7 +371,7 @@ When using IconBox inside CardArtwork in a horizontal Card layout, the IconBox s
 
 ### Examples
 
-```jsx
+```tsx
 // Horizontal Card with top-aligned IconBox (most common pattern)
 <Card direction="horizontal" isBoxed>
   <CardArtwork>