fix(skeleton): complete atom review

[egdev6]

Summary

• Completes the Skeleton atom review with typed CVA variants, a hook/component split, named exports, and focused tests.
• Reworks Storybook stories to show readable token-backed loading placeholders and parent-owned loading semantics.

Closes #134

Type of change

• 🧩 New component
• 🐛 Bug fix
• 🎨 Design tokens
• ♿ Accessibility
• 🏗️ Infrastructure
• 📚 Documentation

Component checklist (skip if not applicable)

• Follows the 5-file structure (types.ts, use*.ts, Component.tsx, index.ts, *.stories.tsx)
• CVA variants defined in types.ts, not inline
• No hardcoded colors — uses tokens from theme.css
• No any types — TypeScript strict
• ARIA attributes present and correct
• Keyboard navigable (Tab, Enter, Escape where applicable)
• Dark mode works correctly
• Storybook stories cover: default, variants, states (hover, focus, disabled)
• Tests added or updated

How to test

1. pnpm exec biome check src/components/atoms/skeleton/Skeleton.stories.tsx src/components/atoms/skeleton/Skeleton.tsx src/components/atoms/skeleton/index.ts src/components/atoms/skeleton/types.ts src/components/atoms/skeleton/useSkeleton.ts src/components/atoms/skeleton/Skeleton.test.tsx
2. pnpm vitest run src/components/atoms/skeleton/Skeleton.test.tsx
3. pnpm exec tsc --noEmit
4. pnpm run storybook and review Atoms/Skeleton stories.

Screenshots / recordings (if applicable)

Not attached.

Notes for reviewer

• Skeleton is decorative by default via aria-hidden; the composition story demonstrates parent-owned loading semantics with role="status" and aria-busy.
• The existing project template says 5-file structure, but this repository's current component audit convention expects the 6-file pattern including tests.

[Copilot]

Pull request overview

Reworks the Skeleton atom to match the repository's established 6-file atom pattern: typed CVA variants in types.ts, a useSkeleton hook for logic, a presentational Skeleton component, named exports, focused unit tests, and rewritten Storybook stories that showcase token-backed sizes/radii and parent-owned loading semantics.

Changes:

• Replaces free-form width/height props with token-backed size and rounded CVA variants, and adds an ariaHidden prop (decorative by default) consistent with the Spacer atom.
• Splits logic into useSkeleton returning a typed UseSkeletonReturn, and converts Skeleton to a named export consumed via the barrel.
• Adds Skeleton.test.tsx covering hook defaults/overrides and component a11y/className forwarding, plus new Storybook stories (Default, Sizes, Rounded, Composition) using design-system tokens.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/atoms/skeleton/types.ts	Introduces skeletonVariants CVA with size/rounded variants and a new SkeletonProps extending native div attributes minus children/className/aria-hidden.
src/components/atoms/skeleton/useSkeleton.ts	Hook now composes CVA classes with cn, defaults size/rounded/ariaHidden, and returns a typed shape.
src/components/atoms/skeleton/Skeleton.tsx	Becomes a named export, renders a single div with merged class and aria-hidden.
src/components/atoms/skeleton/index.ts	Switches barrel to named Skeleton export.
src/components/atoms/skeleton/Skeleton.test.tsx	New tests for hook defaults, className merging, native prop forwarding, and component a11y behavior.
src/components/atoms/skeleton/Skeleton.stories.tsx	Replaces fixed-pixel stories with token-driven Default/Sizes/Rounded/Composition stories and parent-owned role="status" example.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.