IFQ Design Skills

Trust Score 90/100

HTML-first design skill for agents: produce verified prototypes, slide decks, infographics, dashboards and export-ready assets (PDF/PPTX/MP4/SVG).

triggers:interactive prototypelanding pageslide deckinfographicmotion demoexport pdfexport pptx

GitHub SKILL.md

What it does

IFQ Design Skills routes natural-language visual requests into a repeatable HTML-first delivery flow. It picks a mode and template, forks a verified HTML artifact into the workspace, runs lightweight verification (npm run verify:lite) and prepares optional exports (PDF/PPTX/MP4/SVG) when requested. The skill encodes verification and tiered export policies so agents deliver a smallest-viable, reviewable artifact on the first turn.

When to use it

Use this skill for interactive prototypes, high-fidelity mockups, landing pages, dashboards, slide decks, infographics, motion demos, brand systems, and any visual deliverable where an HTML-first artifact is acceptable. Do not use for production frontend engineering, backend work, or pure copy edits.

What's included

Scripts: repository includes verification and preview commands (Tier 0 workflow: npm run verify:lite, npm run preview).
References: mode definitions, template index, brand tokens and delivery rules are documented inside references/ and assets/.
Instructions: the SKILL.md contains a 30-second load path, a routing decision tree, tier policy for exports, and explicit verification steps to produce a one-turn visible artifact.

Compatible agents

Designed to run on AgentSkills-compatible hosts (OpenClaw, ClawHub, Claude Code, Codex CLI, Cursor). The metadata lists node-based tooling for Tier 0 verification and optional Playwright/ffmpeg flows for exports.

Audit Summary

IFQ Design Skills is a comprehensive HTML-first design skill for agents, covering 12 modes (prototypes, slides, dashboards, infographics, etc.) with template-based delivery and optional MP4/PDF/PPTX export. SKILL.md is exceptionally well-structured with clear routing, error recovery, and conversation patterns. Scripts are well-documented CLI tools requiring input files/arguments to run; the runner only tested .sh and .py files, skipping 12 JS modules. The two shell scripts and verify.py exited with usage errors (expected without input files). add-music.sh has a minor bug with POSITIONAL array access under set -eu.

Watch Out

add-music.sh crashes with 'unbound variable' when called without arguments due to POSITIONAL[0] access under set -eu
Export dependencies (playwright, pptxgenjs, sharp, ffmpeg) are optional (Tier 1/2) and not installed by default
12 JS scripts were skipped by the runner — they require Node.js and project dependencies
Skill is bilingual (Chinese/English) which is great for reach but may confuse some agents

Missing Dependencies

playwrightpptxgenjssharpffmpeg

Notes

Very well-crafted skill. Security posture is strong: explicit permissions, no dynamic eval, no network calls in core loop, no hidden installs, capability signals clearly declared. Architecture follows the AgentSkills spec closely with progressive disclosure. The only real issue is a minor shell scripting bug in add-music.sh.

Information

Repository: IFQ Design Skills
Stars: 14

Trust Score

Overall90

Security95

Code Quality82

Architecture88

Usefulness85

Related Skills

Markdrop

Convert PDFs to structured Markdown or interactive HTML and generate AI-powered descriptions for images and tables using multiple LLM providers.

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

Plotly (Interactive Python Visualizations)

Interactive Python visualization skill for building hoverable, zoomable, and embeddable charts (Plotly Express + Graph Objects) for EDA, dashboards, and present

PPT as Code

Creator-first workflow to plan and build HTML-first presentations with staged modes (quick/basic/advanced), optional PPTX export, and clear QA and image plannin

PinchTab Development

Developer guide for building, testing, and contributing to PinchTab — commands, workflows, and PR checklist for local development and CI.

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

Colorize — Strategic UI Color Introduction

Introduce purposeful color to monochromatic interfaces to improve hierarchy, meaning, and visual engagement while preserving accessibility.

draw.io Diagram Skill

Create, edit, lint, and export draw.io diagrams; includes export helpers, SVG linting, and repository QA for clean architecture and icon-based diagrams.

Back to Skills