static-files-assets

Organize and optimize static files across src/assets and public/assets.

Updated Mar 1, 2026
One-click install
npx skills add https://github.com/wonkpentink/agent-skills-fe --skill static-files-assets
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: static-files-assets
Source: https://github.com/wonkpentink/agent-skills-fe/tree/main/skills/static-files-assets
Command: npx skills add https://github.com/wonkpentink/agent-skills-fe --skill static-files-assets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide for organizing static files and assets in src/assets/ and public/assets/, helping teams decide when to bundle with Vite versus serving publicly without optimization, and ensuring consistent directory structures.

Core Features & Use Cases

  • Organize icons, images, and illustrations into clear src/assets and public/assets locations.
  • Define naming conventions (ic-, logos, images) and best practices for asset imports and public URL references.
  • Use in real projects to decide between bundled assets for components and publicly served assets for large collections or unchanged resources.

Quick Start

Organize your assets by categorizing icons under public/assets/icons and images under public/assets/images, and import small bundled assets from src/assets when used in code.

Frequently Asked Questions about static-files-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I organize static files and assets in src/assets versus public/assets?

Organize static files by placing component-bundled assets in src/assets and publicly served resources in public/assets. This separation simplifies asset management and improves build performance by distinguishing optimized imports from direct URL references.

When should I bundle assets with Vite instead of serving them publicly?

Bundle assets with Vite when they are imported directly in components for optimization, and serve them publicly without optimization for large collections or unchanged resources. This approach ensures consistent directory structures and faster builds.

What are the best practices for image optimization and asset naming conventions?

Apply naming conventions using prefixes like ic- for icons and separate directories for logos and images. Following these guidelines ensures clear references and prescribes standards for image optimization across your project.

How do I import assets in components versus using public URL references?

Import small bundled assets from src/assets when used directly in code, and use public URL references for large collections in public/assets. This distinction enforces conventions for asset structure and reference usage.

Does this asset management approach work for both icons and large image collections?

Yes, it categorizes icons under public/assets/icons and images under public/assets/images while importing small bundled assets from src/assets. This supports both bundled component assets and large publicly served collections.