UI Skillbook
2

File Type Icon

A document-sheet icon that shows a file's type and extension, picked from its name.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-file-type-icon and follow the Siteplane File Type Icon skill it prints for this task.

Paste this into your agent.

File Type Icon gives file lists, upload rows and attachment cards a quick visual cue for PDFs, spreadsheets, images, code and more. It reads only the file name, so it works before any upload has finished.

Install

bashnpx shadcn@4.18.0 add @siteplane/file-type-icon

Import it from @/siteplane/components/file-type-icon. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Attachment: Pick Attachment when the file needs a full card with its name, upload state and actions; it can hold this icon as its media.

Rules

  • Pass the file name as name, or set extension when the name has no suffix, such as a document title.
  • Print the file name next to the icon. The icon is aria-hidden and gives assistive technology no text.
  • Pick a size of 16, 20, 24, 32 or 40; below 32 px the extension label is too small to read, so lean on the visible name.
  • Prefer a real thumbnail for images and videos when you have one, and keep this icon for rows without a preview.
  • Size outside the presets with a className that sets height and width in the 34:40 proportion.

Reference

  • File Type Icon docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-file-type-icon

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Animation Vocabularyby emilkowalski

Sharpen motion language so animation choices feel deliberate and consistent.

MotionExternalGitHub stars: 51.4K

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Apple Designby emilkowalski

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI