Skip to main content

Create Skeleton

Create or update loading skeleton components that match existing UI layout, spacing, and design tokens. Use when the user asks for a skeleton, loading placeholder, shimmer, or pulse state for a React screen, section, modal, card, or table.

Source: .agents/skills/create-skeleton/SKILL.md

Metadata​

  • name: create-skeleton

Content​

Create Skeleton

Goal​

Implement loading placeholders that feel native to this codebase and mirror the final UI structure.

Workflow​

  1. Find the target component and identify the exact section that needs a loading state.
  2. Load .agents/skills/feature-context/SKILL.md for the touched domain and inspect the relevant .agents/references/features/ pack before editing.
  3. If the skeleton is Figma-driven, load .agents/references/coding-standard/figma-guidance.md.
  4. Reuse existing skeleton patterns in nearby files first (animation, colors, radii, spacing).
  5. Build a dedicated skeleton component in its own file (<FeatureName>Skeleton.tsx) with:
    • animate-pulse
    • bg-npl-neutral-light-alpha-3 for placeholder blocks
    • section containers that match production rounding/background tokens
  6. Wire the skeleton using explicit loading state (isLoading...) and render fallback first:
    • loading -> skeleton
    • loaded -> actual content
  7. Keep skeleton dimensions close to final content (text rows, avatars, chips, buttons, media thumbs).
  8. Avoid inline styles; use Tailwind utility classes and project tokens.
  9. Do not add locale strings for skeleton-only UI.

Implementation Rules​

  • One top-level React functional component per file.
  • Use TypeScript (.tsx) for new skeleton components.
  • Keep skeleton code presentational only (no data fetching inside skeleton file).
  • Prefer readable names (<Feature>Skeleton, isLoading<Feature>).
  • If the skeleton establishes a durable loading-state pattern for a feature domain, update the matching .agents/references/features/*.md file.

Quick Checklist​

  • Loading state exists and is toggled in success + error branches.
  • Skeleton visually maps to the final layout.
  • Colors/radius/spacing use existing NPL/Tailwind tokens.
  • Lints pass for touched files.