skills.rest
maxxthedeveloper
maxxthedeveloperCOMMUNITY
Explore all skills by this author →
Website𝕏@maxxthedesignerGitHub

add-work-tile

Add image and video tiles to a portfolio work grid.

3|Updated Jan 27, 2026
Search Tags:#web development#image#video#portfolio#asset management#tile
One-click install
npx skills add https://github.com/maxxthedeveloper/skills-and-agents --skill add-work-tile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-work-tile
Source: https://github.com/maxxthedeveloper/skills-and-agents/tree/main/skills/add-work-tile
Command: npx skills add https://github.com/maxxthedeveloper/skills-and-agents --skill add-work-tile

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, ffmpeg, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding new visual elements (images and videos) to a portfolio's work grid, ensuring consistency and proper formatting.

Core Features & Use Cases

  • Automated Asset Handling: Identifies new images and videos in the designated assets folder.
  • Configurable Tile Creation: Guides the user through selecting layout types, naming conventions, hover states, and grid positions.
  • Video Optimization: Handles video poster extraction and format conversion for web display.
  • Use Case: A designer has just completed a new project and wants to add it to their online portfolio. They can use this Skill to upload the project's screenshots and video, and the Skill will help them configure it as a new tile in the existing grid layout.

Quick Start

Use the add-work-tile skill to add a new image to the portfolio grid.

Frequently Asked Questions about add-work-tile

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

FAQPage Schema
How do I add new images and videos to my portfolio grid layout?▼

To add images and videos to a portfolio grid, this Skill automates asset discovery from a designated folder and guides tile configuration. It manages data file updates and supports five distinct layout types for consistent portfolio formatting.

Do I need ffmpeg and sharp to optimize video posters for web display?▼

Yes, ffmpeg and sharp are required dependencies for video poster extraction and format optimization. Node.js executes these libraries to process visual assets and synchronize data files when adding new portfolio tiles.

What's the best way to configure hover states and grid positions for portfolio tiles?▼

Configuring hover states and grid positions is handled through guided user input during tile creation. The Skill prompts you to select layout types and naming conventions, updating the portfolio data file automatically.

Can I use different layout types for images and videos in the same work page grid?▼

Yes, the Skill supports five distinct layout types for both images and videos within the same work page grid. It identifies new assets in the designated folder and applies your selected layout configuration to each tile.

Why does video format conversion fail when adding a new work tile?▼

Video format conversion and poster extraction fail when ffmpeg or sharp is missing from the Node.js environment. Ensure both dependencies are installed so the Skill can process video assets and update the portfolio data file correctly.

Related Skills

Explore More Design & Creative Skills→
briglebbrigleb
2

web-ready-media

Convert and resize media files into a web-ready/ folder with descriptive names.

Community
Advanced
zeropoint-foundationzeropoint-foundation
1

architecture-video

Generate and update an architecture overview video with Remotion.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Static Web Development

Build accessible, responsive static websites with semantic HTML and CSS.

Official
Intermediate
dmccrearydmccreary
90

mermaid-generator

Generate interactive Mermaid workflow diagrams as standalone HTML MicroSim packages.

Community
Basic