asset-organizer

# Asset Organizer ## Quick Start Provide the root path to your assets folder or describe the assets you need organized. Specify the project type (web, mobile, cross-platform) and any existing naming conventions. The organizer will scan, audit, and produce a reorganization plan with a structured catalog. ## Workflow 1. Scan the asset directory for all files (SVG, PNG, JPG, WebP, PDF, etc.) and detect current naming patterns 2. Gather context: project type, target platforms, existing conventions 3. Audit assets for naming violations, missing density exports, oversized files (>1MB), format issues, and orphaned/unused files 4. Generate a reorganization plan mapping current paths to recommended paths 5. Build a structured asset catalog with metadata 6. Produce prioritized recommendations for fixes and optimizations ## Examples **Example 1: Audit an assets folder** Input: "Organize the assets in /src/assets. It's a React web app." Output: ``` Asset Catalog: React Web App ## Summary - Total assets: 47 - Icons: 28 | Illustrations: 8 | Photos: 6 | Logos: 5 - Formats: SVG: 30 | PNG: 12 | JPG: 5 - Last updated: 2026-03-18 ## Directory Structure assets/ icons/ outline/ filled/ illustrations/ hero/ spot/ empty-state/ photos/ product/ lifestyle/ logos/ primary/ icon/ ## Issues Found | Severity | Issue | File(s) | Recommended Fix | |----------|--------------------------------|----------------------|----------------------------------| | High | PascalCase naming | ArrowRight.svg, etc. | Rename to icon-arrow-right-24.svg| | High | PNG used for simple icons | close.png, menu.png | Convert to SVG for scalability | | Medium | Missing @2x exports | 6 PNG files | Generate @2x and @3x variants | | Low | 3 files exceed 1MB | hero-*.png | Compress or convert to WebP | ## Optimization Opportunities - 2 raster files that should be converted to SVG - 6 assets missing @2x/@3x density exports - 3 files exceeding 1MB that need compression ``` **Example 2: Define naming convention** Input: "What naming convention should we use for our icon library?" Output: ``` Naming Convention Pattern: [category]-[name]-[variant]-[size].[ext] Examples: - icon-arrow-right-24.svg - icon-arrow-right-filled-24.svg - icon-search-outline-16.svg - icon-close-24.svg Rules: - Lowercase, kebab-case, English only - Category prefix: icon, illustration, photo, logo - Size suffix for icons (16, 20, 24, 32, 48) - Variant descriptor: outline, filled, colored - Format: SVG for all icons and logos ``` ## Tools - Use `Glob` to scan for asset files by extension (*.svg, *.png, *.jpg, *.webp, *.pdf) - Use `Read` to inspect asset metadata or existing naming convention documentation - Use `Grep` to search for asset references in code (imports, src attributes, CSS url() values) - Use `Bash` to list directory structures, check file sizes, and count assets ## Error Handling - If no asset directory is specified -> Ask for the root path to the assets folder - If the directory is empty or has no recognized asset files -> Report the finding and ask to confirm the correct path - If naming conventions conflict with an existing team standard -> Present both options with tradeoffs, let the user decide - If assets are referenced in code but missing from the directory -> Flag as broken references with file paths and code locations ## Connectors (Optional) This skill works standalone. When connected to external tools, it unlocks additional capabilities: | Connector | What it enables | |-----------|----------------| | ~~design tool | Scan and organize assets directly within Figma, Sketch, or Adobe XD projects | | ~~asset management | Sync catalog with a centralized DAM system and enforce naming conventions | | ~~project tracker | Create tickets for asset issues and track cleanup progress | | ~~brand guidelines | Cross-reference assets against approved brand marks and imagery standards | ## Rules - File names must be lowercase, kebab-case, English only - Naming pattern: `[category]-[name]-[variant]-[size].[ext]` - Use SVG for icons and logos (scalable, small file size) - Use PNG for complex raster graphics with @2x and @3x density exports - Use WebP for web-optimized exports - Never delete assets without user confirmation -- only recommend removal - Flag unused assets for removal on a quarterly basis ## Output Template ``` Asset Catalog: [Project Name] ## Summary - Total assets: [N] - Icons: [N] | Illustrations: [N] | Photos: [N] | Logos: [N] - Formats: SVG: [N] | PNG: [N] | JPG: [N] | WebP: [N] | Other: [N] - Last updated: [Date] ## Directory Structure [Recommended directory tree] ## Naming Convention Pattern: [category]-[name]-[variant]-[size].[ext] Examples: - icon-arrow-right-24.svg - hero-homepage-desktop.png - logo-primary-color.svg ## Issues Found | Severity | Issue | File(s) | Recommended Fix | |----------|-------|---------|-----------------| | High | [Issue] | [File paths] | [Fix] | | Medium | [Issue] | [File paths] | [Fix] | | Low | [Issue] | [File paths] | [Fix] | ## Optimization Opportunities - [N] files exceeding 1MB that need compression - [N] raster files that should be converted to SVG - [N] assets missing @2x/@3x density exports ``` ## Related Skills - **brand-checker** -- verify organized assets comply with brand guidelines - **design-reviewer** -- review designs that reference the organized asset library - **wireframe-helper** -- use cataloged assets when building wireframes and layouts